/*
Site Name: Ace5Studios	
Site URL: www.ace5studios.com
Description: Design Studio
Version: 1.0
Author: Ace5 Studios | Coded: An1ken - Creative Agency
Coder URL: www.an1ken.com
*/


/* ////////////////////// */
/* 1. Overall */
/* ////////////////////// */

/* 1.1 Site Background + Resetting */
body{padding:0; margin:0; background:#111 ; font:14px/20px Myriad Web, Arial, Helvetica, sans-serif; color:#FFF; font-weight:normal;}
div, p, h1, h2, h3, ul, img{padding:0px; margin:0px;}
ul{list-style-type:none;}

/* 1.2 Container */
#container { width: 962px ; height: 600px ; border: 1px solid #111 ; margin: 0 auto ; margin-top: 110px ; }

/* ////////////////////// */
/* 2. Site Content */
/* ////////////////////// */

/* Font Face Implementation */
   @font-face { font-family: "Myriad Web"; src: url(font/MyriadWeb.ttf) format("truetype"); font-style: normal ; }



/* 2.1 Logo + Logo hover */
#logo a {margin-bottom: 20px ; margin-left: 25px ; width: 110px ; background: url(images/logo.png) no-repeat ; background-position: bottom ; height: 22px ; display: block ; }

/* 2.2 Content Bounding Box */
#slider {width: 962px ; height: 412px ; border: 1px solid #484848 ; margin: 0 auto ; background: url(images/bg.jpg) no-repeat ; position: relative ; }

/* 2.3 Content Panels */
.scroll { height: 412px; width: 962px ; clear: left ; overflow: hidden;  position: relative;  }
.scrollContainer div.panel { padding: 0px; height: 412px; width: 962px ;   }

/* 2.4 Individual Panel Styling */
/*services*/
.services-text {background: url(images/panel.png) no-repeat ; width: 473px ; height: 350px ; float: right ; margin-top: 35px ; margin-right: 35px ; }
.services-text p {margin-left: 30px ; width: 430px ; font-family: Myriad Web; }

/*about*/
.about-text {background: url(images/panel.png) no-repeat ; width: 473px ; height: 350px ; float: right ; margin-top: 35px ; margin-right: 35px ; }
.about-image {background: url(images/about.jpg) no-repeat ; width: 473px ; height: 350px ; float: right ;   }
.about-text p { color: #000 ; margin-left: 30px ; margin-top: 40px ; width: 280px ; font-family: Myriad Web; }

/*remote work*/
.remote-work-text {background: url(images/panel.png) no-repeat ; width: 473px ; height: 350px ; float: right ; margin-top: 35px ; margin-right: 35px ; }
.remote-work-text p {margin-left: 30px ; width: 430px ; font-family: Myriad Web; }
.remote-work-text  ol {margin-left: 30px ; width: 390px ; }

/*c4dtraining*/
.c4dtraining-text {background: url(images/panel.png) no-repeat ; width: 473px ; height: 350px ; float: right ; margin-top: 35px ; margin-right: 35px ; }
.c4dtraining-text p {margin-left: 30px ; width: 430px ; font-family: Myriad Web; }
.c4dtraining-text p a {color: #000 ;}
.c4dtraining-text a:hover {color: #FFF ;}

/*contact form*/
.contact-text {background: url(images/panel.png) no-repeat ; width: 473px ; height: 350px ; float: right ; margin-top: 35px ; margin-right: 35px ; }
.skype {position: absolute ; background: url(images/skype.png) no-repeat ; margin-left: 30px ; margin-top: 30px ; display: block ; width: 170px ; height: 44px ;  }
.envelope {position: absolute ; background: url(images/envelope.png) no-repeat ; display: block ; width: 110px ; height: 101px ; margin-left: 330px ; margin-top: 60px ;  }

/* =CONTACT-FORM
--------------------- */
.contact-form-guide {  margin-top: 28px ; margin-left: 20px ; width: 250px ; }
form{}
form p{clear:both; margin-bottom:0 ; text-indent:0px; }
label{ width:100px; margin-right: 15px ; color: #FFF ;  }
input, textarea{ margin-right: -10px ; float: right ; width:250px; border:1px solid #a8acad; padding:5px; background-color:#FFF;  margin-bottom: 5px ;  }
textarea{ height:90px; width: 300px !important; margin-right: -60px ; }
.btn{ margin-right: -60px ;  height: 24px; width:65px; background: url(images/send.png) no-repeat; border: none ; cursor: pointer ;   }	
.btn a:hover {text-decoration: underline ;}
#formstatus{ font-size:12px;  font-weight:bold; margin-top: -25px ; }
.formstatuserror{  color:#FF0000;  }
.formstatusok	{ color:#000; }

/* ////////////////////// */
/* 3. Menu */
/* ////////////////////// */

/* 3.1 Menu Structure + Link Styling */
#navigation {position: absolute;  padding: 0 ; margin-top: 415px ; font-weight: none ;}
#navigation ul {list-style: none ; padding: 0 ; margin: 0 ; }
#navigation ul  { width: 962px ; height: 35px ;  display: block ; }
#navigation ul li { margin-left: 20px ; margin-top: 15px ;  float: left ; display: block ; text-align: center ;  }
#navigation a:link, a:visited, a:active { color: #969696 ; text-decoration: none ;  font-size: 11pt ;  }
#navigation a:hover {color: #FFF ; }

/* ////////////////////// */
/* 4. Gallery */
/* ////////////////////// */

/* 4.1 Gallery Wrapper */
#gallery-wrap {width: 962px ; min-height: 300px ;  margin-top: 50px ;  }

/* 4.2 Gallery Header */
.gallery-header {font-size: 40px; font-weight: bold ; margin-left: 10px ; padding-top: 10px; }
.gallery-header-border {border-bottom: 1px solid #969696 ; margin-top: 10px ;  }

/* 4.3 Gallery Images */
.gallery-images { margin-left: 7px ; margin-top: 12px ;  width: 962px ; }
.gallery-images img { margin-left: 5px ; margin-top: 5px ;   }

/* 4.4 Gallery Images Lightbox Styling */
#lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100; text-align: center; line-height: 0;}
#lightbox img{ width: auto; height: auto;}
#lightbox a img{ border: none; }
#outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
#imageContainer{ padding: 10px; }
#loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10; }
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* Trick IE into showing hover */ display: block; }
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
#imageData{	padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
#imageData #caption{ font-weight: bold;	}
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
#imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
#overlay{ position: absolute; top: 0; left: 0; z-index: 90; width: 100%; height: 500px; background-color: #000; }

/* 4.5 Reel Lightbox Styling */
#lbOverlay {	position: absolute; left: 0; width: 100%; background-color: #000; cursor: pointer;}
#lbCenter, #lbBottomContainer { position: absolute; left: 50%; overflow: hidden; background-color: #FFF; text-align: center; padding: 5px 5px 0px ;}
.lbLoading {	background: #fff url(images/loading.gif) no-repeat center;}
#lbImage { border: 10px solid #FFF;}



/* ////////////////////// */
/* 5. Footer */
/* ////////////////////// */

/* 5.1 Name Placement */
.name {float: right; margin-right: 35px ; margin-top: 30px ;}

/* 5.2 Footer Info */
#footer { clear: both ; width: 151px ; text-align: center ; height: 40px ; margin-left: 406px ; margin-top: 65px ; padding-bottom: 100px ; }
#footer a {color: #FFF ; text-decoration: none ;}
#footer a:hover {color: #969696 ; }