/*  
Theme Name: LivingOS Alpha (Modified)
Theme URI: http://www.livingos.com/
Description: St Matthew's theme
Version: 3.2
Author: Tim Hyde (modified by Rick Parsons)
Author URI:  http://www.livingos.com/

Drop-down menu from article by HTML Dog at http://www.htmldog.com/articles/suckerfish/dropdowns/

Everthing else:
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5  License
http://creativecommons.org/licenses/by-nc-sa/2.5/

The colours used in the St. Matthew's version of the theme are.
#dadada		Mid grey for outside the window area
#f3f3f3		A lighter grey for the 5px window border
white		For the main content background and the footer text
black		For the majoriy of the text
#8e1f0b		Deep red for the bulk of the theme colours
#334666		Airforce blue for the theme secondary and hover colour.
#5f1106		Darker red to indicate selected tab.
#6692cc		Paler blue for hover against Deep red footer
various greys	Unchanged for the forms.

Throughout this code the html>page hacks are there so that IE6 doesn't see the real values

*/

/* {
  margin: 0;
  padding: 0;
  border: 0;
}*/

/*-------body stuff------*/

body {margin: 0;
padding: 20px;
background-color: #dadada; /* The darker grey border */
font: normal 75% 'Lucida Grande', 'Lucida Sans Unicode', sans-serif;
line-height: 1.5em;}

/* The sidebar image is 228px wide allowing for a 215 band of text */
#page {background: white right url(images/sidebar.jpg) repeat-y;
text-align: left;
margin: 0 auto; /* keeps it in the middle of the screen */
padding: 0;
position: relative;
/* The entire template's width is set in this class. It is the same as the width of all the banner images */
width: 748px;
border: 5px #f3f3f3 solid;} /* a pale grey border around everything */

#header {padding: 0;
/* margin: 0; */
position: relative;
margin: 0 auto;
/* border: 1px solid black; /* debug */
width: 100%;
background: white;}

#headerimg {margin: 0;
width: 100%;
padding:0px;
/* background-image: url(images/banner-.jpg); /* this is the banner that is displayed if all else fails */
/* background-repeat: no-repeat; */
height: 180px; /* This is the height of all the banner images */
margin: 0;
padding: 0;
/* border: 1px solid red; /* debug */
}

#page hr {display:none;
clear:both;} /* mostly to clear the floats in the main navigation */

h1, h2, h3, h4, h5, h6 {font-weight: normal;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
color: #8e1f0b;}

/* Different sizes for each header */
h2 {font-size: 1.7em;}
h3 {font-size: 1.5em;}
h4 {font-size: 1.3em; color: #334666; clear: left;}
h5 {font-size: 1.1em; clear: left;}

a {color: #8e1f0b;
text-decoration: none;}

a:hover {color: #334666;}

strong {font-weight:bold;}

em {font-style:italic;}

/*--------images-----------*/

img {padding: 2px;
border: 1px #8e1f0b solid;
margin: 5px;
max-width: 100%}

a img {border: 1px #8e1f0b solid}

a:hover img {border: 1px #334666 solid}

img.centred, img.centered, img.aligncentre, img.aligncenter, div.centred, div.centered, div.alignecentre, div.aligncenter {display: block;
margin-left: auto;
font-size: 0.8em;
margin-right: auto;}

img.logo, a:hover img.logo {border: 0;
vertical-align: middle;}

img.alignleft, img.alignright, img.logoleft, img.logoright {display: inline;}

img.logoleft {float: left;
border: 0;}

img.logoright {float: right;
border: 0;}

div.alignleft, div.alignright {margin: 5px;
font-size: 0.8em;
text-align: center;}

a:hover img.logoleft, a:hover img.logoright {border: 0;}
a.scripturizer_newwindow img {border: 0;
margin:0;}

/* ----- forms ------- */

input, textarea {background: #f8f8f8;
border:1px solid #999999;
border-color:#999999 #eeeeff #eeeeff #999999;
padding:2px;
color: #444444;}

input:focus, textarea:focus {background: #ffffff;}

input:hover, textarea:hover {background:#ffffff;
cursor:text;}

input#submit {border: 1px #0f0000 outset;
background-color: #e9e9e9;}

input#submit:hover {cursor: default;
background-color: #fafafa;}

/*----------content div parameters---------*/

#content {float: left;
padding: 0 0 20px 25px;
margin: 0;
/* width to allow for side bar */
/* border: 1px solid blue; /* debug */
width: 470px; }

#content h2 {
margin-top: 15px;
/* border: 1px solid red; /* debug */
}

#content h3 {clear: both;}

/* Make it extra clear that the titles are links */
#content h3 a:hover, #content h2 a:hover {text-decoration: underline;}

/*-------sidebar----*/

#sidebar {float:right;
padding: 10px 0 10px 0;
margin-left: 15px;
margin-right: 5px;
width: 205px; /* the real width should be 215px; */
/* border: 1px solid green; /* debug */
font-size: 1.1em;
text-align:left;}

html>body #sidebar {width: 215px;}

#sidebar h2 {font-weight: normal;
font-family: "Trebuchet MS", Trebuchet, Verdana, Helvetica, Arial, sans-serif;
margin-bottom: 0.4em;
font-size: 1.4em;}

#sidebar h2 a:hover {text-decoration: underline;
color: #334666;}

#sidebar h3 {font-size: 1.1em;
font-weight: bold;
padding-left: 10px;
margin-bottom: 0;}

#sidebar p {padding-right: 15px;
padding-left: 10px;
text-align: left;
/* border: 1px solid red; /* debug */
margin: 0;}

#sidebar p img {margin-left: -10px; margin-right: -10px;} /* this is just for IE6 */

html>body #sidebar p img {margin-left: 0px; margin-right: 0px;}

#sidebar h2 img {margin:0; padding: 0; border: 0; vertical-align: text-top} /* for RSS button */

#sidebar ul {margin: 0;
padding: 0;
list-style-type: none;
font-size: 1em;}

#sidebar ul.quick{margin: 0;
list-style-type: none;
}

#sidebar ul.quick li{
background: url("images/list2.png") no-repeat 0 0.25em;
margin-left: 0.8em; /* gap in front of bullet */
padding-left: 1.3em; /* 1 + gap after bullet */
}

#sidebar li {margin: 5px 0 3px 10px;}

#sidebar li a {color: black;}

#sidebar li a:hover, #sidebar h3 a:hover {color: #334666;}

/* event styling */
#sidebar .rs_event_sb_title {font-weight: bold;}
#sidebar div.rs_event_sb a {color: #8e1f0b;}
#sidebar div.rs_event_sb a:hover {color: #334666;}
#sidebar div.rs_event_sb p {padding-left: 0}

/*-----------posts and pages------------*/

.post, div.page, .rs_event {margin: 15px 0;
padding: 0;
font-size: 1.1em;
background: white;
/* border: 1px solid red; /* debug */
clear: both; /* start afresh - it also helps to avoid problems with the navigation stuff */
line-height: 1.5em;
text-align: justify;}

/* This is for posts only which need separating in the list a bit */
.post .entry, .rs_event .entry {border-bottom: dotted #999999;}
/* The dotted line at the bottom of each event cuts through any big pictures which can show if there is transparency. I haven't found a way to move it down below the pictures. */

/* This is not what I wanted but it seems to be the only way to stop the bullets overlapping any left floated image */
.post ul, .post ol, div.page ul, div.page ol, .rs_event ul, .rs_event ol
{list-style-position: inside;
list-style-type: disc;}

small {font-size: 0.8em;
line-height: 1.5em;
color: #666666}

.postmetadata {font-size: 0.8em;
display: block;
color: #666666;
clear: both;
text-align: right; }

/* event styling */
.post .page_event_title{font-weight: bold}

.rs_event > ul {margin: 0;
padding: 0;
list-style-type: none; }

.rs_event h3 a, .rs_event h4 {margin-bottom: 0;
margin-top: 0}

/*-------search form-------*/

#search_frm {position: absolute;
top: 0px;
left: 50%;
margin: 0;
padding: 5px;
width: 740px;
margin-left: -375px;
font-size: 0.9em;
text-align:right;}

input#s {width: 15%;}

#searchsubmit {display:none;}

/* comments - for prayer requests */
.commentlist {list-style-type: none;}

#commentform input {width: 170px;
padding: 2px;
margin: 5px 5px 1px 0;}

#commentform textarea {width: 100%;
border: 1px #8e1f0b solid;
padding: 2px;}

#commentform #submit {margin: 0;
float: right;}

li.comment {border-bottom: dotted #999999;}

.prayerauthor {text-align: right;
margin-top: 0;}

/*-------main navigation----*/

/*thanks to http://www.htmldog.com/articles/suckerfish/dropdowns/ */

/* This has been set for a 748px width display. 9 x 81 + 8 gaps - I don't know
	where the extra pixel goes */

#nav, #nav ul {
float: left;
width: 100%;
list-style: none;
background: #8e1f0b; /* the main tab colour */
padding: 0;
margin: 0;}

#nav a {display: block;
width: 71px; /* the width of a top level tab is this value + 2 x padding = 81 */
color: white;
text-decoration: none;
text-align: center;
padding: 0.25em 5px; /* there is a min of 5px of padding either side of the text */
border-right: 1px solid #D3D3D3; /* the gap between the tabs. Grey reduces the contrast */
height:19px;}

html>body #nav a {width: 73px;} /* in this case the IE6 value above makes more sense */

#nav li {float: left;
padding: 0;
width: 82px;} /* IE6 requires one pixel less for some reason */

html>body #nav li {width: 83px;} /* Two more than tab width, I don't know why */

#nav li ul {position: absolute;
left: -999em;
height: auto;
width: 164px; /* the width of a Level 2 tab for IE6 */
font-weight: normal;
margin: 0;}

html>body #nav li ul {width:166px;} /* the width of a Level 2 tab = 2 x Level 1 value */

#nav li li {padding-right: 10px;
width: 143px} /* These control the widths of the hover and highlight colours somehow */

html>body #nav li li {width: 155px;} /* I don't understand the width values */

#nav li ul a {width: 143px; /* This one is the same */
border-right: none;}

html>body #nav li ul a {width: 155px;} /* and again */

#nav li ul ul {display: none;} /* Don't need third level tabs */

/* there is enough here to allow three levels of dropdown I think */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {left: -999em;} /* this shoves stuff that should not be visible out of view */

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {left: auto;} /* and this brings it back again */

#nav li:hover, #nav li.sfhover {background: #334666;} /* the tab hover colour */

/* highlight the selected tab and it's parent */
#nav li.current_page_item, #nav li.current_page_parent, #nav li.current_page_ancestor
{ margin-left: 1px; background: #5f1106}

/*---------top h1 title--------------*/

/* This is where the real header images go. There is no text. */
#header h1 {
/* font-size: 0; */
position:absolute;
top: 0; left: 0;
margin: 0;
width: 100%;
padding: 0;
/* border: 1px solid blue; /* debug */}

#header h1 img {border: 0; margin: 0; padding: 0;
/* border: 1px solid green; /* debug */}

/*-----------footer-----------*/

#footer {clear: both;
background: #8e1f0b;
padding: 0px 25px 5px 25px;
font-size: 0.8em;
line-height: 0.8em;
text-align: center;
border-top: solid 1px #999; /* a narrow dark grey line over the footer */
margin-bottom: 0;
color:white;}

/* The footer text is too widely spaced vertically in IE6 but I can't be bothered to fix it */

#footer a {color: white;}

#footer a:hover {color: #6692cc;}

/* These are for the admin stuff below the footer notes */
#footer ul{list-style-type: none;}

#footer ul li {display: inline;
padding: 0 1em;}

/* navigation between pages of posts and search results */
.navigation {display: block;
text-align: center;
/* border: 1px solid green; /* debug */
margin-top: 10px;
margin-bottom: 45px;}

.navigation a {color: #334666;}

.alignright {float: right;}

.alignleft {float: left}

.centred, .centered {text-align: center;}

td, th {vertical-align: top;}