/* body and html */
html, body{
margin: 0px;
padding: 0px;
font-family: 'tahoma', arial, helvetica, sans; /*whatever fonts here*/
font-size: 12px; /* standard size for normal fonts */
color: #333; /*standard color for all text */
min-width: 860px; /*set minimum width of site */
background-image: url('../images/bodyBg.jpg');
background-position: top left;
background-repeat: repeat-x;
background-color: #84a8d0;
text-align: center;
}
/* Containers
* -there are holders for the entire site, headers, navigations, bodies, footers, etc...
* -usually, these are 100% width for background repeats
* -text-align: center is for internet explorer, centering the divs inside them.
*/
/*theWholeContainer is a wrapper for the entire site. this div would go right in the beginning..
*
*
* ...
*
*
*and be closed right at the end. All the containers following would be in this.
*/
#theWholeContainer {
width: 880px;
height: 770px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.floatLeftImg { clear: left; float: left; display: inline; padding: 3px; margin: 0 5px 2px 0; border: 1px solid #e00d00; }
/*theHeader is where things at the top of the page are stored and positioned
*/
#theHeader {
width: 880px;
height: 160px;
background-image: url('../images/top.jpg');
background-position: left top;
background-repeat: repeat-x;
text-align: center;
}
/* Here would be theHeader styles... like h1, p, a, etc */
#theHeader h1.tag {
font-size: 24px;
color: #e00d00;
text-align: right;
padding-top: 10px;
padding-right: 17px;
padding-bottom: 0;
margin-bottom: 0;
}
/*end of #theHeader styles*/
/*theNavigation is sometimes inside theHeader, sometimes not, but either way, needs its own styles. */
#theNavigation {
width: 100%;
height: 20px;
padding-top: 70px;
padding-right: 5px;
text-align: right;
font-size: 20px;
color: #f9720e;
}
#theNavigation img { border: 0; }
#theNavigation a { font-size: 20px; color: #e00d00; margin: 0 5px; padding: 0; text-decoration: none; }
#theNavigation a:hover { color: #3b73b3; }
#theNavigation a.active { color: #3b73b3; }
/* navigation is very important. especially the a tags. sometimes use blocks, sometimes something else
* see upcoming style templates for more info... */
#theBody {
width: 880px;
height: auto;
background-image: url('../images/middleRepeatY.jpg');
background-position: left top;
background-repeat: repeat-y;
}
#theBodyLeft {
float: left;
display: inline;
margin: 15px 25px 15px 60px;
width: 355px;
text-align: left;
}
#theBodyRight {
float: left;
display: inline;
border-left: 2px solid #000000;
padding-left: 25px;
margin: 15px 30px 15px 0px;
text-align: left;
width: 355px;
}
#theBodyCenter {
margin: 0 auto;
width: 550px;
text-align: left;
}
#theContactLeft {
float: left;
display: inline;
margin: 15px 25px 15px 60px;
width: 425px;
text-align: left;
}
#theContactRight {
float: left;
display: inline;
border-left: 2px solid #000000;
padding-left: 25px;
margin: 15px 30px 15px 0px;
text-align: left;
width: 275px;
}
#theBody h1 {
font-size: 18px;
color: #e00d00;
margin: 0;
padding: 0;
font-family: "Comic Sans MS";
}
#theBody h2 {
font-size: 16px;
color: #000000;
margin: 25px 5px;
padding: 0;
font-family: "Comic Sans MS";
}
#theBody h3 {
font-size: 16px;
color: #000000;
margin: 25px 5px 0px 5px;
padding: 0;
font-family: "Comic Sans MS";
}
#theBody h1.head { font-size: 24px; }
span.red { color: #e00d00; }
#theBody p {
font-size: 13px;
color: #000000;
margin: 2px 5px 5px 5px;
}
#theBody ul { padding: 0; margin: 0; text-align: left; }
#theBody ul li { padding: 0; font-size: 13px; list-style-type: none; list-style-image: none; text-align: left;}
#theBody ul li {
padding: 0 0 0 15px;
margin-left: 40px;
margin-top: 5px;
background-image: url('../images/star_bullet.jpg');
background-position: left 2px;
background-repeat: no-repeat;}
#theBody.centerImage { clear: both; margin-left: auto; margin-right: auto; border-top: 2px solid #f96a00; padding-top: 5px; }
#theCalendar {
width: 775px;
margin-left: auto;
margin-right: auto;
padding: 10px 0 20px 0;
}
#theCalendar div.topRow {
width: 100%;
border-bottom: 2px dotted #f96a00;
padding-bottom: 3px;
margin: 0;
}
#theCalendar p.topRow {
float: left;
display: inline-block;
width: 125px;
font-size: 15px;
color: #f96a00;
text-align: center;
margin: 0;
}
#theCalendar div.oRow {
width: 100%;
border-bottom: 1px dotted #f96a00;
padding: 3px 0px;
margin: 0;
}
#theCalendar p.oRow {
float: left;
display: inline-block;
width: 125px;
font-size: 13px;
color: #000000;
text-align: center;
margin: 0;
}
.theCalendar {
width: 775px;
margin-left: auto;
margin-right: auto;
padding: 10px 0 20px 0;
}
#theBody div.topRow {
width: 100%;
border-bottom: 2px dotted #f96a00;
padding-bottom: 3px;
margin: 0;
}
#theBody p.topRow {
float: left;
display: inline-block;
width: 125px;
font-size: 15px;
color: #f96a00;
text-align: center;
margin: 0;
}
#theBody div.oRow {
width: 100%;
border-bottom: 1px dotted #f96a00;
padding: 3px 0px;
margin: 0;
}
#theBody p.oRow {
float: left;
display: inline-block;
width: 125px;
font-size: 13px;
color: #000000;
text-align: center;
margin: 0;
}
hr { width: 75%; }
#theFooter {
width: 880px;
height: 149px;
background-image: url('../images/bottom.jpg');
background-position: left top;
background-repeat: no-repeat;
text-align: center;
font-size: 13px;
color: #000000;
}
#theFooter h1 {
font-size: 20px;
color: #e00d00;
margin: 0px;
padding: 15px 0px;
}
#theFooter img.center { vertical-align: middle; }
#theFooter a { text-decoration: none; color: #000000; }
#theFooter a:hover { text-decoration: underline; color: #e00d00; }
#theFooter p { margin: 2px; padding: 0; }
/* End Containers */
.floatLeft { float: left; display: inline; }
/*fixes floating div problems*/
.clearfix:after, #theBody:after, #theCalendar:after, div.topRow:after, div.oRow:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
/* End hide from IE-mac */
/* form rows */
div.row {
padding-top: 10px;
/*vertical-align: bottom;*/
margin-left: 25px;
clear: left;
}
div.row h3 {
width: 385px;
font-size: 15px;
padding-bottom: 10px;
padding-top: 5px;
color: #5c6e7e;
border-bottom: 1px dotted #5c6e7e;
margin-left: 10px;
margin-right: 10px;
margin-top: 0px;
text-align: left;
}
p.inRow { margin: 0; padding: 0; clear: left; font-size: 10; color: #cccccc; }
div.label, div.required {
float: left;
display: inline;
padding-top: 12px;
padding-right: 5px;
width: 150px;
text-align: right;
}
div.required { color: #971a1a; }
div.formw {
float: left;
display: inline;
padding-top: 10px;
width: 235px;
text-align: left;
margin-left: 0px;
padding-left: 3px;
}
/*end form rows */
/*
Secure and Accessible PHP Contact Form v.2.0 Basic Styles by Mike Cherim
THESE ARE THE VARIOUS ELEMENTS, CLASSES, IDS, AND SELECTORS YOU MAY NEED FOR STYING THIS FORM
Anchors or link elements have not been included, but everythig else is :-)
*/
/* for main form wrapping div */
div#gb_form_div {
/* not styled on demo page */
}
/* id for the form itself */
form#gb_form {
/* not styled on demo page */
}
/* form and results heading size */
.main_formhead, .formhead {
font-size : 1.4em;
color : #cc9900;
}
/* outer fieldset - it's common to make this border : 0; */
fieldset#formwrap {
background-color : #fefefe;
}
/* section fieldsets - it's common to make this border : 0; */
fieldset {
background-color : #fafafa;
}
/* form legends and dt "heading" */
legend, dt {
font-weight : bold;
color : #666;
}
/* main legend at top of the form */
legend#mainlegend {
font-size : 1.2em;
color : #669900;
}
/* form label text */
label {
color : #669900;
}
/* all inputs, select, and textarea */
input.med, input.short, select.med, textarea.textbox {
font : 80% 'Trebuchet MS', sans-serif;
color : #666;
padding : 2px;
border : 1px solid #cc9000;
background-color : #fffffa;
}
/* to make focus stable in IE 6 */
* html input.button {
color : #000;
border : 1px solid #669900;
background-color : #cc9900;
}
* html input.button.hover {
color : #000;
border : 1px solid #000;
background-color : #cc9900;
}
* html input.button.focus {
color : #000;
border : 1px solid #000;
background-color : #cc9900;
}
/* hover and focus styling - the classes like .hover and .focus below are for the javascript for IE */
input.med:hover, input.med:focus, input.short:hover, input.short:hover, select.med:hover, select.med:focus, textarea.textbox:hover, textarea.textbox:focus, input.med.hover, input.med.focus, input.short.hover, input.short.focus, select.med.hover, select.med.focus, textarea.textbox.hover, textarea.textbox.focus {
color : #000;
border : 1px solid #000;
background-color : #fff;
}
/* for the checkbox input */
input.checkbox {
/* not styled on demo page */
}
/* error heading weight and color - bold is for the error reason text */
span.error, dt.error, strong.error {
color : #cd0000;
font-weight : bold;
}
/* success heading color */
span.success {
color : #669900;
font-weight : bold;
}
/* privacy and "Why?" small element link sizes (relative to their parent element */
small.privacy, small.whythis {
font-size : 80%;
}
/* set up relativity to position small Why? text */
small.whythis {
position : relative;
}
/* Why? link style */
small.whythis a {
text-decoration : underline;
font-size : 0.95em;
}
small.whythis a:hover, small.whythis a:focus, small.whythis a:active {
text-decoration : none;
}
/* hide the Why? text span */
small.whythis a span {
border : 1px solid #fafafa;
background-color : #fafafa;
padding : 0 4px 0 4px;
color : #fafafa;
text-decoration : none;
}
/* bring back Why? text span (title attribute backs this up for borwsers it doesn't function in */
small.whythis a:hover span, small.whythis a:focus span, small.whythis a:active span {
border : 1px solid #000;
background-color : #eecc11;
color : #000;
padding : 0 4px 0 4px;
text-decoration : none;
}
/* the link back to me for form credit */
p.creditline {
float : right;
margin : -17px 0;
padding-bottom : 1px;
font-size : 80%;
}
/* used for abbreviation used relative to form. the .abbr class is for the span added for IE */
abbr, .abbr {
cursor : help;
border-bottom : 1px dotted #999;
}
/* set result color for blockquote dt "heading" */
dl#result_dl_blockq dt, dl.result_dl_blockq dt {
color : #669900;
}
/* position result blockquote flush with parent */
dl#result_dl_blockq blockquote, dl.result_dl_blockq blockquote {
margin-left : 0;
}
/* style the input names in the result */
div#hf_form_div span.items {
font-weight : bold;
color : #cc9900;
}
/* End CSS */