/* stylesheet by Marla Erwin | 10sharpdesign.com | ©2009 */


/* ==========FIRST SECTION OF CSS IS FOR BASE TEMPLATE=========== */
/* base layout */

* { margin: 0; padding: 0; }
body { margin: 0; padding: 0; text-align: center;  }
div.container { width: 950px; margin: 0 auto; text-align: left; } /*this is a recurring element that sets the base width of the page */

div#header { overflow: auto;}
div#header img { padding: 20px 0; float: left; }
div#header div.container { position: relative; }
div#header div.container a#donate { display: block; width: auto; padding: 0 20px 6px; position: absolute; top: 0; right: 0; }

div#header div#nav { text-align: right; float: right;  margin-top: 55px;}
div#header div#nav ul { text-align: right; }
div#header div#nav ul { list-style-type: none; margin-left: 0; overflow: auto; }
div#header div#nav ul li { display: block; width: auto; margin: 0; padding: 1px 10px 3px; float: left; }

div#pagehead { padding: 10px 0; }
div#pagehead h1 { width: 950px; margin: 0 auto; text-align: left;  }

div#content div.container { padding: 0 0 10px; overflow: auto; }

div#primary { width: 600px; padding-top: 25px; float: left;}
div#secondary { width: 300px; padding-top: 25px; float: right; }

div.sidebar { padding-left: 10px;}

div#footer { padding: 20px 0; text-align:center; }

img.float-left { float: left; margin: .75em 15px .25em 0; }
img.float-right { float: right; margin: .75em 0 .25em 15px; }

.clear { clear: both; }


/* colors, borders and backgrounds */

body { background-color: #f8f6da; color: #7F4807; }

div#header { background-color: white; color: #b66600; border-top: 12px solid #630; }
	
div#header div.container a#donate { color: #fff; background-color: #630; }
div#header div#nav ul li { border-left: 1px solid #7F4807; }
div#header div#nav ul li#nav-home { border-left: none; }

div#content { background: url(images/bkgd-body.gif) left top repeat-x; }
	div#content div.container { background: url(images/bkgd-sidebar.png) 625px 40px repeat-y;}
	
div#secondary { background: url(images/bkgd-sidehead.gif) left top no-repeat; padding-left: 25px;  }
div#footer { border-top: 4px double #ddb; }

div#pagehead { background: #960 url(images/bkgd-header.jpg) left bottom repeat-x; }
div#pagehead h1 { color: #fff; }

a { color: #c60; }
a:visited { color: #960; }
a:hover { color: #7F4807;  }
a img { border: none;}

img.bordered { padding: 6px; background-color: #fff; border: 1px solid #ddb; }

/* typography */

body { font-size: medium; font-family:"Lucida Sans Unicode","Lucida Grande", Arial, Helvetica, sans-serif; }

div#header div.container a#donate { text-transform: uppercase; font-weight: bold; font-size: medium; text-decoration: none; }
div#header div#nav a { font-size: 90%;  }

div#content { font-size: 90%; line-height: 150%; }
div#footer { font-size: small; }

h1, h2, h3, h4 { font-family: Georgia, Palatino, Times, serif; font-weight: normal; }
h1 { font-size: 200%; color: #fff; padding: .5em 0; }
	body.home h1 { color: #7F4807;  }
h2, h3, h4, h5, h6 { padding: .5em 0; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }
h6 { font-size: 110%; }

ul, ol { padding: .5em 0; margin-left: 1em; }
p { padding: .5em 0; }

.callout { font-style: italic; text-align:center; line-height: 150%; padding: 0; margin-bottom: 10px; }


body.home li#nav-home a,
body.news li#nav-news a,
body.photos li#nav-photos a,
body.about li#nav-about a,
body.whycasaluz li#nav-whycasaluz a,
body.donate li#nav-donate a,
body.contact li#nav-contact a { font-weight: bold; text-decoration: none; color: #7F4807; }


/* ==========THIS SECTION OF CSS IS FOR SPECIFIC PAGE CONTENT=========== */

/* home page */
div#photostrip { height: 180px; padding-top: 20px; background: #960 url(images/bkgd-header.jpg) left bottom repeat-x; }
div#photostrip ul { list-style-type: none; margin-left: 0; overflow: auto; }
div#photostrip ul li { display: block; width: 174px; margin: 0; padding: 0 0 0 20px; float: left;  }
	div#photostrip ul li.first { padding-left: 0; }
div#photostrip ul li img { float: left; padding: 6px; background-color: white; border: 1px solid #7F4807; }

ul.featured { list-style-type: none; margin-left: 0; overflow: auto; }
ul.featured li { padding: 0 0 6px 0; overflow: auto; }

body.home ul.featured li { margin: 0; padding: 0 20px 15px 0; overflow: auto; }

ul.featured li img { float: left; padding: 4px; background-color: white; border: 1px solid #ddb; }
ul.featured li p { padding: 0 0 .5em; font-size: inherit; line-height: 150%; }

ul.featured li p a { font-weight: bold; }

ul.sponsors { list-style-type: none; margin-left: 0; overflow: auto; }
ul.sponsors li { padding: 0 0 6px 0; overflow: auto; }

ul.sponsors li img { float: left; padding: 4px; background-color: white; border: 1px solid #ddb; }
ul.sponsors li p { margin-left: 120px; padding: 0 0 .5em; font-size: small; line-height: 150%; }

ul.sponsors li p a { font-weight: bold; }

div.sidebar ul.missiontext li { margin-bottom: .5em; }

body.donate a#donate { display: none!important; }

body.thankyou div#content p { text-align: center; font-size: large; padding: 100px 0 100px; }

ul.bios { list-style-type: none; margin: 0; padding: 0; }
ul.bios li { border-bottom:1px solid #ddb; margin:10px 0; padding:6px 0 10px; overflow: auto; } 
ul.bios li img { border:1px solid #ddb; padding: 6px; background-color: white; float:left; margin:2px 0 15px; }
ul.bios li p { margin: 0; padding-top: 0;}




/* form styles */
body.contact form label { display: block; padding-top: 10px; }

body.contact form input.text { width: 350px; }
body.contact form textarea { width: 500px; }


form.donatelink p { text-align: center; padding: 10px 0 20px; }

input.text, textarea { 
	font-size:1.1em; 
	line-height:1.3em;
    border-top:1px solid #7c7c7c;
    border-left:1px solid #c3c3c3;
    border-right:1px solid #c3c3c3;
    border-bottom:1px solid #ddb;
    background:#fff url(images/textfield-bkgd.gif) repeat-x top;
    padding: 2px 1px;
    }

input.button {
	background:#fff url(images/bkgd-button.gif) repeat-x scroll center bottom;
	border-color:#ddb #c3c3c3 #c3c3c3 #ddb;
	border-style:double;
	border-width:3px;
	cursor:pointer;
	font-size:1.2em;
	padding: 4px 0;
	width:11em;
	color: #630;
	}
