@charset "utf-8";

* {outline:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,fieldset,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
img{border:0px}

html{
top:0px;
bottom:0px;
height:100%;
}
body{
height:100%;
background-color:#333333;
background-image:url(i/bg.jpg);
font-family: Arial, sans-serif;
font-size: 12px;
color:#FFF;
}
#container{
min-height: 100%;
margin-bottom: -39px;
position: relative;
}
#header{
height:84px;
width:960px;
margin-left:auto;
margin-right:auto;
}
#content{
margin-top:25px;
margin-bottom:20px;
width:960px;
margin-left:auto;
margin-right:auto;
}
#footer{
height:28px;
width:960px;
position:relative;
margin-left:auto;
margin-right:auto;
color:#BBBBBB;
border-top:1px solid #c1c1c1;
padding-top:10px;
text-shadow: #444444 0px 1px 0px;
}
.footerspace {
height: 28px;
clear: both;
}
#contact_extra{
float:right;
width:50px;
height:250px;
text-align:right;
vertical-align:top;
}
/*tiny blue line fix*/
#contact_extra a:hover{
	text-decoration:none;
}
#styledform input{
-moz-border-radius:3px;
border-radius:3px;
height:30px;
font-size:18px;
padding-left:5px;
margin-bottom:10px;
font-family: Times, serif;
border:0px;
}
#styledform input:focus{
background-color:#DDD;
}
#styledform textarea{
-moz-border-radius:5px;
border-radius:5px;
height:30px;
font-size:18px;
padding:8px 10px 8px 10px;
margin-bottom:10px;
font-family: Times, serif;
overflow: auto;
}
#styledform textarea:focus{
background-color:#DDD;
}
#styledform input.btn{
padding:0px 10px 0px 10px;
background-color:#BBB;
margin-right:12px;
-moz-border-radius:5px;
border-radius:5px;
color:#111;
font-size:16px;
font-family:Arial, sans-serif;
cursor:pointer;
}
#styledform input.btn:hover{
-webkit-transition: all .2s ease-in-out;
-moz-box-shadow: 0px 1px 6px #000;
-webkit-box-shadow: 0px 1px 6px #000;
box-shadow: 0px 1px 6px #000;
}
#styledform input.name{
background-image:url(i/name_icon.png);
background-repeat:no-repeat;
background-position:10px 3px;
padding-left:45px;
}
#styledform input.email{
background-image:url(i/mail_icon.png);
background-repeat:no-repeat;
background-position:6px 6px;
padding-left:45px;
}

a{
color:#03A6A6;
text-decoration:none;
}
a:hover{
text-shadow: #FFFFFF 0px 0px 3px;
color:#03A6A6;
text-decoration:underline;
outline:none;
}
a:active{
color:#FFFFFF;
text-decoration:underline;
position: relative;
top: 1px;
}


a.help{
color:#03A6A6;
text-decoration:none;
border-bottom:dotted 1px;
position:relative;
}
a.help div{
display:none;
}
a.help:hover div{
width:150px;
height:auto;
display:block;
z-index:100;
padding:6px;
background-color:#BBB;
border:1px solid #555;
font-size:12px;
font-style:regular;
color:#000;
position: absolute; 
top:1px; 
right:10px;
opacity:0.9;
-moz-border-radius:5px;
border-radius:5px;
-webkit-box-shadow: 0px 2px 5px rgba(0,0,0,.8);
-moz-box-shadow: 0px 2px 5px rgba(0,0,0,.8);
box-shadow: 0px 2px 5px rgba(0,0,0,.8);
}

h3{
font-family:'Ubuntu', arial, serif;
font-size:20px;
}

h2{
font-size:20px;
font-weight:normal;
}
h2.styled{
font-family: 'Arvo', arial, serif; 
}

.home_info{
width:250px;
height:280px;
padding:15px;
background-color:#CCCCCC;
color:#000000;
text-shadow: #FFF 0px 1px 1px;
margin-bottom:40px;
text-align:justify;
float:left;
display:block;
-moz-border-radius:10px;
border-radius:10px;
-webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.8);
-moz-box-shadow: 0px 3px 6px rgba(0,0,0,.8);
box-shadow: 0px 3px 6px rgba(0,0,0,.8);
}
.home_info span{
font-size:16px;
font-style:italic;
}
.home_info img.shadow{
margin:0px 0px 10px 20px;
-webkit-box-shadow: 0px 0px 6px rgba(0,0,0,.8);
-moz-box-shadow: 0px 0px 6px rgba(0,0,0,.8);
box-shadow: 0px 0px 6px rgba(0,0,0,.8);
}

#about h1{
	font-size:36px;
	text-shadow: rgba(255, 255, 255, 0.9) 0 0 3px;
}

#services{
	width:300px;
	text-align:justify;
	float:left;
	margin-right:40px;
}
#services h3{
	margin-bottom:10px;
}
#services img{
	margin:8px 25px 8px 0px;
	float:left;
}

.nein{
	color:#CC0000;
	font-size:16px;
	font-weight:bold;
	text-shadow: rgba(255, 0, 0, 0.9) 0 0 3px;
}

h2.tut{
	color:white;
	font-family:"Myriad Pro", Arial, Helvetica, sans-serif;
	font-size:18px;
	padding:10px 0 0 58px;
	text-shadow:2px 1px 6px #333;
}

/*Navigation menu style*/
.navmenu{
list-style:none;
float:right;
margin-bottom:0px;
}
.navmenu li{
float:left;
padding:3px 15px 0px 15px;
font-size:18px;
margin-left:20px;
height:36px;
}
.navmenu li.active{
background-image:url(i/buttons_bg.png);
background-repeat:no-repeat;
background-position:center top;
}
.navmenu li a{
text-decoration:none;
color:#999999;
text-shadow: #111 1px 1px 1px;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
}
.navmenu li a:hover{
color:#03A6A6;
-webkit-transition:all .3s ease-in-out;
-moz-transition:all .3s ease-in-out;
}
.navmenu li.active a{
color:#222;
text-shadow: #888 1px 1px 1px;
}
.navmenu li.active a:hover{
color:#222;
text-shadow: #888 1px 1px 1px;
}

/*Twitter feed*/
#twitter{
	width:300px;
	height:400px;
	background:#CCC;
	color:#666666;
	display:none;
	float:right;
	-moz-border-radius:10px 10px 6px 6px;
	-khtml-border-radius: 6px;
	-webkit-border-radius: 6px;
	border-radius:6px;
	text-align:left;
	margin-right:80px
}
#tweet-container{
	height:320px;
	width:auto;
	overflow:hidden;
}
#twitIcon{
	position:absolute;
	top:-25px;
	left:-10px;
	width:64px;
	height:64px;
}
#top-bar{
	height:45px;
	background:#666;
	border-bottom:1px solid white;
	position:relative;
	margin-bottom:8px;
	-moz-border-radius:6px 6px 0 0;
	-webkit-border-radius:6px 6px 0 0;
	border-radius:6px 6px 0 0;
}
.tweet{
	padding:5px;
	margin:0 8px 8px;
	border:1px solid #F0F0F0;
	background:url(js/img/transparent.png);
	width:auto;
	overflow:hidden;
}
.tweet .avatar,
.tweet .user,
.tweet .time{
	float:left;
	margin-left:4px;
}
.tweet .time{
	text-transform:uppercase;
	font-size:10px;
	color:#AAAAAA;
	white-space:nowrap;
}
.tweet .avatar img{
	width:36px;
	height:36px;
	border:2px solid #eeeeee;
	margin:0 5px 5px 0;
}
.tweet .txt{
	clear:both;
}
.tweet .user{
	font-weight:bold;
}
#twitter a, #twitter a:visited {
	color:#00BBFF;
	text-decoration:none;
	outline:none;
}
#twitter a:hover{
	text-decoration:underline;
}
#loading{
	margin:100px 95px;
}

/*Sorting Filter*/
#filter{
	height:30px;
	margin-left:20px;
}
#filter li{
	list-style:none;
	float:left;
	margin-right:40px;
	display:block;
}
#filter li a{
	padding:6px 12px;
	background:#CCC;
	text-shadow: #888 0px 1px 0px;
	text-decoration:none;
	-moz-border-radius:4px;
	border-radius:4px;
}
#filter li a{
	color:#000;
}
#filter li a:hover{
	color:#000;
}
#filter li.active a{
	background:#333;
	border:1px solid #CCC;
	color:#FFF;
	text-shadow: rgba(255, 255, 255, 0.9) 0 0 3px;
}
/*Portfolio items*/
ul.portfoliogrid{
	margin-top:40px;
	margin-bottom:20px;
}
ul.portfoliogrid li.item {
	width: 240px;
	height: 200px;
	float: left;
	text-align: center;
	overflow: hidden;
	list-style:none;
}
ul.portfoliogrid li.item img{
	margin-top:2px;
	margin-bottom:10px;
	-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.85);
	-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.85);
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.85);
}
ul.portfoliogrid li.item  h3{
	font-size:16px;
	color: white;
	margin:0px 0px 0px 0px;
	text-shadow: rgba(255, 255, 255, 0.85) 0 0 3px;
}
ul.portfoliogrid li.item  span{
	font-size:14px;
	font-style:italic;
}
ul.portfoliogrid li.item  a{
	color:#03A6A6;
	text-decoration:none;
}
ul.portfoliogrid li.item  a:hover{
	text-shadow: rgba(255, 255, 255, 0.6) 0 0 3px;
}

/*Top Shadow*/
body:before {
  content: "";
  position: fixed;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  -webkit-box-shadow: 0px 0px 10px rgba(0,0,0,.6);
  -moz-box-shadow: 0px 0px 10px rgba(0,0,0,.6);
  box-shadow: 0px 0px 10px rgba(0,0,0,.6);
  z-index: 100;
}