html * {
margin: 0;
padding: 0;
}
body {
font: 78%/140% "Lucida Grande",Trebuchet MS, Verdana, Tahoma, sans-serif;
}
body#home {
background:#dfe0ca url(/public/img/home_bg.jpg) repeat-x;
}
/* Global
---------------------------------- */
img { border: none; }
a {
color: #6a3d31;
font-weight: bold;
}
a:hover {
color: #663b2f;
}
p.more a {
color: #315977;
font-size: .9em;
background: url(/public/img/blue_arrow_r.gif) 100% 50% no-repeat;
padding: 0 13px 0 0;
text-decoration: none;
}
/* Header
---------------------------------- */
#header {
width: 780px;
margin: 0 auto;
background: url(/public/img/header_bg.jpg) 0px 28px no-repeat;
height: 122px;
border-bottom: solid 1px #b1b1b1;
padding: 0px 10px 0 0;
}
#header h1 { line-height: 1em; }
#header h1 a {
padding: 28px 0 0 0;
width: 368px;
height: 51px;
background: url(/public/img/homeworks_logo.jpg) 66px 28px no-repeat;
text-decoration: none;
text-indent: -999em;
display: block;
float: left;
}
#header ul#topnav {
text-align: right;
margin: 0 0 0 368px;
list-style: none;
padding: 30px 0 0 0;
}
#header ul#topnav li {
display: inline;
padding: 0 0 0 10px;
}
#header ul#topnav li a {
color: #333300;
text-decoration: none;
font-size: .9em;
}
#header ul#topnav li a:hover { color: #663b2f; }
#header #mainnav {
height: 55px;
float:right;
text-align: right;
padding: 68px 0 0 0;
}
#header #mainnav ul {
list-style: none;
float: right;
}
#header #mainnav ul li {
float: left;
background: url(/public/img/mainnav_bg_left_lg.jpg) no-repeat;
height: 55px;
}
#header #mainnav ul li a {
display: block;
float: left;
height: 35px;
background: url(/public/img/mainnav_bg_right_lg.jpg) right top no-repeat;
color: #fff;
text-decoration: none;
padding: 20px 20px 0px 20px;
font-size: 1.2em;
}
#header #mainnav ul li:hover, #header #mainnav ul li.iehover { background-position: 0px -55px; }
#header #mainnav ul li a:hover { background-position: right -55px; }
/* Home Intro
---------------------------------- */
#homeintrowrapper {
background: #fff url(/public/img/shadow_border_tile.gif) repeat-y;
width: 790px;
margin: 0 auto;
height: 216px;
}
#homeintro {
background: url(/public/img/homeintro_bottom.gif) 0% 100% no-repeat;
}
#homeintrophoto {
float: left;
width: 468px;
}
#homeintrobody {
margin: 0 0 0 468px;
height: 176px;
background: url(/public/img/homeintrobody_bg.jpg) no-repeat;
padding: 20px;
}
/* Middle Buttons
---------------------------------- */
#middlebuttons {
background: #dfe0ca url(/public/img/middle_buttons_bg.jpg) repeat-x;
height: 98px;
}
#middlebuttons ul {
width: 600px;
padding: 0 120px;
margin: 0 auto;
list-style: none;
height: 94px;
}
#middlebuttons ul li {
float: left;
}
#middlebuttons ul li a {
display: block;
float: left;
height: 94px;
text-decoration: none;
text-indent: -999em;
}
#middlebuttons ul li#donate a {
background: url(/public/img/donate_button.jpg) no-repeat;
width: 160px;
}
#middlebuttons ul li#volunteer a {
background: url(/public/img/volunteer_button.jpg) no-repeat;
width: 205px;
}
#middlebuttons ul li#help a {
background: url(/public/img/help_button.jpg) no-repeat;
width: 222px;
}
/* Home Content Area
---------------------------------- */
#homecontentwrapper {
background: #fff;
}
#homecontent {
width: 775px;
margin: 0 auto;
padding: 12px 0 0 0;
}
#homecontent_col1 {
float: left;
width: 232px;
/* Bad IE6 */
margin: 0 -3px 0 0;
padding: 0 25px 6px 0;
}
#homecontent_col2 {
width: 518px;
/* Bad IE6 */
margin: 0 0 0 254px;
padding: 0 0 20px 0;
}
/* Good Values for Good Browsers */
html>body #homecontent_col1 { margin: 0; }
html>body #homecontent_col2 { margin: 0 0 0 257px; }
#homecontent_col1 h2#homenews_title {
background: url(/public/img/homenews_title.gif) no-repeat;
height: 22px;
text-indent: -999em;
padding: 0 0 8px 0;
margin: 0 0 8px 0;
border-bottom: solid 1px #e9ead3;
}
#homecontent_col1 ul#homenews {
list-style: none;
float: left;
}
#homecontent_col1 ul#homenews li {
padding: 0 0 14px 0;
}
#homecontent_col1 ul#homenews li h3 { font-size: 1.2em; }
#homecontent_col1 ul#homenews li h3 a {
color: #6a3d31;
text-decoration: none;
}
#homecontent_col2 #features_1 {
float: left;
}
#homecontent_col2 #features_1 #home_quotes {
width: 243px;
float: left;
margin: 0 -3px 0 0;
padding: 0 40px 0 0;
}
#homecontent_col2 #features_1 #home_quotes #motherteresa_quote {
font-size: .9em;
line-height: 1.3em;
}
#homecontent_col2 #features_1 #home_quotes #motherteresa_quote p { margin: 0 0 0 95px; }
#homecontent_col2 #features_1 #home_quotes #motherteresa_quote strong {
display: block;
color: #6a3d31;
}
#homecontent_col2 #features_1 #home_quotes #motherteresa_quote img {
float: left;
margin: 0 10px 10px 0;
}
#homecontent_col2 #features_1 #home_quotes #client_quote {
border-top: solid 1px #e9ead3;
padding: 10px 0 0 0;
margin: 10px 0 0 0;
clear: both;
background: url(/public/img/quote_bg.gif) 0px 10px no-repeat;
font: 1.1em/150% Georgia, "Times New Roman", Times, serif;
font-style: italic;
color: #333300;
float: left;
}
#homecontent_col2 #features_1 #home_quotes #client_quote p.name {
font: .9em/140% "Lucida Grande",Trebuchet MS, Verdana, Tahoma, sans-serif;
color: #6a3d31;
}
#homecontent_col2 #features_1 #home_quotes #client_quote p.name strong {
font-size: 1.2em;
display: block;
color: #999933;
padding: 4px 0 0 0;
}
#homecontent_col2 #features_1 #before_after {
width: 232px;
margin: 0 0 0 280px;
}
#homecontent_col2 #features_1 #before_after h2#homeexperience_title {
background: url(/public/img/homeexperience_title.gif) no-repeat;
height: 22px;
text-indent: -999em;
padding: 0 0 8px 0;
}
#homecontent_col2 #features_1 #before_after img {
margin: 0 0 10px 0;
}
html>body #homecontent_col2 #features_1 #home_quotes { margin: 0; }
html>body #homecontent_col2 #features_1 #before_after {
width: 235px;
margin: 0 0 0 283px;
}
#homecontent_col2 #helping_hands {
clear: both;
padding: 16px 0 20px 0;
}
#homecontent_col2 #helping_hands h2#homehelpinghands_title {
background: url(/public/img/homehelpinghands_title.gif) no-repeat;
height: 22px;
text-indent: -999em;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
border-bottom: solid 1px #e9ead3;
}
#homecontent_col2 #helping_hands h3 {
color: #6a3d31;
font-size: 1.3em;
padding: 0 0 6px 0;
}
#homecontent_col2 #helping_hands img {
float: right;
margin: 0 0 20px 10px;
}
/* Subnav
-------------------------------*/
ul#subnav, ul#subnav li ul {
list-style: none;
}
ul#subnav li {
display: block;
float: left;
}
/*
ul#subnav { border-top: solid 1px #6b87a1; }
ul#subnav li ul { border-top: solid 1px #DF6745; }
*/
ul#subnav li a {
display: block;
padding: 6px 0 6px 10px;
border-top: solid 1px #927668;
background: #73483f;
color: #fff;
text-decoration: none;
width: 200px;
}
ul#subnav li a:hover {
background: #835d52;
color: #fff;
}
ul#subnav li a.active {
color: #DF6745;
background:#EEEDEB;
}
ul#subnav li ul li a {
border: none;
padding: 6px 0 6px 24px;
font-size: .9em;
width: 185px;
font-weight: normal;
background:#EEEDEB;
color: #000;
}
ul#subnav li ul li a:hover {
color: #000;
text-decoration: underline;
background:#EEEDEB;
}
#subnav3 ul{
border: none;
padding: 6px 0 6px 38px;
font-size: .9em;
width: 185px;
font-weight: normal;
background:#EEEDEB;
color: #000;
}
#subnav3 li a:hover {
color: #000;
text-decoration: underline;
background:#EEEDEB;
}
/* breadcrumb
---------------------------------- */
ul#breadcrumb {
list-style: none;
padding: 0 0 10px 0;
margin: 0 0 10px 0;
border-bottom: solid 1px #e9ead3;
}
ul#breadcrumb li {
display: inline;
}
ul#breadcrumb li a {
font-size: .9em;
padding: 0 10px 0 0;
background: url(/public/img/red_arrow_r.gif) 100% 50% no-repeat;
text-decoration: none;
}
ul#breadcrumb li a.active {
background: none;
font-weight: normal;
}
/* Int Content Area
---------------------------------- */
#intcontentwrapper {
background: #fff;
}
#intcontent {
width: 775px;
margin: 0 auto;
padding: 12px 0 0 0;
}
#intcontent_col1 {
float: left;
width: 202px;
/* Bad IE6 */
margin: 0 -3px 0 0;
padding: 0 25px 6px 0;
}
#intcontent_col2 {
width: 488px;
/* Bad IE6 */
margin: 0 0 0 224px;
padding: 0 0 20px 0;
}
/* Good Values for Good Browsers */
html>body #intcontent_col1 { margin: 0; }
html>body #intcontent_col2 { margin: 0 0 0 227px; }
#contentarea h2#contenttitle {
color: #6a3d31;
font-size: 1.4em;
padding: 0 0 10px 0;
}
#contentarea ul, #contentarea li {
margin: 10px;
}
/* Form Styles
-------------------------------*/
form {
width: 450px;
/*float: left;*/
padding: 0 0 20px 0;
}
#form td {
padding: 0 0 20px 0;
}
form p, form .formr {
font-weight: bold;
}
form p.formcol1 {
width: 225px;
float: left;
clear: both;
}
form p.formcol2 {
margin: 0 0 0 225px;
}
#highlight {
background: #F7C91E;
padding: 5px;
}
form p.formrow {
width: 450px;
clear: both;
}
form p input.forminput {
padding: 3px;
font-size: 1.1em;
width: 200px;
}
form textarea {
width: 400px;
height: 150px;
padding: 3px;
font-style: font: Verdana, Tahoma, Arial, sans-serif;
margin: 0 0 10px 0;
}
form .formr, form .formwrapper {
clear: both;
padding: 0 0 10px 0;
}
form .submit {
padding: 3px;
font-weight: bold;
}
#guestinfo input {
width: 30%;
margin: 0 6px 0 0;
}
#guestinfo p span {
width: 30%;
display: block;
float: left;
line-height: 1em;
margin: 0 4px 0 0;
padding: 5px 14px 5px 0;
font-weight: bold;
}
p.error {
color: #cc0000;
font-size: .9em;
}
span.error, span.required {
color: #cc0000;
font-size: .9em;
font-weight: bold;
}
span.error { display: block; }
form p label {
display: block;
}
form fieldset label {
display: block;
float: left;
margin: 0 6px 0 0;
width: 26px;
}
form fieldset {
border: none;
padding: 8px 0 10px 0;
}
form h3 {
clear: both;
}
form p span {
font-weight: normal;
}
/* Footer
---------------------------------- */
#footer {
padding: 12px 0 20px 0;
clear: both;
background:#dfe0ca url(/public/img/footer-top.gif) repeat-x;
}
#footertext {
width: 775px;
margin: 0 auto;
}
#footertext ul#footernav {
padding: 0 20px 0 0;
list-style: none;
float: left;
}
#footertext ul#footernav li a {
font-size: .9em;
font-weight: bold;
color: #6a3d31;
background: url(/public/img/red_arrow_r.gif) 0% 50% no-repeat;
padding: 0 0 0 10px;
text-decoration: none;
}
#footertext #info {
padding:0 0 0 75px;
float:left;
color: #6a3d31;
}
#footertext #info a {
color: #6a3d31;
}
#footertext #info strong {
font-size: 1.1em;
}
#footertext p#contextlinks {
float: right;
font-size: .9em;
}
/* Events-----------------------*/
ul#eventslist {
list-style: none;
margin: 0;
padding: 0;
}
ul#eventslist p {
padding: 0;
margin: 0;
}
ul#eventslist p.date {
padding: 3px 0 0 0;
}
ul#eventslist h2 {
font-size: 13px;
border: none;
padding: 4px 0 6px 0;
margin: 0;
}
ul#eventslist h2 a {
font-weight: bold;
}
ul#eventslist li {
padding: 0 0 8px 0;
margin: 0 0 8px 0;
border-bottom: solid 1px #ddd;
}
#eventform #guestinfo input {
width: 130px;
margin: 0 6px 10px 0;
}
#guestinfo p span {
width: 132px;
display: block;
float: left;
line-height: 1em;
margin: 0 4px 0 0;
font-weight: bold;
}
#eventform textarea {
width: 90%;
height: 125px;
font-family: Verdana, Tahoma, arial, sans-serif;
padding: 3px;
}
#eventform select { margin: 4px 0 9px 0; }
/* Forms-----------------------*/
#form {
margin: 0;
padding: 0;
}
.required {
color: #cc0000;
}
.error {
color: #cc0000;
}
#form table {
margin: 0;
background: #eee;
width: 550px;
}
#form tr {
margin: 0;
padding: 0;
}
#form td {
margin: 0;
padding: 10px 15px 10px 10px;
}
#form th {
font-size: 13px;
border-bottom: solid 1px #ccc;
padding: 20px 15px 10px 10px;
}
#form input {
margin: 0;
padding: 3px;
border: 1px solid #ccc;
}
#form textarea {
width: 250px;
margin: 0;
padding: 3px;
border: 1px solid #ccc;
font-family: Verdana, Tahoma, Arial, sans-serif;
}
input.submit {
margin: 10px 0 0 0;
padding: 3px;
color: #fff;
font-weight: bold;
background: #FF9600;
/* border: 1px solid #ccc; */
}
#contentarea form .forminput {
margin: 0;
padding: 3px;
border: 1px solid #ccc;
width: 200px;
}
#contentarea form p.formcol1 {
width: 230px;
float: left;
padding: 6px 0;
margin: 0;
}
#contentarea form p.formcol2 {
margin: 0 0 0 230px;
padding: 6px 0;
width: 220px;
}
#contentarea form p.formrow {
padding: 5px 0 5px 0;
clear: both;
}
#contentarea form label {
display: block;
font-weight: bold;
padding: 0;
}
#contentarea form span.note {
display: block;
padding: 0 20px 2px 0;
font-size: 9px;
color: #666;
}
#contentarea form#storysubmission {
padding: 10px;
background: #eee;
}
#contentarea form#storysubmission textarea {
margin: 0;
padding: 3px;
border: 1px solid #ccc;
width: 90%;
height: 600px;
}
#contentarea form p label {
}
#eventform h3 {
padding: 12px 0;
border-bottom: solid 1px #666;
margin: 0 0 9px 0;
}
/* from http://www.positioniseverything.net/easyclearing.html --------------------- */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */