/* CSS stylesheet modified significantly from a template by Tom Sparrow and Sam Pearce 2010/2011 */
/* NOTE on columns: There are 3 columns and the center column content is placed BEFORE the left column in the HTML
	because search engines treat content higher up the page as more important.
	Therefore various CSS adjustments are needed so that, despite the center content coming first,
	the left column is still positioned to the left of the center column.
	For more clarification please feel free to ask sparrowt@gmail.com*/

* {
    padding: 0;
    margin: 0;
} 

body {
background: #380202;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 18px;
color: #333333;;
}

img { padding: 4px 4px 4px 4px; border: none; }
a { color: #000; text-decoration: none; }
a:hover { text-decoration: underline; color : #990000; }
.align-right { float:right;}
.align-left { float:left;}


#wrap {
width: 1000px;
margin: 5px auto;
}

#top {
background: #380202 url(images/top.png) no-repeat;
padding: 15px 0;
}

#header {
background: #380202 url(images/header.jpg) no-repeat;
height: 90px;
}

#menu {
height: 30px;
line-height: 30px;
background: #380202 url(images/menu.png) repeat-y;
padding: 0 0 0 10px;
}
#menu ul {
list-style-type: none;
}
#menu ul li {
padding: 0 0 0 52px;
display: block;
float: left;
}
#menu ul li a {
font-size: 14px;
color: #000;
}
#menu ul li a:hover {
color: #990000;
text-decoration: underline;
}

#content {
background: #380202 url(images/content.png) repeat-y;
}

#left{
position:relative;
left: -570px;			/* because the left column content has been placed AFTER the center column main content in the page HTML code
						(for search engine advantage reasons) therefore left column needs to be positioned
						left by minus ( 550px(center width) + (2 * 10px (center padding)) ) */
float: left;
width: 175px;
padding: 10px 5px 10px 35px;	/*35px to the left of left column, 5 to the right */
font-size: 10px;
}
#left h2 { 
color: #990000; 
font-size: 10px;
font-weight: 600;
padding: 0 0 10px 0;
}
#left p.eventparagraph {
padding: 0 0 6px 0;
}




#center {
position:relative;		/* because the center column main content has been placed BEFORE the left column content in the page HTML code
						(for search engine advantage reasons) therefore the center column needs to be pushed to the
						right by ( 175px(left col width) + 35px (left padding on left col) + 5px (right padding on right col) ) */
float: left;
left: 215px;
width: 550px;
padding: 10px 10px 10px 10px;
}
#center p{
padding: 2px 0 2px 0;
}
#center h1 {
color: #990000;
font-size: 25px;
font-weight: normal;
padding: 0 0 5px 0;
}
#center h2 { 
color: #990000; 
font-size: 12px;
text-decoration: none;
padding: 10px 0 2px 0;
}
#center hr { height: 1px; padding: 15 0 15 0;}
#center a { color: #000; text-decoration: underline; }
#center a:hover { color: #990000; text-decoration: underline;}
#center .removepadding { padding: 0 0 0 0;} 
#center .sermon-albumart-styler { border: 1px solid #000; padding: 0 0 0 0;}
#center td.col1 { width: 162px}
#center td.col2 { width: 250px}
#center td.col3 { width: 130px}
#center td h2 { padding: 0 0 0 5px;} /* titles of sermons on the public page */
#center td h3 { padding: 0 0 0 5px; font-weight: normal;} /* name of preacher on public page */
#center #notice { /* For posting notices on the front page. Simply enclose in <div id="notice">...</div> */
/*width:460px;*/
color:#FF0000;
margin:6px auto;
padding:4px 6px;
background:#FFFFCC;
border:2px solid #FF0000;
}



#right {
position:static;		/* This, the right column, comes straight after the left column in the page HTML code
						because the center column (main content) comes BEFORE the left column content (for search engine advantage reasons).
						(so it goes     'div center'    then    'div left'    then    'div right'
						However the left column's static position WOULD naturally be where the right column should be (straight after the center)
						but the left column has been positioned to the left by 570px in order to place it to the left of the center col.
						Therefore this right column ends up in the correct place if we position it statically (i.e. where it would naturally fit) */
float: right; 
width: 175px;
padding: 10px 35px 10px 5px;	/*35px to the right of right column, 5 to the left */
font-size: 10px;
text-align: center;
}
#right h2 { 
color: #990000; 
font-size: 10px; 
font-weight: 600;
}




#bottom { 
background: #380202 url(images/bottom.png) no-repeat;
padding: 15px 0;
}

/* This is for the login box */
#overlay {
	visibility: hidden;
	position: absolute;
	left: 0px;
	top: 0px;
	width:100%; 
	height:100%; 
	text-align:center; 
	z-index: 1000;
}
#overlay div {
	width:300px; 
	margin: 100px auto; 
	background-color: #fff; 
	border:1px solid #000;
	padding:15px; 
	text-align:center;
}

#admin {
	background-color:#999;
	border: thick;
	height: auto;
	margin-left: auto ;
  	margin-right: auto ;
	width: 550px;
	padding: 10px 10px 10px 10px;
}

/* Stuff for Buttons */
.clear { /* generic container (i.e. div) for floating buttons */
    overflow: hidden;
    width: 100%;
}

a.button {
    background: transparent url('/css/images/buttonr.gif') no-repeat scroll top right;
    color: #444;
    display: block;
    float: left;
    font: normal 12px arial, sans-serif;
    height: 24px;
    margin-right: 6px;
    padding-right: 18px; /* sliding doors padding */
    text-decoration: none;
}

a.button span {
    background: transparent url('/css/images/buttonl.gif') no-repeat;
    display: block;
    line-height: 14px;
    padding: 5px 0 5px 18px;
}

a.button:active {
    background-position: bottom right;
    color: #000;
    outline: none; /* hide dotted outline in Firefox */
}

a.button:active span {
    background-position: bottom left;
    padding: 6px 0 4px 18px; /* push text down 1px */
} 

.field label  {
   float: left;
   width: 110px;
   padding-top:5px;
}

.field.text input  {
   width: 250px;
   margin-left: 2%;
   padding: 3px;
  
}
.field {
	padding-top:3px;
	padding-bottom: 3px;
}