/* STYLE INFORMATION
--------------------------------------------
NAME: Carolyn J. Lewis website design
DESIGNER: Reese Spykerman, designbyreese.com
MODIFIED: June 1, 2010
COPYRIGHT: All content copyright Carolyn J. Lewis
           Layout and design copyright Reese Spykerman

/* COLORS
--------------------------------------------
192e63 navy blue
328fa8 dark teal
ad9a76 dark gold 
787878 gray body 
*/
html {
background: #e9eeef url(/images/container.gif) repeat-y top center;
}

body {
font-family: helvetica, arial, sans-serif;
font-size: 12px;
color: #787878;
margin: 0;
padding: 0;
}

a {color: #328fa8;}
a:hover {color: #192e63;}

img.img-left {
float: left;
padding: 6px;
margin: 0 15px 6px 0;
background: #E9EEEF;
}

/* GENERAL LAYOUT AND STYLE
-------------------------------------------- */
#container {
width: 1002px;
margin: 0 auto;
min-height: 100%;
position: relative;
}


#header {
width: 978px;
height: 130px;
background: url(/images/header.gif) no-repeat top left;
float: left;
margin: 0 auto;
position: relative;
left: 12px;
}

#header img#logo {
position: absolute;
left: 300px;
}

#primary-content {
float: left;
padding-left: 72px;
width: 874px;
padding-top: 21px;
}

#photos {
float: right;
}

#photos img {
background: url(/images/photoblur.gif) no-repeat bottom center;
padding-bottom: 14px;
}

#home-page #secondary-content {
float: left;
clear: both;
margin-left: 62px;
}

#footer {
clear: both;
float: left;
width: 882px;
margin-left: 62px;
border-top: 1px solid #e7e3da;
padding-top: 20px;
padding-bottom: 20px;
color: #e7e3da;
}




/* HEADERS
-------------------------------------------- */
h1, h2, h3, h4, h5, h6 {margin: 0; padding; 0; font-weight: normal;}
#home-page #header h1 {
text-indent: -9999px;
font-size: 1px;
height: 1px;
}

h1 {
font-size: 21px;
color: #ad9a76;
}

h2 {
font-size: 15px;
text-transform: uppercase;
color: #192e63;
letter-spacing: .3em;
font-family: 'helvetica narrow', helvetica;
}

h2 a {
text-decoration: none;
}


/* home page specific */
#home-page #primary-content p {
width: 380px;
float: left;
text-align: center;
font-family: georgia, 'times new roman', serif;
font-size: 13px;
line-height: 21px;
background: url(/images/c.gif) no-repeat top left;
padding-top: 20px;
padding-left: 20px;
}

#home-page #secondary-content {
margin-top: 21px;
padding-top: 27px;
width: 884px;
border-top: 1px solid #d3cab9;
padding-bottom: 20px;
}

#home-page .latest-story {
float: left;
width: 360px;
padding-right: 125px;
background: url(/images/lighthouse.gif) no-repeat top right;
}

#home-page .hire {
float: right;
width: 360px;
}

#home-page .works-omp {
clear: both;
float: left;
padding-top: 30px;
border-top: 1px solid #fff;
margin-top: 30px;
}

#home-page #secondary-content p {
font-size: 12px;
line-height: 24px;
margin: 0;
padding: 0 0 21px 0;
}

#home-page a.link-more {
text-transform: uppercase;
font-size: 11px;
display: block;
font-family: helvetica, arial, sans-serif;
margin-top: -18px;
}

/* about and stories */

#about-page #primary-content {
width: 380px;
float: left;
font-family: georgia, 'times new roman', serif;
font-size: 13px;
line-height: 21px;
padding-top: 20px;
padding-left: 72px;
}

#about-page #primary-content img {
margin-top: 18px;
}

#stories-page #primary-content {
width: 380px;
float: left;
font-family: georgia, 'times new roman', serif;
font-size: 13px;
line-height: 21px;
padding-top: 20px;
padding-left: 72px;
}

#stories-page.inside #primary-content {
width: 580px;
}


#about-page #secondary-content {
float: right;
width: 432px;
padding-top: 20px;
padding-right: 72px;
}

#stories-page #secondary-content {
float: right;
width: 432px;
padding-top: 20px;
padding-right: 72px;
}


#stories-page.inside #secondary-content {
width: 236px;
padding-right: 72px;
}

#about-page, #stories-page #photos {
float: none;
}

#about-page input {
margin: 0;
width: 215px;
padding: 5px;
height: 15px;
border: none;
font-size: 14px;
background-color: #E9EEEF;
font-family: helvetica, arial, sans-serif;
}

#about-page input:focus {
background-color: #e7e3da;
}

#about-page form p {
margin: 0;
padding: 0 0 18px 0;
}

#about-page textarea {
margin: 0;
width: 432px;
padding: 5px;
height: 100px;
border: none;
font-size: 14px;
font-family: helvetica, arial, sans-serif;
background-color: #E9EEEF;
}

#about-page textarea:focus  {
background-color: #e7e3da;
}

#about-page .contact-submit input {
background-color: #192e63;
padding: 6px;
width: 60px;
text-align: center;
color: #fff;
text-transform: uppercase;
font-family: helvetica, arial, sans-serif;
font-size: 14px;
}

/* stories specific */
#stories-page ul#list-stories {
list-style: none;
margin: 0;
padding: 0;
float: left;
}

#stories-page.main h1 {
padding: 0 0 21px 0;
}


#stories-page ul#list-stories li {
float: left;
width: 100%;
margin: 0 0 27px 0;
padding: 0 0 27px 0;
border-bottom: 1px solid #e7e3da;
}

#stories-page.main .stories-blurb {
float: left;
width: 100%;
}

#stories-page.main h2 {
letter-spacing: 0;
text-transform: none;
font-family: georgia, 'times new roman', serif;
font-size: 18px;
padding-bottom: 18px;
}
#stories-page.main .stories-blurb .stories-prizes {
float: left;
width: 150px;
padding: 12px;
background: #e9eeef;
margin-right: 12px;
}

#stories-page.inside ul#list-stories li {
border: 0;
}

#stories-page ul#list-stories div.stories-blurb p{
margin: 0;
padding: 0 0 0 0;
text-indent: 24px;
}

#stories-page ul#list-stories div.stories-blurb div.stories-prizes p {
text-indent: 0;
}

#stories-page ul#list-stories div.stories-prizes{
font-family: helvetica, arial, sans-serif;
clear: left;
}

#stories-page ul#list-stories div.stories-prizes p{
margin: 0;
padding: 0;
}

#stories-page a.link-more {
text-transform: uppercase;
font-size: 11px;
line-height: 15px;
padding-top: 6px;
display: block;
font-family: helvetica, arial, sans-serif;

}

#stories-page.inside #primary-content p {
margin: 0;
line-height: 24px;
padding: 0 0 0 -24px;
text-indent: 24px;
}

#stories-page.inside #primary-content {
padding-bottom: 27px;
}

#stories-page.inside .story-information {
padding-bottom: 27px;
}

#stories-page.inside ul#list-stories li {
padding: 0 0 12px 0;
float: none;
width: 100%;
margin: 0;
}



/* footer styling */
#footer p {
margin: 0;
padding: 0;
font-size: 10px;
letter-spacing: 1px;
}

#footer a {
text-decoration: none;
color: #e7e3da;
}

#footer a:hover {
color: #797979;
}

/* NAVIGATION
-------------------------------------------- */

/* - - - NAVIGATION  - - - */
ul#menu {
position: absolute;
top: 97px;
left: 180px;
height:21px;
width:640px;
margin:0;
padding:0;
border:0;
list-style: none;
background: url(/images/nav.gif) no-repeat top left;
}

ul#menu li {
padding:0;
margin:0;
display:block;
float:left;
text-indent:-9999px;
color: #000;
}

ul#menu li a {
border:0;
display:block;
text-decoration:none;
outline: none;
background: url(/images/nav.gif) no-repeat top left;
}

li#home a{
width:115px;
height: 21px;
padding: 0;
margin: 0;
}

li#about a{
width:225px;
height: 21px;
padding: 0;
margin: 0;
}

li#stories a{
width:166px;
height: 21px;
padding: 0;
margin: 0;
}

li#contact a {
width:134px;
height: 21px;
padding: 0;
margin: 0;
}


li#home a:hover {
background-position: 0px -21px;
}

li#home.active-nav a {
background-position: 0px -21px;
}

li#about a:link, li#about a:visited {
background-position: -115px 0px;
}

li#about a:hover {
background-position: -115px -21px;
}

li#about.active-nav a {
background-position: -115px -21px;
}

li#stories a:link, li#stories a:visited {
background-position: -340px 0px;
}

li#stories a:hover {
background-position: -340px -21px;
}

li#stories.active-nav a {
background-position: -340px -21px;
}

li#contact a:link, li#contact a:visited {
background-position: -506px 0px;
}

li#contact a:hover {
background-position: -506px -21px;
}

li#contact.active-nav a {
background-position: -506px -21px;
}