@import url("css/reset.css");
@import url("css/grid.css");

body{ font-size: 12px;font-family: myriad-pro,sans-serif; background: #ee0a14 url(images/header-bg.gif) repeat-x top left; color: #fff;}
a{text-decoration: underline;color: #fff;}
.hide-text{text-indent: -99999px;}
.opa-90{-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";filter: alpha(opacity=90);-moz-opacity: 0.9;-khtml-opacity: 0.9;opacity: 0.9;}

header{  height: 68px;
}

#wrapper{width: 740px; margin: 0px auto;}
.home-fix{background: #ee0a14;}
.opacity-fade{
	-webkit-transition: opacity 300ms ease-in 100ms; /* property duration timing-function delay */
    -moz-transition: opacity 300ms ease-in 100ms;
    -o-transition: opacity 300ms ease-in 100ms;
    transition: opacity 300ms ease-in 100ms;
}

/*----------menu-----------*/
.main-menu{text-transform: uppercase; float: right;
	li{float:left;position:relative; margin-right: 1px;}
	a{font-size: 13px;display:block;padding:12px 15px 11px 15px;color:#fff;background:#d60912;text-decoration:none;}
	a:hover{color:#fff;background:#400305;text-decoration: none;}
}

.main-menu li.on a{background:#400305;}

/*--- dropdown ---*/
.main-menu ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
.main-menu ul li{
	padding-top:1px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
	width: 119px;
}
.main-menu ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
.main-menu li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
.main-menu li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#400305;
}
.main-menu li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
.main-menu li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	background:#333;
}

/*----------menu-----------*/

/*----------homepage-----------*/

.nav-space{padding: 150px 0px 0px 30px;}

.homepage-nav{background: url(images/home-bg.jpg) no-repeat top left; position: relative; height:350px;
	div{text-indent: -9999px; overflow:hidden; position: absolute;
		a {background: url(images/home-nav.jpg) no-repeat;display:block;}
		a:hover{background: url(images/home-nav-hover.jpg) no-repeat;}
	}
	.studio912{ margin-top: 25px; margin-left: 27px;
		a{width: 504px; height: 70px;background-position:-27px -25px;}
		a:hover{background-position:-27px -25px;}
	}
	.contact{margin-top: 25px; margin-left: 530px;
		a{width: 175px; height: 26px;background-position:-530px -25px;}
		a:hover{background-position:-530px -25px;}
	}
	.about{ margin-top: 104px; margin-left: 27px;
		a{width: 140px; height: 25px;background-position:-27px -104px;}
		a:hover{background-position:-27px -104px;}
	}
	.portfolio{ margin-top: 175px; margin-left: 324px;
		a{width: 227px; height: 23px;background-position:-324px -175px;}
		a:hover{background-position:-324px -175px;}
	}
	.blog{ margin-top: 253px; margin-left: 580px;
		a{width: 75px; height: 24px;background-position:-580px -253px;}
		a:hover{background-position:-580px -253px;}
	}
	.team{ margin-top: 287px; margin-left: 27px;
		a{width: 143px; height: 25px;background-position:-27px -287px;}
		a:hover{background-position:-27px -287px;}
	}
}

.hightlight{
	h2{text-transform: uppercase; font-size: 15px; border-bottom: solid 1px #fff; padding: 10px 0px; margin: 50px 0px 30px 0px;}
	ul{ margin-left: 30px;
		li{float: left; margin-right: 25px;
			.highlight-thumb{width: 150px; height: 150px; overflow: hidden;}
		}
		.last{margin-right: 0px;}
	}
}

/*----------homepage-----------*/

/*----------portfolio-----------*/

.portfolio-title{background: url(images/portfolio-title.png) no-repeat top right; height: 44px; .hide-text; margin: 70px 0px 0px 0px;}
.printing-title{background: url(images/printing-title.png) no-repeat top right; height: 44px; .hide-text; margin: 70px 0px 0px 0px;}

.item img {opacity:0;}

.portfolio-gallery{ padding: 70px 0px 70px 0px;
	.box {padding: 5px 0px 0px 5px;font-size: 11px;float: left;background:#ee0a14; overflow:hidden;
		.box-caption { display:none;z-index:5; position:absolute;background:#ee0a14;bottom:-60px;height:50px;margin: 0px 3px 2px 0px;background:#9b070d;.opa-90; width: 205px;
			h4{ font-size: 14px; font-weight: 100; text-transform: uppercase;padding: 9px 10px 0px 10px;}
			p{padding: 5px 10px 0px 10px; font-size: 10px;font-style: italic;}
		}
	}
	
}

.port-nav{
	ul{ float: right; margin: 10px 0px;
		li{float: left; border-right: solid 1px #fff; padding: 1px 10px 1px 10px;
			a{color: #fff; text-decoration: none; font-size: 14px;}
			a:hover{text-decoration: underline;}
			.on{text-decoration: underline;}
		}
		.last{border: none;}
	}
}


/*----------portfolio-----------*/

/*----------about us-----------*/

.aboutus-title{background: url(images/about-title.png) no-repeat top right; height: 44px; .hide-text; margin: 70px 0px 0px 0px;}
.about-content{ padding: 70px 0px 0px 0px; text-align: justify;text-transform: uppercase; letter-spacing: 1px;
	h3 {font-size: 30px; margin: 0px 0px 20px 0px; font-weight: 400;
		span{font-weight: 700; }
	}
	p{margin: 20px 0px;font-size: 18px; line-height: 150%; letter-spacing: 1px;}
}

.client{
	h2{text-transform: uppercase; font-size: 15px; border-bottom: solid 1px #fff; padding: 0px 0px 10px 0px; margin: 50px 0px 0px 0px;}
	div{ background: #fff; padding: 10px 0px 5px 0px;
		ul{ margin-left: 55px;
			li{float: left; margin: 10px 10px 0px 0px; text-align: center;}
			.last{margin-right: 0px;}
		}
	}
}

/*----------about us-----------*/

/*----------our team-----------*/

.ourteam-title{background: url(images/ourteam-title.png) no-repeat top right; height: 44px; .hide-text; margin: 70px 0px 0px 0px;}

.ourteam-content{ padding: 30px 0px 0px 0px; margin-bottom: -30px;
	ul{
		li{float: left; width: 240px;
			.ourteam-icon{ text-align: center;}
			.ourteam-name{text-transform: uppercase; font-size: 13px; text-align: center; padding: 15px 0px 40px 0px;}
		}
	}
	.team-row{ line-height: 130%; clear: both; font-weight: 400; padding: 50px 0px;
		h3{font-size: 18px; padding: 10px 0px 5px 0px;text-transform: uppercase;}
		p{margin: 10px 0px;}
	}
}

/*----------our team-----------*/

/*----------contact us-----------*/

.contact-title{background: url(images/contactus-title.png) no-repeat top right; height: 44px; .hide-text; margin: 70px 0px 0px 0px;}
.contact-content{padding: 70px 0px 0px 0px;}
.map{text-align:center;position:relative;
	.map-box{background: rgba(177, 177, 177, 0.8);width:200px;height:298px;position:absolute;left:100px;padding-top:45px;font-size:12px;color:#000;padding-left:20px;line-height:150%; z-index: 2;
		.space-map{clear:both;height:20px;}
		label{width:27%;float:left;margin-right:10px;text-align:left; text-transform: uppercase;}
		span{float:left;text-align:left;width:65%;}
		a{color:red;}
	}
}

/*----------contact us-----------*/

.social-link{position: fixed;margin-top: 350px;
	a{opacity: 0.5;.opacity-fade;}
	a:hover{opacity: 1;}
}

footer{text-align:center; padding: 50px 0px; margin-top: 50px; font-size: 10px;color: #fff;}

#infscr-loading { 
  z-index: 5000;
  position: fixed;
  left: 40%;
  bottom: 40px;
  width: 200px;
  height: 100px;
  padding: 10px;
  background: #000; 
  opacity: 0.8;
  color: #FFF;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  border-radius: 10px;
}