/*******************************
 RESET BROWSER DEFAULT MARGINS, PADDING and BORDERS
********************************/
html, body, div, h1, h2, h3, h4, h5, h6, p, a, img, ul, li {
margin:0;
padding:0;
border:0;
}
header, footer, section, nav, article {/* render html5 elements as block in unsupported browsers - add any other HTML5 elements you use*/
display: block;
}

/*********************
GENERAL LAYOUT
********************/
body{
background:#f4f5dd;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:.875em;
text-align:center;
}
#wrapper{
width:960px; 
margin:0 auto;
text-align:left;
}
#content{
margin:10px 0;
padding:30px 10px;
color:#3e3e3e;
}
article{
margin:10px 0;
padding:20px 10px;
}

/**********************
BASIC TEXT & LINK STYLING
***********************/
/*text*/
p{
line-height:1.4em;
margin:10px;
}
/*headings*/
h2, h3, h4{
font-family:Georgia, "Times New Roman", Times, serif;
font-weight:normal;
}
h2{
color:#c13e3e;
margin:15px 0 10px -20px;
font-size:2em;
letter-spacing: -2px;
text-shadow: 2px 2px 4px #c7c7c7;
white-space:pre-wrap;
vertical-align:bottom;
}
h2 span.sub{
font-size:65%;
letter-spacing:-1px;
text-shadow:none;
color:#514242;
}
article h3{
font-size:1.3em;
letter-spacing:-1px;
color:#fff;
background:rgba(193, 62, 62, .95);
display:inline;
padding:5px;
margin:0 0 0 -20px;
-webkit-box-shadow: rgba(51, 51, 51, .75) 2px 2px 10px;
-moz-box-shadow: rgba(51, 51, 51, .75) 2px 2px 10px;
box-shadow: rgba(51, 51, 51, .75) 2px 2px 10px;
}
/*links*/
a:link{
color:#912626;
}
a:visited{
color:#6b3434;
}
a:active, a:hover, a:focus{
text-decoration:none;
}

/**************
IMAGE STYLING
***************/
article.images{
padding:30px 10px 10px 10px;
margin:20px 0;
}

/***********************
SECTION SPECIFIC STYLING
************************/
/****************** 
SKIP NAV 
so that people browsing without a mouse can avoid having to go through the navigation every time they visit a page
******************/
#access{
text-align:center;
padding:0 0 0 10px;
}
#access a{
position:absolute; 
left:-9999em; /*moves the links off the page and not visible they are in focus*/
width:200px; 
z-index:999; 
display:block;
}
#access a:focus{
left:0; /*moves the links back onto the page*/
top:0; 
font-size:90%;
color:#fff; 
background-color:#6a6a6a;
padding:10px; 
font-weight:bold; 
text-decoration:underline;
}
/*******************
HEADER
Site name or logo and social networking links
*******************/
header{
height:150px;
box-shadow:0 2px 5px #949494;
background:#c13e3e;
}
#masthead{/*contains site name (H1) and social networking links*/
width:960px; /*same width as the wrapper*/
margin:0 auto;
}
/** Site name **/
#masthead h1{
width:700px;
float:left;
text-align:left;
font-family:'Cuprum', Georgia, "Times New Roman", Times, serif;
text-transform:lowercase;
padding-top:65px;
font-size:3.6em;
letter-spacing:-1px;
font-weight:normal;
color:#f4f5dd;
text-shadow:0px 1px 1px #7e4343;
}
#masthead h1 span.color{
color:#e6e6cf;
font-size:.8em;
}
/** Social networking links**/
ul#topnav{
width:200px;
height:32px; /*height of the image used as the link*/
float:right;
list-style-type:none;
margin-top:10px;
}
#topnav li{
float:left;
position:relative;
padding:0 10px;
}
#topnav li.fb, #topnav li.fl, #topnav li.tw{
text-indent:-9999px; /*moves the text off the page so it can be replaced by an image*/
height:32px;
width:32px;
}
#topnav li.fb{
background:url(facebook.png) no-repeat;
}
#topnav li.fl{
background:url(flickr.png) no-repeat;
}
#topnav li.tw{
background:url(twitter.png) no-repeat;
}
#topnav li.fb:active, #topnav li.fb:hover{
background:url(facebook-active.png) no-repeat;
cursor:pointer; 
}
#topnav li.fl:active, #topnav li.fl:hover{
background:url(flickr-active.png) no-repeat;
cursor:pointer;
}
#topnav li.tw:active, #topnav li.tw:hover{
background:url(twitter-active.png) no-repeat;
cursor:pointer;
}
#topnav a:focus{
opacity:.6;
}
/****************
NAVIGATION 
****************/
nav{
font-size:1.7em;
text-align:center;
}
nav ul{
list-style: none;
margin:5px 0 0 0;
}
nav ul li{
display:inline;
margin:0 5px;
}
nav a{
text-decoration:none;
padding:15px 10px 10px 10px;
color:#9b4343;
text-transform: lowercase;
letter-spacing: -2px;
text-shadow: 2px 2px 4px #c7c7c7;
-webkit-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
}
nav a:active, nav a:hover, nav a:focus, nav a.now{
color:#eff0d7;
background:#c13e3e;
-webkit-box-shadow: rgba(184, 183, 183, .75) 0 2px 2px;
-moz-box-shadow: rgba(184, 183, 183, .75) 0 2px 2px;
box-shadow: rgba(184, 183, 183, .75) 0 2px 2px;
text-shadow: none;
}
/***** GALLERY ******/
article.images ul{
overflow: hidden;
padding:10px 0 0 0;
}
article.images ul li {
float: left;
padding:10px;
list-style-type:none;
font-family: 'Reenie Beanie', arial, serif;
font-size:1.2em;
margin-bottom:20px;
text-align:center;
}
/*create Polaroid effect*/
#content article.images a, #content article#more a{
color:#666;
}
article.images ul li a{
float: left;
width:200px;
text-decoration:none;
color:#666;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
padding: 5px 5px 10px 5px;
background: #fff; /*for non-supported browsers, use the 2nd colour in the gradient*/
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f4f2f2), to(#fff));
background: -moz-linear-gradient(top, #f4f2f2, #fff);
background: -o-linear-gradient(top, #f4f2f2, #fff);
background: -ms-linear-gradient(top, #f4f2f2, #fff);
background: linear-gradient(top, #f4f2f2, #fff);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(-1deg);
-moz-transform: rotate(-1deg);
-o-transform: rotate(-1deg);
-ms-transform: rotate(-1deg);
transform: rotate(-1deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
article.images ul li:nth-child(even) a { /*every other image will rotate the opposite way*/
-webkit-transform: rotate(1deg);
-moz-transform: rotate(1deg);
-o-transform: rotate(1deg);
-ms-transform: rotate(1deg);
transform: rotate(1deg);
}
/*make images move when hovered*/
article.images ul li a:hover,
article.images ul li a:focus {
-webkit-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
-o-box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
box-shadow: rgba(0, 0, 0, .5) 0 1px 3px;
position: relative;
-webkit-transform: scale(1.03) rotate(-0.5deg);
-moz-transform: scale(1.03) rotate(-0.5deg);
-o-transform: scale(1.03) rotate(-0.5deg);
-ms-transform: scale(1.03) rotate(-0.5deg);
transform: scale(1.03) rotate(-0.5deg);
}
article.images ul li:nth-child(even) a:hover,
article.images ul li:nth-child(even) a:focus {
-webkit-transform: scale(1.03) rotate(0.5deg);
-moz-transform: scale(1.03) rotate(0.5deg);
-o-transform: scale(1.03) rotate(0.5deg);
-ms-transform: scale(1.03) rotate(0.5deg);
transform: scale(1.03) rotate(0.5deg);
}
/*Place the link's title text under the image - not supported by IE7 or earlier*/ 
article.images ul a:after {
content: attr(title);
}
/*** LINKS TO MOE GALLERIES ***/
article#more ul{
list-style-type:none;
margin-top:20px;
text-align:center;
}
article#more ul li {
display:inline-block;
margin:15px;
list-style-type:none;
font-family: 'Reenie Beanie', arial, serif;
font-size:1.2em;
line-height:.5em;
text-align:center;
}
/*Polaroid effect on images*/
article#more ul li a{
float: left;
width:100px;
text-decoration:none;
color:#666666;
padding: 4px;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
background: -moz-linear-gradient(top, #fff, #eee);
background: -o-linear-gradient(top, #fff, #eee);
background: -ms-linear-gradient(top, #fff, #eee);
background: linear-gradient(top, #fff, #eee);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 6px;
}
article#more ul a:after { /*link title text is placed under the image*/
content: attr(title);
}
article#more img{
padding-bottom:5px;
}
article#more li a:hover{
position: relative;
top: -1px;
left:1px;
}

/*********************
FOOTER
*********************/
footer{
background:#c13e3e;
box-shadow:0 -2px 5px #949494;
padding:20px 0;
width:100%;
}
footer p{
margin:20px;
color:#f2e6e5;
line-height:1.2em;
font-size:.95em;
}
/*navigation in the footer*/
#footnav{
width:960px; /*set to same width as wrapper*/
margin:0 auto;
overflow:hidden;
}
#footnav ul{
list-style-type:none;
text-align:left;
padding:0 0 0 60px;
}
#footnav ul li{
float:left;
position:relative;
width:280px;
height:55px;
margin:20px 0;
white-space:nowrap;
font-size:.95em;
}
#footnav a{
text-decoration:none;
color:#fff;
padding:10px;
}
#footnav a:hover{
color:#d7d0c8;
}
/*Polaroid effect*/
#footnav img{
opacity:.9;
margin-bottom:-20px;
-webkit-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
-moz-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
-o-box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
box-shadow: rgba(0, 0, 0, .25) 0 1px 3px;
padding: 2px;
background: #fff;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#eee));
background: -moz-linear-gradient(top, #fff, #eee);
background: -o-linear-gradient(top, #fff, #eee);
background: linear-gradient(top, #fff, #eee);
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
-webkit-backface-visibility:hidden; /*prevent rotated text being jagged in Chrome and Safari*/
}
#footnav :nth-child(even) img{
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
#footnav a:hover img, #footnav a:focus img{
position: relative;
top: -1px;
-moz-transform: scale(1.05) rotate(2deg);
-o-transform: scale(1.05) rotate(2deg);
-webkit-transform: scale(1.05) rotate(2deg);
-ms-transform: scale(1.05) rotate(2deg);
transform: scale(1.05) rotate(2deg);
opacity:1;
}
#footnav :nth-child(even) a:hover img{
-moz-transform: scale(1.05) rotate(-2deg);
-o-transform: scale(1.05) rotate(-2deg);
-webkit-transform: scale(1.05) rotate(-2deg);
-ms-transform: scale(1.05) rotate(-2deg);
transform: scale(1.05) rotate(-2deg);
}

/***************
BASE
***************/
#base{
background:#f4f5dd;
padding:10px 0;
}
#base p{
color:#585858;
font-size:.75em;
line-height:1.3em;
}
#base a{
color:#614845;
}
#base a:active, #base a:hover, #base a:focus{
text-decoration:none;
}