/* Main style sheet for Studio87.com - copyright Studio87 */

body{
	height: 100%;
}

#container{
	position: absolute;
	width: 100%;
	min-height: 100%;
}

a{
	color: #00699c;
	text-decoration: none;
}

a:visited{
	text-decoration: none;
	color: #00699c;
}
a:hover{
	color: #39bbf9;
}

header {
	margin: 0 auto;
	width: 973px;
	height: 140px;
	background: url(../img/header.jpg) top center no-repeat;			
}

section{
	position: relative;
	width: 900px;
	height: 360px;
	margin-bottom: 60px;
}

article{
	margin-top: 32px;
	min-height: 126px;
}

#logo {
	position: relative;
	margin: 0 auto;
	width: 190px;
	top: 15px;
	outline: none;
}

#menu{
	width:468px;
	height: 43px;
	margin: 0 auto;
	top: 36px;
	position: relative;
}


.menuitemcontainer{
	position: relative;
	width: 117px;
	height: 43px;
	overflow: hidden;
	float: left;
}

.menushadow{
	position: absolute;
	top: 0px;
	left: 6px;
}

.menuitem{
	position: relative;
	margin: 0 auto;
	width: 117px;
	height:43px;
	top:-10px;
}

.menutext{
	position: relative;
	top:-27px;
	left: 6px;
}

.menuhighlight{
	position: relative;
	top: -43px;
	left: 6px;
	/* opacity: 0; */
	display: none;
}

#mainBanner{
	position: relative;
	width: 880px;
	height: 550px;
	margin: 0 auto;
	padding-top: 20px;
	overflow: hidden;
	
}

#main {
	height: 100%;
	min-height: 100%;
	padding-top: 50px;
	padding-bottom: 154px;
	width: 900px;
	position: relative;
	margin: 0 auto;
	
	color: #797979;
	-webkit-font-smoothing: antialiased;
}

.somequote{
	padding-top: 7px;
	padding-bottom: 3px;
}

.somequote-2{
	padding-top: 14px;
	margin-bottom: 5px;
}

.article-image{
	float: left; 
	/* margin-top: 14px; */ 
	margin-right: 50px;
}

.right-sidebar{
	float: right;
	width: 220px;
	height: 540px;
	margin-left: 30px;
	background: url("../img/sidebarbg.jpg") no-repeat top left; 
}

.featured-client{
	display: block;
	margin-bottom: 28px;
}

#seeportfolio{
	position: relative;
	margin: 80px auto 0px;
	width: 531px;
}


.intro{
	height: 250px;
}

.left-main-image{
 	position: absolute;
	top: 0px;
	left: 0px;
}

.right-main-image{
	float: right;
	top: 0px;
	margin-left: 16px;
}

.regular-text{
	font-size: 14px;
}

.right-column{
	margin-left: 408px;
}

.left-column{
	margin-left: 8px;
}

.mainSlide{
	width: 880px;
	height: 530px;
	top: 20px;
	left: 0px;
	position: absolute;
}

.hiddenColumns{
	position: absolute;
	z-index: -10;
}

.bannerColumn{
	float: left;
	width: 270px;
	height: 350px;
	margin-right: 10px;
	margin-left: 10px;
}

.bannerColumn h3{
	margin-bottom: 0px;
	margin-top: 0.5em;
	font-size: 20px;
	font-weight: normal;
	color: #333333;
}

.bannerColumn p{
	margin-top: 0.5em;
}

#clicktofind{
	position: relative;
	left: 328px;
}

#clicktofind:hover{
	cursor: pointer;
}

#contactquote{
	position: relative;
	width: 340px;
	height: 138px;
	margin: 0 auto;	
}

#soon-message{
	position: relative;
	width: 337px;
	height: 87px;
	margin: 0 auto;
	padding-top: 30px;
}

#contactform{
	position: relative;
	width: 266px;
	margin: 0 auto;
	margin-top: 30px;
}

.showcase-left{
	position: absolute;
	right: 10px;
	bottom: 50px;
}

.showcase-right{
	position: absolute;
	left: 0px;
	bottom: 50px;
}

.showcase-left:hover, .showcase-right:hover{
	cursor: pointer;
}


.showcaseMask{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 900px;
	background-color: #FFF;
	opacity: 0;
	display: none;
	z-index:8999;
}

.hiddenShowcase{
	position: absolute;
	width: 900px;
	height: 650px;
	background: url('../img/showcasebg.png') top left repeat-x;
	z-index: 9000;
	display: none;
	overflow: hidden;
}

/*Form styling*/

.standard-form{
	position: relative;
	width: 900px;
	margin: 0 auto;
	padding-top: 30px;
}

.question{
	width: 100%;
	font-size: 18px;
	color: #575757;
	vertical-align: middle;
	padding-left: 10px;
}

fieldset{
	padding-top: 10px;
	padding-bottom: 30px;
	padding-left: 34px;
}

input[type="radio"], input[type="checkbox"]{
	margin-right: 5px;
}

.option{
	font-size: 14px;
	padding-right: 30px;
}

.option-other{
	display: none;
	padding-top: 10px;
	font-size: 14px;
}

.question-group{
	display: none;
}

#formsubmit{
	margin-top: 20px;
}

input[type="submit"]{
	background-color: white;
	font-size: 0pt;
	border: none;
}

input[type="text"]{
	color: #797979;
	width: 266px;
	height: 24px;
	margin-right: 20px;
	padding-left: 6px;
	background: transparent url('../img/textinputbg.jpg') no-repeat;
	border: none;
	margin-bottom: 10px;
}

input[type="text"][name="name"]{
	background: transparent url('../img/nameinputbg.jpg') center left no-repeat;
	padding-left: 30px;
}

input[type="text"][name="email"]{
	background: transparent url('../img/mailinputbg.jpg') center left no-repeat;
	padding-left: 30px;
}

input[type="text"]:focus{
	outline: none;
}

textarea{
	position: relative;
	width: 70%;
	height: 250px;
	color: #797979;
}

#contactform textarea{
	width: 266px;
	height: 186px;
	background: url('../img/messageinput.jpg') top left no-repeat;
	border: none;
	resize: none;
	text-indent: 25px;
	padding-top: 4px;
	line-height: 170%;
	padding-left: 5px;
}

textarea:focus{
	outline: none;
}


#getquote{
	position: absolute;
	right: 10px;
	width: 123px;
	height: 27px;
	background-image: url("../img/getquote-lo.jpg");
}

#getquote:hover{
	background-image: url("../img/getquote-hi.jpg");
}

#sendmessage{
	position: relative;
	width: 131px;
	height: 27px;
	top: 20px;
	left: 135px;
	background-image: url("../img/sendit.jpg");
}

#quoteerr{
	visibility: hidden;
}


#moretocome{
	position: relative;
	width: 42px;
	margin: 0 auto;
	padding-bottom: 15px;
}

.quoteresult{
	position: absolute;
	height: 100%;
	min-height: 100%;
	width: 100%;
}

.quoteresultnav{
	position: absolute;
	width: 720px;
	top: 300px;
	left: 90px;
}

#nameerror{
	position: absolute;
	left: 275px;
	top: 0px;
}

#emailerror{
	position: absolute;
	left: 275px;
	top: 35px;
}

#messageerror{
	position: absolute;
	left: 275px;
	top: 70px;
}

#botname{
	display: none;
}

/*end form styling*/

footer{
	position: absolute;
	bottom: 0;
	height: 124px;
	width: 100%;
	background: url('../img/footer.jpg') center no-repeat;
}

.footermenu{
	position: relative;
	width: 958px;
	height: 29px;
	margin: 0 auto;
	top: 60px;
}

.footermenuitem{
	float: left;
	width: 170px;
	height: 29px;
	margin-left: 10px;
	margin-right: 10px;
}

.footer-sep{
	float: left;
	position: relative;
	top: -25px;
}

/* FONT EMBEDDING */

@font-face {
font-family: 'GillSansStd';
src: url('../fonts/gillsansstd-webfont.eot');
src: url('../fonts/gillsansstd-webfont.eot?#iefix') format('embedded-opentype'),
     url('../fonts/gillsansstd-webfont.woff') format('woff'),
     url('../fonts/gillsansstd-webfont.ttf') format('truetype'),
     url('../fonts/gillsansstd-webfont.svg#GillSansStdRegular') format('svg');
font-weight: normal;
font-style: normal;

}

@font-face {
    font-family: 'GillSansStdLight';
    src: url('../fonts/gillsansstd-light-webfont.eot');
    src: url('../fonts/gillsansstd-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/gillsansstd-light-webfont.woff') format('woff'),
         url('../fonts/gillsansstd-light-webfont.ttf') format('truetype'),
         url('../fonts/gillsansstd-light-webfont.svg#GillSansStdLight') format('svg');
    font-weight: normal;
    font-style: normal;

}

/* END FONT */

/*START PORTFOLIO VIEWER */

#folioContent{
	position: relative;
	top: 6px;
	height: 634px;
	width: 100%;
	display: none;
}

#closebtn{
	position: absolute;
	right: 8px;
	top: 15px;
}

#closebtn:hover{
	cursor: pointer;
}

#closebtn:hover:before{
	content: "Close ";
}

#visuals{
	position: relative;
	height: 514px;
	width: 100%;
	overflow: hidden;
}

#details{
	position: relative;
	height: 120px;
	width: 100%;
}

#projectID{
	float: left;
	height: 100%;
	width: 75px;
	color: #b9b9b9;
	font-family: 'GillSansStd', Arial;
	font-weight: normal;
	font-size: 48px;
	text-align: center;
}

.bigImage{
	position: absolute;
	left: 38px;
	top:0px;
}

.bigImage img{
	border-radius: 10px;
}

#description{
	float: left;
	width: 825px;
	height: 100%;
}

#description h1{
	color: #333;
	font-family: 'GillSansStdLight', Arial;
	font-weight: normal;
	font-size: 24px;
	margin-top: 6px;
	margin-bottom: 2px;
}

#description p{
	margin-top: 0px;
}

#fwd{
	position: absolute;
	top: 223px;
	right: 10px;
	opacity: 0.7;
}

#bck{
	position: absolute;
	top: 223px;
	left: 10px;
	opacity: 0.7;
}

#fwd:hover, #bck:hover{
	cursor: pointer;
	opacity: 1;
}

/* END PORTFOLIO */

/* ERROR PAGE */

#message404{
	width: 640px;
	margin: 0 auto;
	padding-top: 350px;
	text-align: center;
	background: url('../img/404.jpg') no-repeat center top;
}

/* END ERROR PAGE */

/* NEWSLETTER FORM */

#newsletter-head{
	position: relative;
	width: 285px;
	margin: 0 auto;
	margin-top: 32px;
	margin-bottom: 48px;
}

#newsletter{
	position: relative;
	width: 266px;
	margin: 0 auto 32px;	
}

.newsletter-message{
	position: relative;
	top: 64px;
	margin: 0 auto;
	
	text-align: center;
	color: #797979;
}

#message-error{
	width: 324px;
}

#message-ok{
	width: 428px;
}

#sendnewsletter{
	position: relative;
	width: 86px;
	height: 18px;
	
	top: 16px;
	left: 180px;
	
	background: url('/img/sendnewsletter.jpg');
}

/* END NEWSLETTER FORM */

/* COMING SOON */

#homepage-comingsoon{
	position: relative;
	width: 608px;
	margin: -48px auto 0px;
}

#homepage-newsletter{
	position: relative;
	width: 438px;
	margin: 96px auto 48px;
}

/* END COMING SOON */
#temp-footer-wrapper{
	position: relative;
	width: 382px;
	margin: 0 auto;
}