/*

  Filname: styles.css
  http://www.southside-baptist-church.org
  
  Copyright (C) 2009 Southside Baptist Church
  
  Revision Log:
  
*/

body {background-image: url("../images/bg.gif");
    background-repeat: repeat-x;
    background-color: #FAFFF7;
    margin: 15px;
    padding: 0 0 0 0;
    font-family: "trebuchet ms", arial, sans-serif;
    color: #4D4D4D;
    font-size: 100%}

* {margin: 0; padding: 0;}

div#header {background-image: url(../images/header.jpg);
    background-repeat: no-repeat; 
    width: 770px; 
    height: 80px; 
    margin: 0 auto 0 auto;
    border: 1px solid #32992B;}

div#wrap {width: 768px;
    background-color: #FFFFFF;
    border: 1px solid #32992B;
    margin :5px auto 0 auto;
    text-align: left;}
    
.clearfix:after {
    content: ".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;}

    
/* ---------------------------- Left Column ------------------------------*/    
    
div#leftcol {float: left;
    clear: none;
    width: 150px;
    top: 0px; 
    left: 0px;
    padding: 0px;
    margin: 0px;
    font-size: .8em;}

div#leftcolwelcome {background-image: url(../images/nav_bar_welcome.gif);
    background-repeat: no-repeat;
    height: 27px;}
    
div#leftcolministries {background-image: url(../images/nav_bar_ministries.gif);
    background-repeat: no-repeat;
    height: 27px;
    margin: 20px 0 0 0;}
    
div#leftcol ul {margin: 10px 10px 5px 10px;
    list-style-type: none;}

div#leftcol li {border-bottom: 1px solid #ccc;
    margin: 0 0 0px 30px;
    padding: .1em 0 .2em 0;
    text-indent: -30px;}

div#leftcol a {text-decoration:none; 
    color: #686;}

div#leftcol a:hover {color: #7D1A1A;}
    
    
/* ---------------------------- Right Column -----------------------------*/    
    
div#rightcol {float: left;
    clear: none;
    width: 148px;
    padding: 0;
    margin: 15px 10px 0px 0px;}
    
div#rightcoltop {background-image: url(../images/right_col_top.jpg);
    background-repeat: no-repeat;
    width: 148px; 
    height: 12px; 
    padding: 0;
    margin: 0;
    font-size: 1px; /* IE6 Image White Space Bug Fix */}
    
div#rightcolbottom {background-image: url(../images/right_col_bottom.jpg);
    background-repeat: no-repeat;
    width: 148px; 
    height: 12px; 
    padding 0;
    margin: 0 0 15px 0;
    font-size: 1px; /* IE6 Image White Space Bug Fix */} 
    
div#rightcolcontent {background-color: #E0E888;
    font-size: .7em;
    margin: 0;
    padding: 15px 10px 15px 10px;}

div#rightcolcontent a:hover {color: #7D1A1A;}

div#rightcolcontent ul {list-style-type: none;
    padding: 0 0 0 10px;
    line-height: 1.4em;}
    
div#rightcolcontent li a {text-decoration: none;
    color: #4D4D4D;}  

div#rightcolcontent table.service {margin: 2.5em 0 2.5em 0;
    text-align: left;}
    
div#rightcolcontent table.service td {color: #4D4D4D;
    font-size: .8em;}        
    
div#rightcolcontent td.right {text-align: right;}

div#rightcolcontent .heading {color: #7D1A1A;
    font-size: 1.1em;
    text-decoration: none;
    font-weight: normal;}

    
/* ----------------------------- Middle Column -------------------------------*/    
    
div#midcol {float: left;
    clear: none;
    width: 400px;
    padding: 0 25px 25px 25px;
    margin: 0;}
    
div#midcol .title {font-size: 1.4em;
    font-family: "Monotype Corsiva", "arial narrow", arial, sans-serif;
    color: #7D1A1A;
    margin: 15px 0 10px 0;}
    
div#midcol h2 {font-size: 1em;
    font-style: italic;
    font-weight: lighter;
    font-variant: small-caps;
    color: #777;
    margin: 0 0 8px 0;}
    
div#midcol p {margin: 0 0 15px 0;
    font-size: .9em;
    text-indent: 25px;}
    
div#midcol a {color: #7D1A1A;
	text-decoration: none;}
    
/********** text paragraphs on home page **********/    
    
div#news {float: left;
    width: 400px;
    margin: 0;
    padding: 0;}
    
div#news .newstitle {font-size: 1.2em;
    font-family: "Monotype Corsiva", "arial narrow", arial, sans-serif;
    color: #7D1A1A;
    width: 80%;
    border-bottom: 1px solid #DDD;
    margin-top: 30px;}
    
div#news img {margin: .5em;
	float: left;}
    
div#news p {font-size: .9em;
    color: #4D4D4D;
    line-height: 1.2em;
    margin: 8px 0 0 0;}
    
div#news a {color: #7D1A1A;
    font-family: "trebuchet ms", helvetica, arial, sans-serif;
    float: right;
    font-size: .9em;
    font-style: italic;
    text-decoration:none;}

/********** Staff page **********/ 
    
div#midcol .bio {float: left;
    margin: 10px 15px 15px 0;}
    
/********** Contact page **********/ 
    
div#address {padding: 5px 0 30px 30px;}

div#address em {font-size: .9em;
    font-style: italics;}

div#midcol li.contact {font-size: .95em;
    line-height: 1.2em;
    margin: 12px 0 0 15px;
    list-style: none;}
    
div#midcol li.contact a {font-size: .9em;}

div#midcol .smaller {font-size: .75em;}

/********** Awana clubs page **********/

div#midcol .small {font-size: .6em;
    line-height: .85em;
    color: #aaa;
    margin-top: 30px;}
    
div#midcol .clubs {padding: 10px 0 5px 0;}
    
div#midcol .clubs h3 {color: #7D1A1A;}

div#midcol .clubs img {float: left;
    padding-right: 12px;
    border: none;}    
    
/********** Directions page - Google map **********/
    
div#map {width: 375px; 
    height: 250px;}
    
div#mapwindow {font-size: .9em;}

div#mapwindow b {color: #7D1A1A;}
    
/********** Request Information page **********/

div#formwrap {width: 340px; 
    background-color: #F5F5F5;
    border: 1px solid #AAA; 
    color: #333;
    font-size: .9em;
    padding: 5px 5px 5px 5px;
    margin: 30px 0 0 0;}    
    
div#tiny {font-size: .55em;
    color: #B5B5B5;}

div#tiny a {color: #A5A5A5;}

div.row {clear: both;
  padding-top: 5px;}

div.row span.label {float: left;
    width: 100px;
    text-align: right;}
    
div.row span.formw {float: right;
    width: 230px;
    text-align: left;}

div.row span.button {float: right;
    padding: 5px 12px 0 0;}
    
div.row .spacer {margin-top: 3px;}
    
#check { font-size: 10px; width: 20px; display: none; visibility: hidden; z-index: 0; }

/********** Service Times page **********/

div#midcol table.servicetimes {font-size: .9em;
    width: 250px;
    line-height: 1.3em;
    margin: 0 0 5px 20px;}

div#midcol td.right {text-align: right;}
    
div#footer {background-image:url(../images/footerbar.gif);
    background-repeat:no-repeat;
    width: 770px;
    margin: 0 auto 0 auto;
    padding: 8px 0 0 0;
    text-align: left;
    text-indent: 8px;
    font-size: .6em;
    color: #4D4D4D;}
    
  /********** Sunday School page - SS electives **********/

div#electives {font-size: .9em;
    border: 1px dashed #8E8E8E;
    padding: 10px 15px 10px 25px;
    margin: 25px 0 25px 0;}

div#electives h2 {color: #7D1A1A;}
        
div#electives ul {list-style-type: circle;}
    
    
/* ----------------------------- Missions ---------------------------------*/

div#midcol ul.missions {list-style: none;
    font-size: .8em;
    vertical-align:top;}
    
div#midcol ul.missions img {float: left;
    clear: none;
    padding: 0 1.4em .8em 0;}
    
div#midcol ul.missions h3 {font-family: arial, sans-serif;
    font-size: .85em;
    font-weight: normal;
    color: #4D4D4D;
    line-height: 1.4em;}    
    
div#midcol ul.missions p {font-size: .9em;
    line-height: 1.2em;}
    
/********** Main paragraph at top of Missions page **********/    
    
div#missiontext {width: 80%;
    background-color: #F9FFF9;
    border-top: 1px solid #BBD788;
    border-bottom: 1px solid #BBD788;
    font-size: .75em;
    color: #465600;
    padding: 1em;
    margin: 0 auto 2em auto;
    }
    
/********** First word of paragraph **********/

div#midcol .first {color: #7D1A1A;
    font-size: 1.5em;
    font-family: "Monotype Corsiva", "arial narrow", arial, sans-serif;}

/********** shows hand when mousing over missionary links **********/    
            
div#midcol .link {cursor:hand;}

/********** Alternating grey and white toggle menus **********/

div#midcol .shaded {background-color: #E8E8E8;
    padding: .15em .5em .15em .5em;
    margin: .4em auto .4em auto;}
    
div#midcol .white {padding: .1em .5em .1em .5em;
    margin: .4em auto .4em auto;}

div#midcol .right {float: right;
    vertical-align:top;}
    
    
/* ------------------------- Missions Toggle Menu --------------------------*/

div#expand1 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}

div#expand2 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand3 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand4 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}

div#expand5 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand6 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand7 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}

div#expand8 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand9 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand10 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}

div#expand11 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand12 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand13 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}

div#expand13b {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand14 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand15 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand16 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand17 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand17b {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand18 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand20 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand21 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand22 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand23 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand24 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand25 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand26 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand27 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand28 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}
    
div#expand29 {background-color: #ffffc4;
    border-right: 1px solid #d0c000;
    border-bottom: 1px solid #d0c000;
    padding: 1em .8em 0 .8em;
    margin: .4em 0 1em 0;}

/* -------------------------- End Missions ---------------------------*/