/********************************************
   AUTHOR:          http://www.ambitiouswebdesign.com 
   WEBSITE:     http://www.safebabysittingjobs.com/
   TEMPLATE NAME:  SAFE BABYSITTING JOBS
   DATE:           Oct-1th-2008
 *******************************************/ 
 
/********************************************
   HTML ELEMENTS
********************************************/ 
 
* { margin: 0; padding: 0px; }

html, body { 
margin: 0;
padding: 0px;
height: 100%; 
background-color: #fff;
font: 10pt 'century gothic';
background: #fff url(/images/mainbg.gif) repeat-x; /* Main DIV Background Img */

} 

/* ----------Centered Container Or the Layout--------------------- */

#container { 
min-height: 100%; 
height: auto !important; 
height: 100%; 
margin: 0 auto -4em; /* make sure this matches in the body footer DIV */
} 

#textholder {
width: 1150px;
margin: 0 auto;
}


/* --------------LABELS BUTTONS & FORMS-----------*/
 
label {
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #777;
}
 
.form, textarea {
width: 20em;
border: 1px solid #777;
font: 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #86878b;
padding: 2px;
margin-bottom: 20px;
}
 
.button {
width: 6em;
font: bold 10pt 'Trebuchet MS', Arial, Sans-serif;
color: #fff;      
background: #4fc2f0;
padding: 4px 5px;
border: 1px solid #46a1c6;
}

/* --------------HEADER------------- */

#header {
height: 203px;
width: 1150px;
margin: 0 auto;

}

#header ul {
padding: 10px;
}

#header .links ul {
margin: 0px;
padding: 0px;
}

#header .links li {
display: inline;
border-right: 1px solid #fff;
list-style-type: none;
}

#header .links li a {
color: #fff;
text-decoration: none;
padding: 3px 5px 1px 5px;
font: bold 8pt 'Century Gothic', Sans-Serif;
}

#header .links li a:hover {
text-decoration: underline;
}

#search {
background-image: url('/images/searchbg.gif');
background-repeat: no-repeat;
height: 96px;
width: 276px;
text-align: left;
margin-top: 70px;
}

#search .red {
color: red
}



/* --------------LOGO IN HEADER *always use this*------------- */

.logolink {
background-image: url('/images/logo.jpg');
background-repeat: no-repeat;
height: 203px;
width: 475px;
}
 
.logolink a { float: left;  }
 
#swap {background-image: url(/images/logo.jpg);  width: 475px;  height: 203px;  }
 
.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* --------------MAIN CONTENT, LEFT NAVIGATION----------------*/

#main {
min-height: 100%; 
padding: 30px 0px 0px 0px;
height: auto !important; 
height: 100%; 
width: 1150px;
margin: 0 auto;

}

#main .content {
padding: 0px 0px 0px 50px;
margin: 0px 0px 50px 335px;
min-height: 170px; /* Height of Background Img */
height: auto;
color: #482e16;
font: 10pt 'Century Gothic', Sans-Serif;
}

#main p {
}

#main .navleft {
float:left; 
width: 335px;
padding: 0px;
}

#main .pinkleft {
float:left; 
width: 335px;
margin-top: 25px;
padding: 0px;
font: bold 10pt 'Century Gothic', Sans-Serif;
color: #fff;
height: 100%; 
}

#main .pinkleft a{
font: bold 10pt 'Century Gothic', Sans-Serif;
color: #fff;
text-decoration: underline;
}

#main .pinkleft a:hover{
font: bold 10pt 'Century Gothic', Sans-Serif;
color: #e8dba8;
text-decoration: underline;
}




#main H1 {
font: bold 14pt 'Century Gothic', Sans-Serif;
color: #506f97;
padding: 10px 0px 10px 0px;
}

#main a {
font: 10pt 'Century Gothic', Sans-Serif;
color: #f5367d;
text-decoration: underline;
}

#main a:hover{
font: 10pt 'Century Gothic', Sans-Serif;
color: #ca0016;
text-decoration: underline;
}

#main a:visited {
font: 10pt 'Century Gothic', Sans-Serif;
color: #f5367d;
text-decoration: underline;
}



.navimages {
}
 
.navimages a { float: left; margin-right: 12px; margin-left: 12px; }

#swap01 {background-image: url(/images/babysittingjobs2.gif);  width: 202px;  height: 34px; }
#swap02 { background-image: url(/images/babysittingjobtips2.gif); width: 202px;  height: 34px; }
#swap03 { background-image: url(/images/babysittingnews2.gif); width: 206px;  height: 34px; }
#swap04 {background-image: url(/images/babysitterblog2.gif);  width: 202px;  height: 34px; }
#swap05 { background-image: url(/images/csocorner2.gif); width: 202px;  height: 34px; }

.rollover { display: block; } /* Allow setting widths and heights */
.rollover img { width: 100%; height: 100%; border: 0; } /* only set width and height once */
.rollover:hover { visibility: visible; /* for IE */ } /* sets any property for the :hover state */
.rollover:hover img { visibility: hidden; } /* 'rolls over' the image */


/* --------------FOOTER------------- */

.clear {
clear: both;
}


#footer, .push { 
clear: both;
width: 100%;
height: 4em; /* make sure this matches in the body container DIV */
bottom: 0;
left: 0;
margin: 0 auto; 
position: relative;
} 


#footer {
background: #faf2d9 url(/images/footerbg.gif) repeat-x;
height: 200px;
height: auto;
text-align: center;
margin-top: 25px;
}


#footer .content { 
margin: 0 auto; 
position: relative; 
}

#footer .divider { 
background-image: url(/images/footerdivider.gif);
width: 32px;
padding: 10px 0px 0px 0px;
margin-top: 50px;
}

.footerline { 
background-image: url(/images/footerdivider.gif);
width: 32px;
}

#footerlinks { 
margin: 0 auto;
width: 1150px;
text-align: center;
margin-top: 25px;
}

.footersection { 
background: url(/images/footerdiv.gif) repeat-y;
padding: 5px;
float: left;
margin: 0px 10px 0px 10px;
width: 150px;

}


/* --------------FOOTER LINKS------------- */

#footer ul {
padding: 10px;
}

#footer .links ul {
margin: 0px;
padding: 0px;
}

#footer .links li {
display: block;
list-style-type: none;
}

#footer .links li a {
color: #6a4e31;
text-decoration: none;
padding: 0px 0px 0px 0px;
font: 10pt 'Century Gothic', Sans-Serif;
}

#footer .links li a:hover {
text-decoration: underline;
}

#footer .asc ul {
margin: 0px;
padding: 0px;
}

#footer .asc li {
display: block;
list-style-type: none;
}

#footer .asc li a {
color: #e3d49d;
text-decoration: none;
padding: 0px 10px 0px 10px;
font: 8pt 'Century Gothic', Sans-Serif;
}

#footer .links li a:hover {
text-decoration: underline;
}

/* --------------TABLE/CELL STYLES------------- */

.pad25 {
padding: 25px;
margin: 0px;
}

.footertable {
padding: 25px;
margin: 0px;
background-image: url(/images/footerdivider.gif);

}

.pad5 {
padding: 5px;
margin: 0px;
}


.pad10 {
padding: 10px;
margin: 0px;
}


.padBottom {
height: 35px;
margin-top: 25px
}

/* --------------TEXT STYLES------------- */


.brown10bold {
font: bold 10pt 'century gothic';
color: #482e16;
}

.brown12bold {
font: bold 12pt 'century gothic';
color: #482e16;
}

.blue10bold {
font: bold 10pt 'century gothic';
color: #799fcf;
}

.blue12bold {
font: bold 12pt 'century gothic';
color: #799fcf;
}


.pink12bold {
font: bold 12pt 'century gothic';
color: #ff5292;
}


.red12bold {
font: bold 12pt 'century gothic';
color: #ca0016;
}


.white8bold {
font: bold 8pt 'century gothic';
color: #fff;
}

.white10 {
font: 10pt 'century gothic';
color: #fff;
}

.white10bold {
font: bold 10pt 'century gothic';
color: #fff;
}

.white12bold {
font: bold 12pt 'century gothic';
color: #fff;
}



.homeboxtext {
font: bold 10pt 'century gothic';
color: #fff;
padding: 25px;
text-align: left;
}

.whitetab {
font: bold 10pt 'century gothic';
color: #506f97;
}

.whitetab a{
font: bold 10pt 'century gothic';
color: #506f97;
}


.bluetab {
font: bold 10pt 'century gothic';
color: #fff;
}

.bluetab a{
font: bold 10pt 'century gothic';
color: #fff;
}


.searchtableheader {
font: 14pt 'century gothic' bold;
color: #fff;
font-weight: bold;
padding: 0px 0px 0px 10px;      
height: 44px;
background-image: url(/images/boxheaderbg.gif);
width: 33%;

}

.searchtable {
padding: 5px;
border: 1px solid #dbcd9c;
width: 33%;

}

.searchtable a{
font: bold 10pt 'Century Gothic', Sans-Serif;
color: #f5367d;
text-decoration: underline;
}

.searchtable a:hover{
font: bold 10pt 'Century Gothic', Sans-Serif;
color: #f5367d;
text-decoration: underline;
}

.searchtable a:visited{
font: 10pt 'Century Gothic', Sans-Serif;
color: #799fcf;
text-decoration: underline;
}



#detailstable {
}

.detailstable td{
padding: 5px;

}

#sitterstable {
}

.sitterstable td{
padding: 10px;

}