/* General */
* { margin:0; outline:none; padding:0 }
body { background:#121212; color:#ffffff; font-family:Georgia, serif; font-size:14px }
h1, h2, h3, h4, h5, h6 { font-weight:normal }
a { color:#dc553e; text-decoration:none }
a:hover { text-decoration:underline }
a img { border:none }
.con { margin:0 auto; position:relative; width:940px }

/* Top Section */
#top { background:url(images/layout/name.png) no-repeat 50% 100% #f8f2ea; color:#121212; height:520px }
#top p#topnav { font-family:Arial, sans-serif; position:absolute; top:18px; right:100px }
#top p#topnav a { color:#121212 }#top h1 { color:#dc553e; line-height:33px; position:absolute; top:60px; width:300px }
#topContent { position:absolute; top:170px; left:290px }
#topContent h2 { font-size:25px; line-height:30px; width:440px }
#topContent h3 { font-size:20px; line-height:33px; width:440px }
#topContent p { line-height:24px; width:440px }

/* Main Section */
#mainContent { color:#f1f1f1 }
#who, #how, #what { position:relative }
#who { height:600px }
#how { height:740px }
#what { height:540px }
.quote { color:#9b9b9b; font-size:20px; font-style:italic; position:absolute; top:40px; width:300px }
.quote span { display:block; font-size:12px; margin-top:8px }
.info { position:absolute; top:130px; left:220px; width:490px }
.info h1 { border-bottom:1px solid #575653; font-size:40px; margin-bottom:14px; padding:14px 0; text-transform:uppercase }
.info p { line-height:24px; margin-bottom:24px; padding-left:70px }
.sidebar { position:absolute; top:170px; left:740px; width:200px }
.sidebar h2 { background:url(images/layout/sidebar.png) no-repeat; margin-top:36px; width:150px; height:30px }
.sidebar h2 span { display:none }
.sidebar p { color:#dc553e; font-style:italic; margin-bottom:16px }
.sidebar h2#contact { background-position:0 0 }
.sidebar h2#blogposts { background-position:0 -30px }
.sidebar h2#plan { background-position:0 -60px }
.sidebar h2#build { background-position:0 -90px }
.sidebar h2#launch { background-position:0 -120px }

/* Folio */
#folio { position:relative; top:360px; height:600px }
#folioWebsites { position:relative }
#folioWebsites h1 { background:url(images/layout/folioh1.png) no-repeat; margin-bottom:10px; width:940px; height:30px }
#folioIphone { position:relative }
#folioIphone h1 { background:url(images/layout/folioh1.png) no-repeat 0 -60px; margin-bottom:10px; width:940px; height:30px }
#folioPrint { position:relative }
#folioPrint h1 { background:url(images/layout/folioh1.png) no-repeat 0 -90px; margin-bottom:10px; width:940px; height:30px }
.folio h1 span { display:none }
.folio .prevPage { background:url(images/layout/arrows.png) no-repeat; cursor:pointer; display:block; position:absolute; top:40px; left:-50px; width:35px; height:200px }
.folio .nextPage { background:url(images/layout/arrows.png) no-repeat -35px 0; cursor:pointer; display:block; position:absolute; top:40px; right:-50px; width:35px; height:200px }
.folio .scrollable { overflow:hidden; position:relative; left:2px; margin-bottom:40px; width:936px; height:200px }
.folio .scrollable .items { position:absolute; width:20000em }
.folio .scrollable .items div.item { background:#000; cursor:pointer; float:left; margin:8px 12px; padding:8px 8px 20px 8px; width:194px; height:155px }
.folio .scrollable .items div.item span { color:#566569; display:block; font-family:Arial, sans-serif; font-size:10px }
.folio .scrollable .items div.item a:hover { text-decoration:none }
.popup { background:#111; border:1px solid #000; display:none; padding:10px }
.folio .disabled { display:none }

#preview { background:#000; border:1px solid #122025; display:none; margin:0; padding:8px; position:absolute; z-index:200 }

/* Colorbox */
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxLoadedContent iframe{display:block; width:100%; height:100%; border:0;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
#cboxOverlay{background:#333;}
#colorbox{}
#cboxContent{margin-top:20px;}
#cboxLoadedContent{background:#000; padding:5px;}
#cboxTitle{position:absolute; top:-20px; left:0; color:#ccc;}
#cboxCurrent{position:absolute; top:-20px; right:0px; color:#ccc;}
#cboxSlideshow{position:absolute; top:-20px; right:90px; color:#fff;}
#cboxPrevious{position:absolute; top:50%; left:5px; margin-top:-32px; background:url(images/layout/controls.png) top left no-repeat; width:28px; height:65px; text-indent:-9999px;}
#cboxPrevious.hover{background-position:bottom left;}
#cboxNext{position:absolute; top:50%; right:5px; margin-top:-32px; background:url(images/layout/controls.png) top right no-repeat; width:28px; height:65px; text-indent:-9999px;}
#cboxNext.hover{background-position:bottom right;}
#cboxLoadingOverlay{background:#000;}
#cboxLoadingGraphic{background:url(images/layout/loading.gif) center center no-repeat;}
#cboxClose{position:absolute; top:5px; right:5px; display:block; background:url(images/layout/controls.png) top center no-repeat; width:38px; height:19px; text-indent:-9999px;}
#cboxClose.hover{background-position:bottom center;}