/* -----------------------------------------------------------------
   Style Sheet
   Last Updated:  1/14/10
   Author:  Kathy Mashburn
   Email:  kathy_mash@yahoo.com
   Website:  http://southsidemissions.org
   -----------------------------------------------------------------*/


/* The appropriate background class will be applied based on class attached to the body */
body {
        margin: 0 auto;
        padding: 0;
    	font-family: Arial, Helvetica, sans-serif;
}

/* Horizontal Nav Bar in Header */
ul {
     margin: 0;
     padding: 0;
     list-style: none;
     text-align: center;
     width: 765px;
     float: left;
}

ul li { float: right; }

ul a {
     display: block;
     padding: 0 2em;
     line-height: 2.1em;
     background: url(images/Layout/borders.png);
     text-decoration: none;
     color: #fff;
}

ul .first a {
          background: none;
}

.list ul{
       display: block;
       text-align: left;
}

.list li {display: block;	
          width: 100em; /* dimensions needed for IE5.x/Win */
          line-height: 30px;
}

/* Default links */
a:link {color: #66CCFF;}        /* Makes unvisited links light blue */
a:visited {color: #FFCB00;} /* Makes visited links gold */
a:hover, a:active { font-weight: bold;
                    color: #B92C00;
                    background-color: #FFCB00;
}  /* Makes hovered links red with a background color of gold*/

a:link, a:visited {text-decoration: none;} /* Turns underlines off */
a:hover, a:active {text-decoration: underline;}  /* Turns underlines on */



/* Headers */
h1 { font-size:  100%;
     text-align: center;
     color: #B92C00} /* red */

h2 { color: #B92C00;
     text-align: center;
} 

h3 { text-align: center; 
     color: #FFCB00;  /* gold */
     background-color: #2B2B55;  /* dark blue */
}

h4 { text-align: center;
     color: #B92C00;
}

h5 {text-align: center}



/* Main wrapper that holds it all centrally */
#wrapper {
				width: 765px;
				margin: 0 auto;
				text-align: left;
				padding: 0px 10px 10px 10px;
} /* This gives the page width of 765 pixels with a padding of 10 pixels left n right */


/* default masthead holding the banner */
#header {
         width: 765px;
         height: 173px;
         background-color: #2B2B55;
}

#header h1 { 
            text-align: center;
            color: #FFCB00;
            padding: 45px 0 42px 0;
}


/* now the three main columns, named in order of importance and displayed when styles switched off */

#primaryContent {
        float:left;
        width:320px;
        margin: 30px 0px 20px 195px;
}

/* note here that specifying threeColLayout in the body will activate the following div instead of the default primaryContent */
#threeColLayout #primaryContent {
		float:left;
        display:inline;
		width:320px;
		margin: 30px 0px 20px 195px;
}

#primaryContent h1, h2, p { 
                            padding-right: 10px; }

/* note here that specifying twoColLayout in the body will activate the following div instead of the default primaryContent */

#twoColLayout #primaryContent {
	     float: left;
	     display: inline;
	     width: 570px;
	     margin: 25px 0 20px 195px;
}

#twoColLayout #primaryContent h1, h2, p { padding-right: 20px; }

#oneColLayout #primaryContent {
			float:left;
        	width:750px;
        	margin: 25px 0px 20px 0px;
}


/* just in case oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */
#twoColLayout #secondaryContent {display:none}


/* the secondary Content is only used on a three-column layout */
#secondaryContent {
		float:left;
        display: inline;
		width:235px;
		margin: 30px 0 20px 15px;
} 

#sideContent {
		float:left;
       display:inline;
		width:180px;
 		margin: 30px 0 20px -765px;
        font-size: 13.40px;
}

#mainNav {



          width:180px;



          height:310px;



	      float: left;



	  padding-top: 5px;



	  padding-bottom: 5px;



          background-color: #2B2B53;



}  







#mainNav ul {



          list-style: none;



          width: 180px;



          float: left;



}







#mainNav li {



          float: left;



	  padding-left: 5px;



	  padding-right: 5px;



}







#mainNav ul a {



          display: block;



          line-height: 1.5em;



          background: url(images/Layout/divider.GIF); repeat-x left top;



          text-decoration: none;



}







#mainNav ul .first a {



          background: none;



}







#more { width: 195px;



        height: 100px;



        padding-top: 5px;



	padding-bottom: 5px;



        margin: 50px -10px 20px -700px; 



}



#more h3 { padding-top: 50px; }



#more ul { list-style: none;

           width: 195px;

           float: left;

}



#more li { float: left; 

				font-size:  75%}



#more ul a { display: inline;



             line-height: 1.5em;



             background: url(images/Layout/divider.GIF); 



             text-decoration: none;



}











/* just in case oneColLayout is specified in body, and these are left in, we turn them off - not ideal, but it works */







#oneColLayout #secondaryContent, #oneColLayout #sideContent {display: none}







/* twoColContent - used to span two right-hand columns - box used only if no selector */







#twoColContent {



	     width: 605px;



	     float: right;



	     margin: 25px 0 20px 195px;



}





/* CSS for the box starts here



================================================*/















/* Insert the custom corners and borders for browsers with JavaScript on */















.cb {



         margin: 0.5em 0;



         line-height: 170%;



}







/* cbSide controls non-rounded boxes in the navigation otherwise known as the sideContent */







.cbSide {



     width:195px;



     margin:5px 5px 5px 5px;



     padding: 5px 5px 5px 5px;



     background-color: #FFF;



}







.cdSide p {



     margin: 5px;



     padding: 5px 5px 5px 5px;



     font: Arial Narrow;



     color: #666;



}







.cbSide1 {width:178px;



          margin: 5px;



          padding: 5px;



          background-color: #FFF;



}











/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in.  Usually combined with another class to control inner elements, eg box default */







.box {



	margin: 5px 5px 5px 5px;



	padding: 5px 5px 5px 5px;



	background: url(/images/Layout/diags_form.GIF);



}







.box1 { margin: 0px 0px 0px 0px;



        padding: 5px 5px 5px 5px;



        background: url(/images/Layout/diags_form.GIF);



}



/* Styling of the boxes if there is no JavaScript support */







.cbb {



		margin: 0 5px 0 5px;



		background-color: #FFF;



		padding: 5px 0 5px 0;



		line-height: 170%;



}







/* paragraph styles for any main boxes */







.cbb p, .cb p {



		   margin: 0;



		   padding: 0 5px 5px 5px;



		   color: #333;



}







/* Insert the custom corners and borders for browsers with sufficient JavaScript support */







.cb {



	   margin: 0.5em 0;



	   line-height: 170%;



}







/* Rules for the top corners and border */







.bt {



	   background:url(images/Layout/box.png) no-repeat 100% 0 !important;



	   background:url(images/Layout/box.GIF) no-repeat 100% 0;



	   margin: 0 0 0 18px;



	   height: 27px;



}







.bt div {



	   height: 27px;



	   width: 18px;



	   position: relative;



	   left: -18px;



	   background: url(images/Layout/box.png) no-repeat 0 0 !important;



	   background: url(images/Layout/box.GIF) no-repeat 0 0;



}







/* Rules for the bottom corners and border */







.bb {



	   background: url(images/Layout/box.png) no-repeat 100% 100% !important;



	   background: url(images/Layout/box.GIF) no-repeat 100% 100%;



	   margin: 0 0 0 12px;



	   height: 14px;



}







.bb div {



	   height: 14px;



	   width: 12px;



	   position: relative;



	   left: -12px;



	   background: url(images/Layout/box.png) no-repeat 0 100% !important;



	   background: url(images/Layout/box.GIF) no-repeat 0 100%;



}







/* Insert the left border */







.i1 {



	   padding: 0 0 0 12px;



	   background: url(images/Layout/borders.png) repeat-y 0 0 !important;



	   background: url(images/Layout/borders.GIF) repeat-y 0 0;



}







/* Insert the right border */







.i2 {



	   padding: 0 12px 0 0;



	   background: url(images/Layout/borders.png) repeat-y 100% 0 !important;



	   background: url(images/Layout/borders.GIF) repeat-y 100% 0;



}







/* Finally, the appearance of the main content inside the borders needs controlling. Use this to set the background color (ensure it matches your corner and border images!) and insert some padding between the borders and the content  */







.i3 {



	   background: #FFF;



	   border: 1px solid #FFF;



	   border-width: 1px 0;



	   padding: 0 5px;



}







/* CSS for the box ends here */











/* Footer */











#footer {



        clear:both;



         text-align:center;



         background-color: #2B2B55;



}







/* Image control.  First we define stuff common to ALL images on the page.  It is then up to other styles to override these.  By default, all images will have a 2px border, and bottom and right margins of 5 px.  They will all float left. */







img {



	   float: left;



	   margin: 0px 5px 2px 5px;



	   border: 2px solid #000;



}







/* I don't want borders on the logo images */







.logo img { border: 0; }







/* For the larger images, I don't want them to float.  I also declare a top margin to space the header and image apart, and also increase the border width slightly.  I also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */







#mainImage {



			   display: block;



			   float: right;



			   margin-top: 4px;



			   border: 3px solid #000;



}







/* drop shadow effect for the gallery thumbnails.  Sadly this requires a div to be wrapped around the image markup, which is a shame */







.img-wrapper {

        background: url(images/Layout/shadow.GIF) no-repeat bottom right;

        clear: right;

        float: left;

	position: relative;

        display: inline;



}



.img-wrapper img {

          background-color: #fff;

          border: 1px solid #000;

          padding: 4px;

          display: block;

          margin: -5px 5px 5px -5px;

          position: relative;

        }





/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */







.thumbnails {



			   margin: 0 0 20px 50px;



}







/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */







.spacer {



			   clear: both;



}







#logo {border: 0 0 0 -20px} 







/* end image control */











/* Highlighting the current page */

body.home #mainNav a#home,



body.purpose #mainNav a#purpose,



body.developmentTeam #mainNav a#developmentTeam,



body.partnerships #mainNav a#partnerships,



body.support #mainNav a#support,



body.becomingInvolved #mainNav a#becomingInvolved,



body.missionTrips #mainNav a#missionTrips,



body.missionHouse #mainNav a#missionHouse,



body.disasterRelief #mainNav a#disasterRelief,



body.links #mainNav a#links,



body.videos #mainNav a#videos,



body.mississippi #mainNav a#mississippi {



	          color: #fff;



}







body.home #mainNav a:hover#home,



body.purpose #mainNav a:hover#purpose,



body.developmentTeam #mainNav a:hover#developmentTeam,



body.partnerships #mainNav a:hover#partnerships,



body.support #mainNav a:hover#support,



body.becomingInvolved #mainNav a:hover#becomingInvolved,



body.missionTrips #mainNav a:hover#missionTrips,



body.missionHouse #mainNav a:hover#missionHouse,



body.disasterRelief #mainNav a:hover#disasterRelief,



body.links #mainNav a:hover#links, 



body.mississippi #mainNav a:hover#mississippi,

{



	          color: #000;



}



#primary content #articles { line-height=0.2em;

            font-size=75%;

}



*/ Rules for tables */



table {

          border-collapse: collapse;

          width: 100%;

          border: 1px solid #666;

}



th, td {

          padding: 1em 1em;

}



col {

          border-right: 1px solid #ccc;

}



col#albumCol {

          border: none;

}



thead {

          background: #ccc url(images/Layout/bar.GIF) repeat-x left center;

          border-top: 1px solid #a5a5a5;

          border-bottom: 1px solid #a5a5a5;

}



th {

          text-align: center;

}





.odd {

          background-color: #edf5ff;

}



tr:hover {

          background-color:#3d80df;

          color: #fff;

}



thead tr:hover {

          background-color: transparent;

          color: inherit;

}



#flickr {text-align: center;}





/* Rules for forms */



fieldset {

          margin: 1em 0;

          padding: 1em;

          border : 1px solid #ccc;

          background: #f8f8f8;

}



legend {

          font-weight: bold;

        }



label {

          float: left;

          width: 10em;

        }



input {

          width: 200px;

        }



/* for the comments box */

input[type="text"] {

          width: 200px;

        }



input.radio, input.checkbox, input.submit {

          width: auto;

        }



input.radio {

          float: left;

          margin-right: 1em;

        }



input:focus, textarea:focus {

          background: #ffc;

        }



input[type="text"], textarea {

          border-top: 2px solid #999;

          border-left: 2px solid #999;

          border-bottom: 1px solid #ccc;

          border-right: 1px solid #ccc;

        }



#remember-me label {

          width: 4em;

        }



* html .feedback{

          width: 10em;

        }



form p {

          position: relative;

        }



.feedback {

          position: absolute;

          margin-left: 11em;

          left: 200px;

          font-weight: bold;

          color: #760000;

          padding-left: 18px;

          background: url(images/error.png) no-repeat left top;

        }