/* we.css - style sheet for webExplorations home page
   Written 10-02-11 Peter K. Johnson peterk@webExplorations.com
   Based on Responsive Web Design by Ethan Marcotte 
   http://www.abookapart.com/products/responsive-web-design

   Revised 10-02-11
*/

/* Layout of #page using 960px total width
Grid is 12 columns x 69px  = 828 pixels
        11 gutters x 12px  = 132 pixels

Font sizes are calculated using the formula:  target/context = relative em

COLUMNS
#nav = narrow column on left (230px base width)
#section = main content      (666px base width)
#nav + #section = 900px base measurement (Use this for relative calculations)

*/

body {
font:            normal 16px Helvetica, Arial, sans-serif;
/* add background image                                     position y position x */
background:  url(graphic/cornfieldSkyComposite400.jpg) no-repeat fixed 5px 10px; 	
} 

img,
embed,
object,
video {
max-width:       100%;                         /* resize to container holding object */
}

h1, h2, h3, h4, h5, h6 {
font-weight:     bolder;
color:           #000090;
/* font-family:     "Bookman Old Style", Calibri, serif; */
padding:         0px 5px 0px 15px;
margin:          0px;
}

h1 {
font-size:       1.625em;                      /* 26px/16px */
padding:         5px;
}

h2 {
font-size:       1.25em;                     /* 20px/16px */
}

h3 {
font-size:       1.125em;                     /* 18px/16px */
border-bottom:   1px solid #000000;
font-weight:     700;
margin:          0px 0px 0px 10px;
padding:         0px 0px 0px 0px;
}

p {
padding:         0px 5px 0px 15px;
line-height:     1.50em;
}

ul {
margin:          10px 0px 25px -15px;
}


li {
color:           #000000;                         
font-size:       1.125em;
font-weight:     100;
letter-spacing:  0.15em;
line-height:     1.25em;
list-style:      circle;                        
padding:         5px 5px 5px 0px;
}

header {
width:           100%;                             /* base measurement */
padding:         0px 00.5555555555556%;            /* 5px/900 x 100 for percentage */
margin:          0px 0px 30px 0px;
}


header a img {
float:           left;
max-width:       100%;                             /* images will fit in their container */
width:           023.3333333333333%;               /* 210/900px x 100 for percentage */
}

header h1 {
padding:          3.3333333333333% 1.1111111111111% 0px 35%; /* 30px 10px & 235px/900 x 100 for percentage */
}

header h2 {
padding:          0px 001.1111111111111% 0px 35%; /* 10/900 and 235/900 x 100 for percentage */
}

footer {
clear:           both;
padding:         0px 00.5555555555556%;            /* 5px/900 x 100 for percentage */
}

#page {
margin:            36px auto;
max-width:         960px;               /* Base measurement */
background-color:  white;
border:            #FFFFEE thin solid;
/* Set the opacity of the layer */
filter:            alpha(opacity=85);   /* IE 5.5 or higher */
-moz-opacity:      .85;                 /* Mozilla 1.5 or higher */
opacity:           .85;                 /* Mozilla 1.7 & FireFox */
top:               99px;
}

/* Main content area */
section {
float:           right;
width:           65%;                              
}

/* Navigation Area */
nav {
float:           left;
width:           .16666666666666666666;            /* 150/900px x 100 for percentage */
}

nav ul {
margin:          0px 0px 25px -25px;
}

nav li {
color:           #000090;                         /* dark blue */
font:            .75em Helvetica, Arial, sans-serif;/* 12px/16px */
letter-spacing:  0.15em;
line-height:     1.25em;
list-style:      none;                            /* remove bullets */
padding:         5px 5px 0px 0px;
margin:          1.25em 0px 0px 0px;
}

nav li a {
text-decoration: none;
}

nav li a:hover {
background-color:#E9E9FC;                          /* pale blue */
padding:         5px 5px 0px 0px;
margin:          1.25em 0px 0px 0px;
font-weight:     700;
}