/*  Friendly Code Stylesheet  ** http://www.friendlycode.co.uk/  */
html { overflow-y:scroll}
html, body{font-family:'Calibri','Myriad Pro','Helvetica Neue',Arial,Helvetica,sans-serif;font-size: 16px;border: 0;color: #cccccc;}
body {background: #111; margin:0 auto; text-align:center}
body, img, p, h1, h2, h3, h4, h5, ul, ol, li, form, blockquote {margin: 0;padding: 0;}
p {	line-height: 18px;}
p, h1, h2, h3, h4, h5, ul, ol, blockquote p {padding: 10px 0;}
ul, ol {list-style: none;}
ul li {list-style:circle; margin-left:20px}

h1, h2, h3{font-size:30px; display:block; font-weight:bold; color:#eee; text-transform:lowercase}
h1,h2{background:transparent url(../images/smiley.gif) no-repeat scroll right 12px; padding-right:25px; display:table}
h3{font-size:20px; color:#FCDE00}

body div{position:relative}

#headerWrapper{background:url(../images/bg.jpg) repeat-x; height:299px; width:100%; border-bottom:4px solid #FCDE00}
#contentWrapper{width:100%; background:#333; padding-bottom:20px}
#footerWrapper{border-top:3px solid #000000; width:100%;}

#contentWrapper strong{font-weight:bold}
#contentWrapper a{color:#ccc; padding:1px 2px}
#contentWrapper a:hover{background:#FCDE00; color:#111}

#logo{display:block; width:401px; height:69px; position:absolute; top:40px; left:0; z-index:10}
#myPic{width:284px; height:299px; position:absolute; top:0; left:430px; display:none}

#menu{background:url(../images/menu_bg.png) repeat-x; float:right; line-height:26px; min-height:297px; width:255px; text-transform:lowercase; overflow:hidden}
#menu li { height:35px; width:255px;  font-size:28px; font-weight:bold; position:relative; float:right;}
#menu li a{color:#CCC; width:255px; letter-spacing:-1px; padding:7px 10px 0 10px; text-decoration:none; position:absolute; left:0; z-index:5}
#menu li:hover{background-color: #333;}
#menu li .active{color:#333}
#menu li a:hover{color:#FCDE00;}
#menu .active{background-color: #FCDE00; left:10;}
#menu .active:hover{background-color: #FCDE00!important; color:#333!important}

#home p, #home h1, #home h2{display:inline; font-size:35px; line-height:50px; background:none}
#home .hello{font-size:60px; display:block; font-weight:bold; color:#FCDE00}
#home strong{color:#EEE}

#footerWrapper {line-height:25px}
#footerWrapper h3{font-size:30px; color:#FCDE00; margin-bottom:10px; text-transform:lowercase}
#footerWrapper .quote{font-size:18px; color:#EEE; font-weight:bold; margin-bottom:15px}
#footerWrapper .quote p{display:inline; padding-left:30px; background:url(../images/quoteLeft.gif) no-repeat scroll 0 6px}
#footerWrapper .quote span{background:url(../images/quoteRight.gif) no-repeat scroll 2px 0; color:#FCDE00; display:inline; padding-left:35px}
#footerWrapper #copyright{font-size:11px; margin:0; padding:10px 0 0; text-align:right}
#footerWrapper #copyright a{color:#cccccc; text-decoration:none}
#footerWrapper #copyright a:hover{color:#FCDE00; text-decoration:underline}

#contactContainer{float:left; width:350px}

#links a{color:#eee; font-weight:bold}

/** FORMS **/
#contactForm{float:right; width:522px}
form label{clear:left; float:left; width:150px; margin-bottom:5px}
input, textarea {padding:10px; background: #494949; border:1px dashed #111; float:left; width:350px; color:#FCDE00; margin-bottom:5px}
textarea{height:100px; font-family:'Calibri','Myriad Pro','Helvetica Neue',Arial,Helvetica,sans-serif; font-size:16px}
.submit, .upload{width:370px}
.submit:hover{background:#FCDE00; color:#494949; cursor:pointer}
.error{background:#FCD6D6 none repeat scroll 0 0;color:red;float:left;padding:10px;width:350px;}
.success{background: #C5EFAB none repeat scroll 0 0;color:green;float:left;padding:10px;width:350px;}
.formInfo{margin-left:150px; margin-bottom:5px}
.formError{background:#FCD6D6 none repeat scroll 0 0; color:red; padding:10px; display:none; margin-bottom:10px}
.formSuccess{background: #C5EFAB none repeat scroll 0 0; color:green; padding:10px; display:none; margin-bottom:10px}

/** CLASSES **/
.container{width:960px; position:relative; margin:0 auto; text-align:left; padding:15px 0;}
.clear{clear:both}
.noPad{padding:0!important}
.noMar{margin:0!important}
.smiley{background:url(../images/smiley.gif) no-repeat; display:inline-block; height:29px; width:18px; position:relative; top:5px; left:7px}
.bigButton{color:#FCDE00; padding:5px; text-decoration:underline; background:#1B1B1B; font-size:25px; float:right; position:relative; top:5px}
.bigButton:hover{background:#FCDE00; color:#1B1B1B; text-decoration:none}
.right {float: right; margin-left:30px; border:3px solid #FEDB00}



/** Portfolio Animation**/
.boxgrid{ width: 300px; height: 250px; margin-right:24px; margin-bottom:24px; float:left; background:#161613; border: solid 2px #FCDE00; overflow: hidden; position: relative; }
.boxgrid img{position: absolute;top: 0;left: 0;border: 0; }
.boxgrid p{ padding: 0 10px; color:#afafaf; font-weight:bold; font:10pt "Lucida Grande", Arial, sans-serif; }
.boxcaption{ float: left; position: absolute; background: #000; height: 100px; width: 100%; opacity: .8; /* For IE 5-7 */filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); /* For IE 8 */	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.captionfull .boxcaption {bottom: -100px;left: 0;}
.boxcaption h3{text-transform:lowercase; color:#FFFFFF; font-weight:bold; margin-left:10px;}