@font-face {font-family: 'Museo-700';src: url('webfonts/eot/style_154925.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_154925.woff') format('woff'),url('webfonts/ttf/style_154925.ttf') format('truetype'),url('webfonts/svg/style_154925.svg#Museo-700') format('svg');}
 @font-face {font-family: 'Museo-300';src: url('webfonts/eot/style_154926.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_154926.woff') format('woff'),url('webfonts/ttf/style_154926.ttf') format('truetype'),url('webfonts/svg/style_154926.svg#Museo-300') format('svg');}
 @font-face {font-family: 'Museo-500';src: url('webfonts/eot/style_154928.eot?#iefix') format('embedded-opentype'),url('webfonts/woff/style_154928.woff') format('woff'),url('webfonts/ttf/style_154928.ttf') format('truetype'),url('webfonts/svg/style_154928.svg#Museo-500') format('svg');}


/* Reset */



.apple_overlay {
	
	/* initially overlay is hidden */
	display:none;
	
	/* growing background image */
	background-image:url(../images/overlay/white.png);
	
	/* 
		width after the growing animation finishes
		height is automatically calculated
	*/
	width:980px;		
	
	/* some padding to layout nested elements nicely  */
	padding: 35px;

	/* a little styling */	
	font-size:11px;
}

/* default close button positioned on upper right corner */
.apple_overlay .close {
	background-image:url(../images/overlay/close.png);
	position:absolute; right:5px; top:5px;
	cursor:pointer;
	height:35px;
	width:35px;
	background-repeat: no-repeat;
}
div.apple_overlay img{
padding-left: 15px;
padding-top: 10px;
}

	div.apple_overlay p{
margin-bottom: 10px;
margin-left: 15px;
}

div.apple_overlay .visit{
font-size: 16px; float: right;
background: #000; padding: 10px;
margin: 5px;

}
	div.apple_overlay h2 {
		margin:10px 0 5px 15px;
		font-weight:bold;
		font-size: 30px;
	}
	
	div.black h2 {
		color:#CCC;
	}
	





* { margin:0; padding:0; }



.text_in {display:none;}

.clear {clear: both;}


/* Base Elements */


HTML{
font-weight: normal; 
font-size: 14px; 
color: #807e7e; 
font-family: Museo-500, Arial, sans-serif;
margin: 0px;
padding: 0px;
min-height: 100%; margin-bottom: 1px; 
padding-top: 0px;


}


img {
border: 0px; }

input, textarea, select   {
font-family: Lucida Sans Unicode,Tahoma, Arial, Verdana, sans-serif;
    	background:#f1f2f1;
    	color: #6F6F6F;
	border: solid 1px #DFDFDF;
padding: 5px;
FONT-SIZE: 12px; 
font-weight: normal;
   -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px;
}   


hr {
border-bottom: 2px dotted #333333; 
margin-bottom: 10px;
}

a{
color: #9c450a;
text-decoration: none;
border-bottom: 0px dotted #CCC;
font-weight: bold;
}

a:hover{
color: #c6670f;
text-decoration: none; 
border-bottom: 0px dotted #000;
}



/* Headings */



h1 {
font-family: Museo-700, Arial, sans-serif;
color: #1d0d02;
font-size: 30px;
font-weight: normal;
}

h2 {
font-family: Museo-700, Arial, sans-serif;
color: #f97d30;
font-size: 24px;
font-weight: normal;
}



h3 {
font-family: Museo-700, Arial, sans-serif;
color: #333;
font-size: 18px;
margin-bottom: 10px;
font-weight: normal;
}


h4 {
font-family: Museo-700, Arial, sans-serif;
color: #000;
font-size: 14px;
font-weight: normal;
}


.wrap{
width: 960px;
margin: auto;
}

.wrap2{
margin: auto;
width: 400px;
padding-right: 730px;
font-size: 12px;
}

#header{
background-color: #dddddc;

background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddc)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #ffffff,  #dddddc); /* for firefox 3.6+ */ 
background: -o-linear-gradient(top, #ffffff, #dddddc);
padding: 20px 0px 40px 0px;
width: 100%;


}

#header a{
color: #000;
}

#footer{

padding: 40px 0px;
width: 100%;
background-color: #000000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#1e1e1e'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#00000), to(#1e1e1e)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #000000,  #1e1e1e); /* for firefox 3.6+ */ 
background: -o-linear-gradient(top, #000000, #1e1e1e);

margin: auto;
text-align: center;
font-size: 12px;
}


#header a:hover{
color: #f98238;
}

#feature{

background-color: #000000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#383838'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#383838)); /* for webkit browsers */
background: -moz-linear-gradient(top,  #000000,  #383838); /* for firefox 3.6+ */ 
background: -o-linear-gradient(top, #000000, #383838);
padding: 60px 0px;
width: 100%;
color: #656565;
font-size: 25px;
text-shadow: 1px 1px 1px #1e1e1e;
font-family: Museo-700, Arial, sans-serif;
font-weight: normal;

}

#feature span{
display: block;
margin-bottom: 30px;
}
#feature strong{
font-weight: normal;
color: #9e9e9e;
}

#feature small{
font-size: 14px;
clear: both;
line-height: 48px;
}

#feature wrap{
width: 960px;
}



#works{
background: #d6d6d6;
padding: 40px 0px;
width: 100%;
}

#services{
background: #dadada;
padding: 40px 0px;
width: 100%;
line-height: 24px;
}

#services ul li{
list-style: none;
}


#services li{
width: 310px;
margin-right: 40px;
float: left;
}

#services h2{
background-image: url('../images/ui/services.png');
background-position: 0px 0px;
background-repeat: no-repeat;
padding-top: 15px;
height: 64px;
padding-left: 75px;
margin-left: -75px;
color: #000;
}

#services small{
padding-left: 74px;
margin-top: -30px;
display: block;
font-size: 14px;
width: 400px;
padding-bottom: 20px;
margin-left: -75px;
}


#services ul li ul li{
padding: 5px 20px 5px 30px;
margin: 5px 15px 5px -10px;
background-image: url('../images/ui/arrowr.png');
background-position: 5px 7px;
background-repeat: no-repeat;
opacity: .8;
width: 200px;
}

#services ul li ul li:hover{
background-color: #cbcbcb;
color: #000;
border-radius: 5px;
background-image: url('../images/ui/arrowr.png');
background-position: 5px 7px;
background-repeat: no-repeat;

}
#services h3{
padding-top: 30px;
}
#contact{
background: #e1e1e1;
padding: 40px 0px;
width: 100%;
}


#contact h2{
background-image: url('../images/ui/contact.png');
background-position: 0px 0px;
background-repeat: no-repeat;
padding-top: 15px;
height: 64px;
padding-left: 75px;
margin-left: -75px;
color: #000;
}

#contact small{
padding-left: 74px;
margin-top: -30px;
display: block;
font-size: 14px;
width: 400px;
padding-bottom: 20px;
margin-left: -75px;
}




.contact{
background-image: url('../images/layout/logo.png');
width: 280px;
margin-bottom: 4px;
}

#contactf strong{

color: #000;
font-weight: normal;

}



#contactf h3{
float: left;

font-weight: normal;
font-size: 12px;
width: 100px;


}

#works p{
padding-bottom: 20px;
}


#works a{
border: 1px solid #CCC;
opacity: .8;
}

#works a:hover{
opacity: .8;
}




#works h2{
background-image: url('../images/ui/works.png');
background-position: 0px 0px;
background-repeat: no-repeat;
padding-top: 15px;
height: 64px;
padding-left: 75px;
margin-left: -75px;
color: #000;
}

#works small{
padding-left: 74px;
margin-top: -30px;
display: block;
font-size: 14px;
width: 400px;
padding-bottom: 20px;
margin-left: -75px;
}






.portfolio_1{
float: left;
width: 390px;
height: 412px;
margin-right: 10px;
background-image: url('../images/portfolio/1.png');
display: block;
float: left;

}


.portfolio_1 span.hover{
background-image: url('../images/portfolio/c/1.png');
width: 390px;
height:  412px;
display: block;

}

.portfolio_2{
margin-right: 20px;
margin-bottom: 12px;
background-image: url('../images/portfolio/2.png');
width: 230px;
height:  177px;
display: block;
float: left;
}

.portfolio_2 span.hover{
background-image: url('../images/portfolio/c/2.png');
width: 230px;
height:  177px;
display: block;
}



.portfolio_3{
margin-right: 20px;
margin-bottom: 12px;
background-image: url('../images/portfolio/3.png');
width: 230px;
height:  177px;
display: block;
float: left;
}

.portfolio_3 span.hover{
background-image: url('../images/portfolio/c/3.png');
width: 230px;
height:  177px;
display: block;
}


.portfolio_4{
margin-bottom: 11px;
margin-right: 6px;
background-image: url('../images/portfolio/4.png');
width: 155px;
height:  118px;
display: block;
float: left;
}




.portfolio_5{
margin-bottom: 11px;
margin-right: 6px;
background-image: url('../images/portfolio/5.png');
width: 155px;
height:  118px;
display: block;
float: left;
margin-left: 2px;
}

.portfolio_6{
margin-bottom: 11px;
margin-right: 6px;
background-image: url('../images/portfolio/6.png');
width: 155px;
height:  118px;
display: block;
float: left;
margin-left: 2px;
}



.portfolio_4 span.hover{
background-image: url('../images/portfolio/c/4.png');
width: 155px;
height:  118px;
display: block;
}

.portfolio_5 span.hover{
background-image: url('../images/portfolio/c/5.png');
width: 155px;
height:  118px;
display: block;
}


.portfolio_6 span.hover{
background-image: url('../images/portfolio/c/6.png');
width: 155px;
height:  118px;
display: block;
}



.portfolio_7{
margin-bottom: 15px;
margin-right: 20px;
margin-right: 6px;
background-image: url('../images/portfolio/7.png');
width: 111px;
height:  89px;
display: block;
float: left;
margin-top: 3px;

}

.portfolio_8{
margin-bottom: 15px;
margin-right: 20px;
margin-right: 6px;
background-image: url('../images/portfolio/8.png');
width: 111px;
height:  89px;
display: block;
float: left;
margin-left: 6px;
margin-top: 3px;

}

.portfolio_9{
margin-bottom: 15px;
margin-right: 20px;
margin-right: 6px;
background-image: url('../images/portfolio/9.png');
width: 111px;
height:  89px;
display: block;
float: left;
margin-left: 7px;
margin-top: 3px;

}

.portfolio_10{
margin-bottom: 15px;

margin-right: 6px;
background-image: url('../images/portfolio/10.png');
width: 111px;
height:  89px;
display: block;
float: left;
margin-left: 6px;

margin-top: 3px;

}


.portfolio_7 span.hover{
background-image: url('../images/portfolio/c/7.png');
width: 111px;
height:  89px;
display: block;
}


.portfolio_8 span.hover{
background-image: url('../images/portfolio/c/8.png');
width: 111px;
height:  89px;
display: block;
}


.portfolio_9 span.hover{
background-image: url('../images/portfolio/c/9.png');
width: 111px;
height:  89px;
display: block;
}


.portfolio_10 span.hover{
background-image: url('../images/portfolio/c/10.png');
width: 111px;
height:  89px;
display: block;
}