/*COPYRIGHT WILL LEESON 2010*/
/*Personal Portfolio*/


/*overall text sizing to give something standard and relative*/
* {

font-size:small;

font-weight:lighter;

font-family:helvetica, arial, sans-serif;

padding:0;

margin:0;

}


p {

margin-bottom:1em;

}


br {

margin-bottom:1em;

}


/*make the white background fill window regardless of size*/
html, body {

text-align:center;

height:100%;

background-color:white;

}


/*DIVS AND GENERAL LAYOUT*/


#main {

margin:0 auto;

padding:50px 0 0 0;

width:960px;

min-height:600px;

background-color:#fff;

text-align: left;

position:relative;

}

#header {

width:960px;

background-color:#fff;

}

#logo {

width:160px;

height:88px;

background-color:#fff;

float:left;

}

#nav_bar {

width:800px;

background-color:#fff;

float:right;

border-width:0 0 1px 0;

border-style:solid;

border-color:#333;


}

.nav_box {

width:160px;

height:87px;

float:left;

position:relative;

}

#content {

width:960px;

background-color:#fff;

}

#left_column {

width:133px;

padding:25px 0 0 27px;

background-color:#fff;

float:left;

}

#right_column {

width:800px;

padding:25px 0 0 0;

background-color:#fff;

float:right;

}

.description {

width:800px;

margin:25px 0 25px 0;

border-width:1px 0 0 0;

border-style:solid;

border-color:#333;

}

#footer {

width:935px;

padding:0 0 0 25px;

background-color:#fff;

position:absolute;

bottom:0px;

}




/*STYLING AND LAYOUT DETAILS*/



/*STYLING TOP NAVIGATION*/
#nav_bar ul {

list-style-type:none;/*removes bullet points*/

}

#nav_bar ul li {

display:inline;/*puts in a line*/

}

#nav_bar ul li a {

text-decoration:none;

position:absolute;

bottom:-2px;

}

#nav_bar ul li a:link {

color:#333;

}

#nav_bar ul li a:visited {

color:#333;

}

#nav_bar ul li a:hover {

color:#666;

}

#nav_bar ul li a:active {

color:#333;

}






/*STYLING LEFT SIDE NAVIGATION*/

#left_column ul {

list-style-type:none;/*removes bullet points*/

}

#left_column ul li {


}

#left_column ul li a {


}

#left_column ul li a:link {

text-decoration:underline;


color:#333;

}

#left_column ul li a:visited {


text-decoration:underline;

color:#333;

}

#left_column ul li a:hover {
text-decoration:underline;

color:#999;

}

#left_column ul li a:active {
text-decoration:underline;

color:#333;

}





/*STYLING right SIDE NAVIGATION*/

#right_column ul {

list-style-type:none;/*removes bullet points*/

}

#right_column ul li {

}

#right_column ul li a {

text-decoration:underline;


}

#right_column ul li a:link {

color:#333;

}

#right_column ul li a:visited {

color:#333;

}

#right_column ul li a:hover {

color:#999;

}

#right_column ul li a:active {

color:#333;

}





#right_column p {

width:400px;


color:#333;

}

#right_column .description p {

width:800px;

color:#333;

}

#footer h1 {

color:#ccc;

font-size:smaller;

}


.description a {

}

.description a:link {

color:#333;

}

.description a:visited {

color:#333;

}

.description a:hover {

color:#999;

}

.description a:active {

color:#333;

}


/*1px border plus 10px margin on base*/
.border {

margin:0 0 10px 0;

border-width:1px;

border-style:solid;

border-color:#333;

}

/*MAKING "COMING SOON" UNDER PORTFOLIO LINKS SMALLER AND GRAY*/
strong {

font-size:smaller;

color:#000;

}

/*10px margin on bottom of first images*/
.margin {

margin:0 0 10px 0;

}



/*making link bylines pop up*/


/*i*/

.rollover li a {

text-decoration:none;

}


.rollover li a #i {

visibility:hidden;

display:block;

position:absolute;

left:7px;

top:0;

color:#666;

}


.rollover li a:hover #i, .rollover li a:active #i, .rollover li a:focus #i {

visibility:visible;

}


.rollover li a:hover, .rollover li a:focus {

text-decoration: none;

color:#FF6600;

visibility:visible; 

}


#i {

white-space: nowrap;

}



/*YOU*/

.rollover li a #you {

visibility:hidden;

display:block;

position:absolute;

/**adjust disjointed text position in % or px**/ 

left:25px;

top:0;

color:#666;

}


.rollover li a:hover #you, .rollover li a:active #you, .rollover li a:focus #you {

visibility:visible;

}


.rollover li a:hover, .rollover li a:focus {

text-decoration: none;

color:#FF6600;

visibility:visible; 

}


#you {

white-space: nowrap;

}


/*MY*/

.rollover li a #my {

visibility:hidden;

display:block;

position:absolute;

left:7px;

top:0;

color:#666;

}


.rollover li a #my {

visibility:hidden;

display:block;

position:absolute;

/**adjust disjointed text position in % or px**/ 

left:22px;

top:0;

color:#666;

}


.rollover li a:hover #my, .rollover li a:active #my, .rollover li a:focus #my {

visibility:visible;

}


.rollover li a:hover, .rollover li a:focus {

text-decoration: none;

color:#FF6600;

visibility:visible; 

}


#my {

white-space: nowrap;

}


/*DOT*/

.rollover li a #dot {

visibility:hidden;

display:block;

position:absolute;

left:7px;

top:0;

color:#666;

}


.rollover li a #dot {

visibility:hidden;

display:block;

position:absolute;

/**adjust disjointed text position in % or px**/ 

left:18px;

top:0;

color:#666;

}


.rollover li a:hover #dot, .rollover li a:active #dot, .rollover li a:focus #dot {

visibility:visible;

}


.rollover li a:hover, .rollover li a:focus {

text-decoration: none;

color:#FF6600;

visibility:visible; 

}


#dot {

white-space: nowrap;

}





/*HOVERBOX*/

.hoverbox {
	
cursor:default;

list-style:none;

}


.hoverbox a {

cursor:default;

}


.hoverbox a .preview {

display:none;

}


.hoverbox a:hover .preview {
	
display:block;
	
position:absolute;

top:-0;

left:0px;

z-index:100;

}


.hoverbox img {

border:none;
	
background:#fff;
	
color:inherit;
	
vertical-align:top;
	
width:160px;
	
height:88px;

}


.hoverbox li {
	
background:#eee;

color:inherit;
	
display:inline;
	
float:left;
	
margin:0 1px;

position:relative;

}


.hoverbox .preview {

border-width:0;

width:160px;

height:88px;

}