/* robert whyte - 2011 */
/* website v5.0 -- since 1999 */

html {font-size: 62.5%;}
body,td,th{font:700 1.4em/1.8em Arial, Helvetica, sans-serif;color:#424242}
body{margin:0;padding:0;background-color:#D2D2D2;;background-attachment:fixed;background-position:top center;background-repeat:no-repeat;background-size:cover;-moz-background-size:cover;-webkit-background-size:cover}
/* PAGE BACKGROUNDS*/
#bkgHome{background-image:url(../images/bkg/10_jimthorpe_bldg.jpg)}
#bkgAbout{background-image:url(../images/bkg/11_jimthorpe_robert-whyte.jpg)}
#bkgPortfolio{background-image:url(../images/bkg/03s_philly_building.jpg)}

header,nav,section,article,aside,figure,figcaption,footer {display:block;margin:0}

/* MEDIA QUESRIES */
@media only all and max-width 640px and max-height 426px {body{background-size:640px 426px;-moz-background-size:640px 426px;-webkit-background-size:640px 426px}}
@media only screen and orientation portrait and device-width 320px,device-width 768px {body{-webkit-background-size:auto 100%}}
@media only screen and orientation landscape and device-width 320px,device-width 768px {body{-webkit-background-size:100% auto}}

/* PAGE BACKGROUND IMAGE */
img#expando{display:none;position:absolute;z-index:1;-ms-interpolation-mode:bicubic}
.wide img#expando,.tall img#expando{display:block}
.wide img#expando{height:auto;width:100%}
.tall img#expando{height:100%;width:auto}

/* LINKS */
a{font:700 1.0em/1.5em Arial, Helvetica, sans-serif;color:#6F4A09}
a:link{text-decoration:none}
a:visited{text-decoration:none;color:#6F4A09}
a:hover{text-decoration:underline;color:#1CBEF0}
a:active{text-decoration:none;color:#F09}

/* FONT FACE */
@font-face{font-family:'ChunkFiveRegular';src:url('../fonts/Chunkfive-webfont.eot?iefix') format('eot'), url('../fonts/Chunkfive-webfont.woff') format('woff'), url('../fonts/Chunkfive-webfont.ttf') format('truetype'), url('../fonts/Chunkfive-webfont.svg#webfont90E2uSjN') format('svg');}

/* HEADER TAGS */
h1,h2,h3,h4,h5,h6{font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;font-weight:700;margin:0}
h1 {font:700 3.0em/1.1em 'ChunkFiveRegular', Arial, sans-serif; letter-spacing:3; color:#FFF;text-align:center;text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);margin:0}
h2{font:700 1.9em/2.0em Georgia, "Times New Roman", Times, serif;color:#E19811}
h3{font-size:1.3em;color:#535353;}
h4{font:italic 1.2em/1.5em Georgia, "Times New Roman", Times, serif;color:#676767}
h5{font:normal 1.2em/1.9em Georgia, "Times New Roman", Times, serif;color:#555}
/* GENERIC */
p {font:normal 1.0em/1.5em Arial, Helvetica, sans-serif; text-align:left;margin:0 0 1.8em 0}
img {border:none}

/* TOP GLOBAL BOX */
#globalBox {display:block;background-color:#444;padding:8px}
.globalBoxTxt {width:900px;margin:0 auto;font:900 1.0em/1.0em Georgia, "Times New Roman", Times, serif;text-align:right;color:#F2F2F2}
.globalBoxTxt a{font:900 0.9em/1.0em Georgia, "Times New Roman", Times, serif;text-align:right;padding:2px 5px;color:#F2F2F2}
.globalBoxTxt a:link{text-decoration:none}
.globalBoxTxt a:visited{text-decoration:none;color:#F2F2F2}
.globalBoxTxt a:hover{text-decoration:underline;color:#F2F2F2;background-color:#1CBEF0}
.globalBoxTxt a:active{text-decoration:none;color:#F09}

/* MAIN CONTAINER AND LOGO AREA */
#wrapper {width:970px;margin:15px auto 50px auto;}
header {margin:0;padding:50px 0 0 0;width:280px;height:230px;border-radius:140px;/*-moz-border-radius:140px;-webkit-border-radius:140px;*/background-color:#000;background-color:rgba(000,000,000,0.7);/*filter:alpha(opacity=70)*/}
header p {font:bold 1.0em/1.2em Arial, Helvetica, sans-serif; color:#FFF; text-align:center;margin:0}

/* NAVIGATION */
nav {margin:25px 0 0 0;padding:5px;background-color:#C4EEFB;border:3px solid #FFF;
-webkit-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-moz-box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;        
}
nav ul {list-style:none;margin:0;padding:0 0 0 10px;width:280px}
nav li {display:inline}
nav li a {width:80px;float:left;padding:5px 0;background:#C4EEFB;border-right:2px solid #FFF;font:900 1.2em/1.0em Georgia, "Times New Roman", Times, serif;color:#E19811;text-align:center;text-decoration:none}
nav li a:hover {background:#D72F1C;color:#F2F2F2;text-decoration:none}
#current  {background:#D72F1C;color:#F2F2F2}
.last {border-right:#C4EEFB}

/* RTW SOCIAL MEDIA LINKS SECTION */
aside {height:80px;margin:10px 0 0 0;padding:5px 0 0 0}
#taglineHome {width:600px;height:60px;background-image:url(../images/bkg_tagline_build_web.png);background-repeat:no-repeat;background-position:10px 5px}
#taglineAbout {width:600px;height:71px;background-image:url(../images/bkg_tagline_design_work.png);background-repeat:no-repeat;background-position:10px 5px}
#taglineWork {width:600px;height:70px;background-image:url(../images/bkg_tagline_design_business.png);background-repeat:no-repeat;background-position:10px 7px}
#socialMedia {width:265px;float:right;margin:0 28px 0 0;padding:12px 10px 10px 15px;background-color:#F0AF37;border:5px solid #FFF;height:36px}
.add img {margin:0 10px 0 0}

/* +++++++++++++ HOME -- MAIN CONTENT*/
section {}
#homeMain {margin:30px 0;height:435px;}
#col-1 {width:260px;float:left;padding:10px 20px 10px 20px;margin:0;background-color:#FFF;border-right:1px solid #999;height:400px;border-radius:8px 0 0 8px }
#col-2 {width:260px;float:left;margin:0 30px 0 0;padding:10px 25px 10px 25px;background-color:#FFF;height:400px;border-radius:0 8px 8px 0}
#gridHome {margin:8px 0;padding:6px 0 0 8px;border:2px solid #6F4A09}
#gridHome:hover {border:2px solid #1CBEF0}
#col-3 {width:280px;float:left;margin:0 0 0 0;padding:10px;background-color:#FFF;height:400px;position:relative;border-radius:8px}
#tweet {font:500 0.8em/1.0em Arial, Helvetica, sans-serif; color:#555}
#tweet ul {list-style-type: none;margin:10px 0 10px 0;padding:0 0 10px 0;border-bottom:1px solid #999}
#tweet ul li {padding:0 0 10px 0}
#tweet ul li a {font:500 1.0em/1.2em Arial, Helvetica, sans-serif;color:#000}
/*TEST */
.twtr-ft {display:none}
/*END TEST */
#addThis{margin:10px 0 0 0;padding:10px 0 0 30px;height:30px}
.like {margin:10px 100px 10px 100px}
#likeBoxHome {margin:10px 0 10px 33px}
.quote {border-top:1px solid #999;padding:10px 0 0 30px;font:italic 1.5em/1.1em Georgia, "Times New Roman", Times, serif;color:#676767}
.quote span {font:normal 0.8em/1.0em Georgia, "Times New Roman", Times, serif;color:#555}	

/* +++++++++++++ ABOUT PAGE */
#about {height:1350px;margin:30px 30px 20px 0;padding:20px;background-color:#FFF;background-color:rgba(255,255,255,0.9);filter:alpha(opacity=90);/*border-radius:8px*/}
#rtwColLeft {width:366px;float:left;margin:0 34px 0 0;padding:0}
#rtwColLeft img {border:8px solid #000}
#rtwColRight {width:500px;float:left;margin:0}
.teach a {font:700 0.9em/1.7em Arial, Helvetica, sans-serif;margin-left:30px }
figcaption {font:italic 700 1.2em/1.4em Georgia, "Times New Roman", Times;color:#333;text-align:center;padding:0.5em 0}
#signature {margin:0 0 0 40px}
.vCard {background: url(../images/vcard_01.gif) no-repeat ;margin:0 0 10px 0;padding:30px 0 0 105px;height:70px}
#art3d {margin:0;background:url(../images/you_tube.png) no-repeat 30px 5px;padding:10px 0 20px 20px;border-bottom:1px dotted #666}
#art2d {margin:0 0 20px 0;padding:0 0 0 20px;border-bottom:1px dotted #666}
.googleMap {width:450px;height:300px;margin:10px 0;border:3px dotted #F0AF37}
.thumbnail{position:relative;z-index:0;}
.thumbnail:hover{background-color:transparent;z-index:50;}
.thumbnail span{position:absolute;background-color:#F8F8F8;left:-10000px;border:3px solid #999;visibility:hidden;color:#333;text-decoration:none;padding:5px}
.thumbnail span img{border-width:0;padding:2px;}
.thumbnail:hover span{visibility:visible;top:-200px;left:20px;}

/* +++++++++++++ PORTFOLIO PAGE */
.portfolio {margin:0 0 20px 0;padding:0 20px 20px 20px}
.portfolio h2 {color:#222}
.portfolio h3 {color:#1a1a1a}
/* TOP ANIMATION */
#topAnim {margin:0 0 40px 0;padding:0 0 30px 0;border-bottom:1px dotted #FFF;background-image:url(../images/bkg_top_anim.png);background-repeat:no-repeat}
#topAnim h2{color:#222}
ul.slideshow{list-style:none;width:870px;height:250px;overflow:hidden;position:relative;margin:0 0 0 20px;padding:0}
ul.slideshow li{position:absolute;left:0;right:0}
ul.slideshow li.show{z-index:500}
ul img{border:none;padding-left:420px}
#slideshow-caption{width:350px;height:70px;position:absolute;bottom:0;left:0;color:#FFF;background:#000;z-index:500;border-radius:8px;-moz-border-radius:8px;-webkit-border-radius:8px}
#slideshow-caption .slideshow-caption-container{z-index:1000;padding:5px 10px}
#slideshow-caption h3{font-size:14px;margin:0;padding:0;color:#FFF}
#slideshow-caption p{margin:5px 0 0;padding:0;color:#FFF}

/* FEATURED CONTENT SECTION */
#workContent {height:550px;margin:0 0 100px 0;padding:20px 20px 20px 50px;background-color:#000;background-color:rgba(000,000,000,0.8);/*filter:alpha(opacity=80);*/}
#featureBox{position:relative;width:750px;height:500px;min-height:500px;margin:10px auto;background-color:#FFF;}
.slider-wrap{width:750px;position:absolute;top:10px;left:17px;}
.projectBox {/*width:680px;*/margin:0;padding:20px 30px 20px 10px;background-color:#FFF}
.projectBox img {border:1px solid #222}
.projBoxTxt {float:right;width:250px;padding:30px 0 0 20px}
.projBoxTxt h4 {font:800 1.2em/1.5em Georgia, "Times New Roman", Times, serif;color:#676767}
.projBoxTxt p {margin:10px 0;font:400 0.9em/1.7em Arial, Helvetica, sans-serif;color:#444}
.projBoxTxt a{font:700 1.0em/1.5em Arial, Helvetica, sans-serif;color:#6F4A09;}
.projBoxTxt a:link{text-decoration:underline;}
.projBoxTxt a:visited{text-decoration:none;color:#6F4A09;}
.projBoxTxt a:hover{text-decoration:underline;color:#1CBEF0;}
.projBoxTxt a:active{text-decoration:none;color:#F09}
/*.stripViewer .panelContainer .panel ul{text-align:left;margin:0 15px 0 30px;}*/
.stripViewer{position:relative;overflow:hidden;width:640px;height:350px;background-color:#FFF}
.stripViewer .panelContainer{position:relative;left:0;top:0;}
.stripViewer .panelContainer .panel{float:left;height:100%;position:relative;width:650px;height:300px;background-color:#FFF}
.stripNavL,.stripNavR,.stripNav{display:none;}
.nav-thumb{border:3px solid #F0AF37;margin-right:10px;}
#movers-row{margin:-75px 0 0 62px}
#movers-row div{width:90px;float:left;}
.cross-link{display:block;width:62px;margin-top:-14px;position:relative;padding-top:15px;z-index:9999;}
.active-thumb{background:transparent url(../images/up_arrow.png) top center no-repeat;}
.floatRight,#movers-row div a.cross-link{float:right;}
 
/* HOME PAGE EXTRA SECTION */
#extraBox {height:250px;margin:0 30px 20px 0;padding:20px;background-color:#EFEFED}
#extraCol-1 {width:240px;float:left;margin:0 30px 0 0;padding:10px}
#extraCol-2 {width:240px;float:left;margin:0 30px 0 0;padding:10px 20px;border-left:1px dashed #CCC}
#extraCol-3 {width:250px;float:left;margin:0 0 0 0;padding:10px 20px;border-left:1px dashed #CCC}
#extraCol-3 h4{margin:0}
.ftrHdr {font:800 1.3em/1.8em Georgia, "Times New Roman", Times, serif;color:#D72F1C}
.ftrLinks {float:left;margin:0}
#qrCode{margin:0 0;padding:5px 0;}
#qrCode img{margin:10px 0 0 30px;background-color:#000}

/* +++++++++++++++ BOTTOM SECTION LINKS */
.btmLinks{width:240px;}
.btmLinks ul{margin:10px 0 0 10px;padding:0 0 10px 0;list-style-type:none;font-family:Arial, Helvetica, sans-serif}
.btmLinks a{display:block;width:200px;padding:7px}
.btmLinks a:link {color:#333;text-decoration:none}
.btmLinks a:visited{color:#333;text-decoration:none}
.btmLinks a:hover{background-color:#D72F1C;color:#FFF}

/* ++++++++++++++ GLOBAL FOOTER */
footer {font:normal 0.8em/1.2em Arial, Helvetica, sans-serif;color:#FFF;text-align:right;padding:0.5em 2.0em;background-color:#000;background-color:rgba(000,000,000,0.8); filter:alpha(opacity=80);position:fixed; bottom:0;left:10%;width:80%;z-index:102;border-radius:15px 15px 0 0;-moz-border-radius:15px 15px 0 0;-webkit-border-radius:15px 15px 0 0}
.copyright {font:500 1.2em/2.1em Georgia, "Times New Roman", Times, serif;color:#E8F9FD}
.likeBox {float:left;margin:0 30px;padding:0}

/* ++++++++++++++ CONTACT FORM */
#contactable #contactable_inner{background:#BDA418 url(../images/contact.png) no-repeat;width:102px;height:44px;color:#FFF;left:0;top:298px;margin:10px 0 0 -5px;overflow:hidden;position:absolute;text-indent:-100000px;cursor:pointer;z-index:100000}
#contactable #contactForm{background-color:#BDA418;border:2px solid #FFF;color:#FFF;width:394px;height:450px;left:0;top:200px;margin:-160px 0 0 -434px;overflow:hidden;padding-left:30px;position:fixed;z-index:99}
#contactable form#contactForm input,textarea{background:#FFF none repeat scroll 0 0;outline-style:none;outline-width:medium;width:325px;border:1px solid #dfdfdf;font-family:georgia;font-size:1em;margin-bottom:10px;padding:5px}
#contactable form#contactForm .submit{background:#666/*F5410F*/ none repeat scroll 0 0;outline-style:none;outline-width:medium;width:325px;border:3px solid #FFF;outline-color:0;font-size:1em;cursor:pointer;color:#FFF;text-transform:uppercase;font:700 1.1em/1.1em Arial, Helvetica, sans-serif;margin-top:10px;padding:5px;
border-radius:12px;-moz-border-radius:12px;-webkit-border-radius:12px}
#contactable form#contactForm p{width:325px;font:900 0.9em/1.2em Georgia, "Times New Roman", Times, serif}
#contactable #contactForm .red{color:#F82139}
#contactable #overlay{background-color:#666;display:none;height:100%;left:0;position:absolute;top:0;width:100%;z-index:0;margin:0;padding:0}
#contactable form#contactForm #loading{background:url(../images/ajax-loader.gif) no-repeat;width:55px;height:55px;display:none;margin:100px auto}
#contactable #callback{font-family:georgia;font-size:1.1em;color:#FFF;width:325px;display:none;margin:100px auto;}
#contactable .holder{padding-top:20px;margin:0 auto 0 20px}
#contactable form#contactForm .disclaimer,#contactable form#contactForm label{margin-left:20px}
#contactable .error,#contactable #name.error,#contactable #email.error,#contactable #comment.error{background-color:#555}

/*MISC -- LOL*/
.clearfloat {clear:both;height:0;font-size:1px;line-height:0}/*change to clear-fix ":after" */

.clearGroup:before, .clearGroup:after {content:""; display:table;}
.clearGroup:after {clear:both;}
.clearGroup {zoom:1;} /* ie6/7 hasLayout */

::selection {color:#FFF;background-color:#F82139;}
::-moz-selection {color:#FFF;background-color:#F82139;}