@import url("yui-reset.css");
@import url("cv.css");
@import url("art.css");
@import url("lsf-layouts/lsf-nav-horz.css");

/**************************************************************************
* Reset some reasonable defaults and enable some special fixes and hacks. *
**************************************************************************/
/* some special fixes */
.clear{clear:both;height:0;overflow: hidden;} /* for special elements to clear everything */
.hide,.divider,#skip{display:none;} /* hide particular items */
html{height:100%;padding-bottom:1px;} /* forces scrollbars */


a{text-decoration:none;}

/* Let's reset some reasonable defaults */
strong{font-weight:bold;}
hr{height:0;overflow:hidden;border-width:0;border-top:1px solid #000;}
li{margin:0;padding:0;line-height:1.5em;}
ul li{list-style-type:disc;}
ol li{list-style-type: decimal;}

/**************************************************************************
* The typographic grid.                                                   *
**************************************************************************/
/* Onto the typographic grid! Perfectly weighted. */

body{
font-size:75%; /* should make font size 12px on most browsers.*/
line-height:1.5em; /* makes the line-height 18px (12*1.5=18) */
}

p,ul,ol{
margin:1.5em 0; /* makes the line-skip 18px, same as the line-height */
}

.caption{
display:block;
margin-top:.75em;
color:#666;
font-family:Georgia,Palatino,"Palatino Linotype",serif;
}

/* how these calculations work
* h#{
*  font-size:F/12px; | choose a font size, F!
*  line-height:L/F; | choose a line-height, L, that is a multople of 18!
*  margin:18/F 0; | this makes the margin above and below 18.
* }
*/

h1{
font-size:3em; /* 36px */
line-height:1.5em; /* 54px */
margin-top:.5em; /* 18px */
}

h2{
font-size:4em; /* 48px */
line-height:1.125em; /* 54px */
margin:.375em 0; /* 18px 0 */
}

h3{
font-size:3em; /* 36px */
line-height:1em; /* 36px */
margin:.5em 0; /* 18px 0 */
}

h4{
font-size:2em; /* 24px */
line-height:1.5em; /* 36px */
margin:.75em 0; /* 18px 0 */
}

h5{
font-size:1em;
margin:1.5em 0; /* 18px 0 */
}

h6{
font-size:.75em; /* 9px */
line-height:2em; /* 18px */
margin:2em 0; /* 18px 0 */
}

.button a{
display:block;
padding:1em;
text-align:center;
font-size:1.5em;
}

/**************************************************************************
* Typography, not grid-related.                                           *
***************************************************************************
* By default (i.e., unless you change it) the typography module uses      *
* serif headlines and sans-serif body text.                               *
**************************************************************************/
body{
font-family:"Lucida Sans",Tahoma,Verdana,Helvetica,sans-serif;
/* font-family:Georgia,Palatino,Times,serif; */
}

h1,h2,h3,h4,h5,h6{
font-family:"Gill Sans","Lucida Sans",Tahoma,sans-serif;
/* font-family:Helvetica,Arial,sans-serif; */
text-transform: uppercase;
letter-spacing:.1em;
}

blockquote{
font-style: italic;
}

.amp{ /* use the class, "amp" on display ampersands */
/* These fonts have nice ampersands. Email me if you have more to suggest. */
font-family:Palatino,"Palatino Linotype","Hoefler Text",Garamond;
font-style: italic;
}

.hung{ /* use the class, "hung" to hang punctuation, such as quotation marks, off the left margin. */
width:1em;
float:left;
margin-left:-1.1em;
text-align:right;
padding-right:.1em;
}

.caps,acronym{
font-size: .9166667em;
letter-spacing: .07em;
}

.amp,.caps,.acronym{
/* This fixes a Gecko issue, which would otherwise add extra pixels to the height of some elements containing the ampersand and caps */
line-height:0;
}

/* Leave the margin "0 1.875em" for standard lists. Change to "0" for sophisticated "hanging bullets." */
ul,ol{
margin-left: 1.875em;
margin-right: 1.875em;
}

#description{
font-size:.9em;
text-transform: uppercase;
letter-spacing:.1em;
line-height:1em;
}

/**************************************************************************
* Layouts/the horizontal grid                                             *
***************************************************************************
* By default, sets up a 2 column 600px layout. Only functions in          *
* conjunction with the HTML framework.                                    *
**************************************************************************/

#runrunrun{
    height:10.5em;
    margin-bottom:-10.5em;
    background-color:#710;
}

#all{
padding:0 3em; /* 36px padding on sides */ 
margin:0 auto; /* center in window */
width:60em;
position:relative;
}

#intro h1 img{
height:4em;
}

#description{
float:right;
margin-top:-2.5em;
}

/* this is a nifty trick that forces the margins of paragraphs, &c. not to extend outside the confines of the content. *
 * it's not very useful on single column layouts, but extremely handy for making multi-column layouts look right.      */
#content,#footer,#sidebar{
padding-top:1px;
margin-top:-1px;
}
/* for the footer, we want the same trick on the bottom. */
#footer{
padding-bottom:1px;
margin-bottom:-1px;
}

/* NAVIGATION */

#navigation li{
position:relative;
}
#navigation li ul{
position:absolute;
top:3em;
left:0;
}

/* FOOTER */
#footer p{
font-family:Georgia,Palatino,"Palatino Linotype",Times,serif;
margin: .75em 0;
}

#copyright{
margin-top:0 !important;
float:left;
}
#design{
text-align:right;
text-transform:uppercase;
letter-spacing:.1em;
font-size:.75em;
line-height:2em;
margin: 1em 0;
}

/* FRONT PAGE */
#cover{
width:100%;
margin-bottom:3em;
position:relative;
top:1.5em;
text-align:center;
}
#cover img{
border:.75em solid #FFF;
}

/**************************************************************************
* Shading and Lines                                                       *
***************************************************************************
* Useful color and rule stuff.                                            *
**************************************************************************/
body{
background:#F90;
}

a{
color:#F20;
}
a:visited{
color:#A60;
}
a:hover{
color:#830;
}

#intro{
color:#FFF;
background-color:#710;
margin:-1.5em -1.5em -3em -1.5em;
padding:1.5em 1.5em 3em 1.5em;
text-shadow:#400 1px 1px 0;
filter: Shadow(Color=#440000, 	
		Direction=135, 
		Strength=1);
}

#navigation{
border-top:1px solid #FFF;
position:relative;
top:-1px;
}

#navigation a,#navigation span{
color:#FFF;
}

#navigation .top,#navigation span{
text-shadow:#400 1px 1px 0;
}

#navigation li:hover .top{
background-color:#C10;
}

#navigation li ul{
height:0;
background-color:#C10;
overflow:hidden;
}

#navigation li:hover ul{
height:auto;
overflow:visible;
}	

#footer{
background-color: #fdf8d7;
border-bottom:1px solid #CA6;
border-right:1px solid #CA6;
margin:-1px -1px 3em 0;
padding-left:1.5em;
padding-right:1.5em;
color: #797556;
}
#design a{
color:#997;
border-bottom:1px dotted #997;
}
#design a:hover{
border-bottom-color:#441;
color:#663;
}

.image{
background-color:#FFF;
padding:.5em;
border-bottom:1px solid #CA0;
border-right:1px solid #CA0;
float:left;
margin-right:1.5em;
margin-top:0;
}

.button a{
background-color: #f2f2f2;
margin:-1px 0;
border:1px solid #CA0;
border-width:0 1px 1px 0;
clear:both;
font-family:Palatino,"Palatino Linotype",serif;
font-style: italic;
color:#C60;
}
.button a:hover{
background-color:#FEC;
color:#A40;
}

.white{
background-color:#FFF;
padding:1.5em;
margin:1.5em 0 1.5em 0;
border-bottom:1px solid #CA0;
border-right:1px solid #CA0;
}

/* ART */
.art #runrunrun,.art #intro{
	background-color:#222;
	color:#999;
	text-shadow:#000 1px 1px 1px;
}
.art{
background-color:#888;
color:#222;
}

.art #navigation li:hover .top{
background-color:#444;
}

.art #navigation li .top{
text-shadow:#000 1px 1px 1px;
}	

.art #footer{
background-color: #FFF;
border-bottom:1px solid #666;
border-right:1px solid #666;
margin:-1px -1px 3em 0;
padding-left:1.5em;
padding-right:1.5em;
color: #777;
}