/* ----------------------------------------------------
Screen Stylesheet for http://www..com

Updated: 12/24/2013
Author: Eric Watson
Website: http://www.websitecodetutorials
------------------------------------------------------- 
: Site Colors : 

: Site Images : 
#left column images: 150px x 150px - canvas size 156px x 156px - color #666 - rotate 12 degrees

: Table Of Contents :
Resets
Defaults
Typography
Layout
Links
Menus
Content
---------------------------------------------------- */

/* -------------------- Resets --------------------- */
body, div, ul, li, p, h1, h2, h3 {
margin:0;
padding:0;
}
img {
border:0;
vertical-align:bottom;
}
/* --------------- Document Defaults -------------- */
html {
height:100%;
overflow-y:scroll; /* creates horizontal scrollbar */
}
body {
height:100%;
font:62.5%/1.5 Arial, Helvetica, sans-serif;
background:#000;
color:#000;
}
/* ------------------ Typography ------------------- */
p {
font-size:1.2em;
margin:0 0 1em;
}
h1 {
font-size:2em;
margin:0 0 1em;
}
h2 {
font-size:1.2em;
margin:0;
}
h3 {
font-size:1.2em;
margin:0;
}
/* ------------------- Classes --------------------- */
.rounded {
border-radius:6px;
}
/* -------------------- Layout --------------------- */
#wrapper {
margin:0 auto;
min-height:100%;
width:850px;
border-right:1px solid #333;
border-left:1px solid #333;
background:#1F1F1F url(images/bg.jpg);
position:relative;
overflow:hidden; /* prevents FX3 redraw bug on #divide */
}
#divide {
position:absolute;
bottom:0;left:0;
width:250px;
height:100%;
border-right:1px solid #333;
background:#111;
}
#content {
float:right;
background:#666;
display:inline;
}
#left { 
width:186px;
padding:0 32px;
position:relative;
z-index:1;
float:left;
}
/* --- #footer --- */
#clearfooter {
height:50px;
clear:both;
}
#footer {
margin:-50px auto 0 auto;
width:850px;
height:50px;
position:relative;
}
#footer #design {
float:right;
margin:25px 75px 0 0;
font-size:1em;
display:inline;
}
#footer div { /* holds flash equalizer */
float:left;
display:inline;
margin:0 0 0 75px;
}
#footer object {
outline:0;
height:18px;
width:100px;
margin:19px 0 0;
}
#footer #alt {
margin:25px 0 0 -48px;
font-size:1em;
}
/* ------------------- Links ---------------------- */
a {
text-decoration:none;
color:#000;
outline:0;
}
#footer a {
color:#6C9;
}
a.underline:link, a.underline:visited {
text-decoration:underline;
}
a.underline:active, a.underline:focus, a.underline:hover {
text-decoration:none;
} 
/* --------------------- Menus ---------------------- */
/* Main Menu */
#nav {
float:right;
width:600px;
text-align:center;
margin:20px 0;
font-size:1.4em;
list-style:none;
font-weight:bold;
}
#nav li {
display:inline;
}
#nav li a {
color:#555;
margin:0 30px;
border-left:3px solid #555;
padding:3px 0 0 8px;
}
#nav li a:active, #nav li a:focus, #nav li a:hover {
border-left:3px solid #6C9;
}
#portfolio a#porfolionav, #contact a#contactnav, #howto a#howtonav {
border-left:3px solid #6C9;
}
/* ----------------- Content/Pages ----------------- */
/* ------- Contact ------ */
#contact #content {
width:200px;
margin:150px 200px 0 200px;
text-align:center;
}
#contact #content p { 
font-size:1.3em;
margin:1.1em 0 2em 0;
font-weight:bold;
line-height:1.6;
}
#contact #left .firstimage {
margin:60px 0;
}
#contact #clearfooter {
height:70px;
}
#contact h1 {
font-size:1.2em;
margin:0;
}
/* -------- How To ------ */
#howto #left .firstimage {
margin:60px 0 0;
}
#howto #left img {
margin:144px 0 0;
}
#howto #content {
width:550px;
margin:40px 25px;
}
#howto h1 {
font-size:1.7em;
margin-top:10px;
text-align:center;
}
#howto #content p, #howto #content h1, #howto #content h2, #howto #content h3 {
padding:0 25px;
}
/* -------- Index ------- */
#ew {
float:left;
position:relative;
margin:200px 0 0;
height:150px;
width:100%;
z-index:1;
background:#1b1b1b url(images/eyes2.jpg) top right no-repeat;
}
#ew a {
display:block;
height:150px;
color:#1b1b1b;
cursor:pointer;
}
#ew a:focus, #ew a:hover, #ew a:active {
color:#6C9;
}
#ew span {
position:absolute;
top:55px;
left:330px;
font-weight:normal;
}
#description {
position:absolute;
left:-999em;
}
#ew img {
float:right;
}
#ew:focus img, #ew:hover img, #ew:active img {
display:none;
}
#index #divide {
background:none;
}
/* ------- Porfolio ------- */
/* Thumbnail Nav */
#panels #portfolionav {
position:absolute;
top:571px;
left:39px;
height:auto;
}
#panels li {
list-style:none;
display:inline;
font-weight:bold;
font-size:1.3em;
color:#444;
float:left;
cursor:pointer;
}
#panels li a {
color:#444;
float:left;
padding:3px 4px 3px 5px;
}
#panels li a:active, #panels li a:focus, #panels li a:hover {
color:#6C9;
}
#panels li a.highlite {
color:#6C9;
}
.first {
padding:3px 4px 3px 5px;
}
/* End Thumbnail Nav */
#divide2 { /* loads before thumbnail images for better look */
position:absolute;
top:0;left:0;
width:250px;
height:100%;
border-right:1px solid #333;
background:#111;
}
#portfolio #clearfooter {
height:146px;
}
#panels {
width:230px;
position:relative;
padding:72px 0 0 10px;
z-index:1;
}
#panels li img {
float:left;
padding:2px;
background:#666;
border:8px solid #111;
border-width:12px 8px 8px 9px;
}
#panels li img:hover {
padding:3px;
background:#777;
border:7px solid #111;
border-width:11px 7px 7px 8px;
}
#panels li span {
z-index:1;
position:absolute;
top:80px;
left:375px;
visibility:hidden;
}
#panels li span img {
float:none;
padding:0 !important;
border:2px solid #666 !important;
background:none !important;
color:#1F1F1F;
cursor:auto;
}
#panels li:hover span, #panels li .visible  {
visibility:visible;
}
#panels li span em {
color:#555;
text-align:center;
position:absolute;
bottom:-47px;
width:100%;
font-style:normal;
height:32px;
width:354px;
background:url(images/description-bg.jpg) -11px -8px;
}
/* ------- Resources ------ */
#resources #content {
width:550px;
margin:40px 25px;
}
#resources h1 {
font-size:1.7em;
margin-top:10px;
text-align:center;
}
#resources #content p, #resources #content h1, #resources #content h2 {
padding:0 25px;
}
.last {
margin:0 0 2em;
}
#resources #left .firstimage {
margin:60px 0 80px 0;
}