body {


	margin: 0; 


	padding: 0; 


	width: 100%; 


	background: white url(r-stripe.gif) top center;


	font: 13px/1.33em Arial, Helvetica, sans-serif;


	color: gray;


}





#Site_Wrapper {


width: 952px;


margin: 0 auto;


padding: 0 14px;


background: url(full-shadow-stripe.gif) repeat-y top right white;


}





/* The masthead is everything in the banner above the navigation */





#topbar {


background: url(logo.gif) no-repeat 20px 20px #f7941d; /* ff7c00 */


width: 952px;


height: 131px;


position: relative; /* to allow absolute positioning of contents */


padding: 0;


margin: 0 0 8px;


}





#masthead {


background: url(phone.gif) no-repeat left 5px  #f7941d;


height: 50px;


width: 170px;


color: white;


font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;


font-size: 26px;


padding: 20px 0 0 50px;


position: absolute;


top: 20px;


right: 10px;


}





/* Hacks to hide elements inserted by The Engine */





#PageTitle { display: none; }


#masthead form { display: none; }





/* End hacks */





#mainContent {


background: white;


padding: 0;


margin: 0;


width: 952px;


}





/* To make the multi column layout, the children of mainContent are


   all floated.  To ensure mainContent stretches down to accommodate


   them, non-floated generated content is inserted with the :after


   pseudo-element followed by hacks for those browsers that do not support it. */





#mainContent:after {


    content: "."; 


    display: block; 


    height: 0; 


    clear: both; 


    visibility: hidden;


}





#mainContent {display: inline-block;}





/* Hides from IE-mac \*/


* html #mainContent {height: 1%;}


#mainContent {display: block;}


/* End hide from IE-mac */





/* Position the columns */





#middlebar {


background: transparent;


float: left;


padding: 2px 0 0 0;


margin: 0;


width: 709px;


}





#rightbar {


width: 234px;


float: right;


padding: 2px 0 0 0;


margin: 0;


background: transparent;


}





/* leftbar is inserted by the engine even if it does not exist in the config 


   so display is set to none to avoid unwanted interactions between boxes. */





#leftbar {


display: none;


}





/* homepage_box is needed so that the News can be positioned next to the main page


   content with both beneath a full width image.  */





.homepage_box


{


width: 345px;


float: left;


margin-left: 15px;


display: inline;   /* standards compliant hack to prevent 


                      doubled float-margin bug in IE 5 & 6 */


}





/* Start News Box */





.index_table {


background: url(news_box.jpg) transparent no-repeat;


width: 250px;


height: 184px;


padding: 0;


margin: 0 0 0 15px;


display: none;


}





.index_table ul {


list-style-type: none;


margin: 0;


padding: 0;


}





.index_table ul ul {


margin-left: 0;


margin-bottom: 12px;


}





.index_table a {


color: white;





font-weight: 900;





}





#Content .index_table h1 {


margin: 0.6em 0 0;


color: red;


font-size: 1.6em;


font-weight: 100;


}





.index_table h1 a {


text-decoration: none;


color: red;


font-weight: 100;


}





.index_table a {


text-decoration: underline;


color: red;


}





/* End News box */











/* Generic side box setup.  Ideally all sideboxes


   should have a class "sidebox" for this.  */





#rightbar div {


width: 234px;


padding: 0 0 9px 0;


margin: 0 0 9px;


border-top: 7px solid #ff8200;


border-bottom: 1px solid #ff8200;


font-family: Helvetica, Arial, sans-serif;


font-size: 12px;


font-weight: normal;


}





#rightbar div.Chocbox {


border-top: none;


}





#rightbar div.search {


border: none;


}





#rightbar div.search input.txt {


float: left;


width: 60%;


margin-right: 3px;


}





#rightbar div div { /* IE 6 hates children */


border: none;


margin: 0;


}





#rightbar div h1 {


height: 19px;


text-transform: capitalize;


color: #f00;


font-weight: bold;


font-size: 1em;


line-height: 1em;


margin: 0 0 13px 0;


padding: 7px 20px 9px 12px; /* to centre over background, align box content correctly  */


font-family: Helvetica, sans-serif;


font-size: 18px;


font-weight: bold;


border-bottom: solid 1px #ff8200;


}





#rightbar div h2 {


display: none;


}





#rightbar div h1 a {


background: url(arrow.gif) no-repeat right 5px;


padding-right: 14px;


}





/* Ideally this would have been a child selector, but as


   IE<7 won't like it, we can use a general selector and


   will need to compensate on further nested elements */





#rightbar div * {


margin: 0 12px;


padding-bottom: 13px;


}





#rightbar div * * {


margin: 0;


padding-bottom: 0;


}





#rightbar div.futureservice h1 {


background: url(redheader.gif) no-repeat;


color: white;


}





#rightbar div.futureservice {


border-bottom: 3px solid #f29400;


}





#rightbar div.futureservice p {





font-weight: bold;


}





#rightbar div.searchbox {


border: none;


padding: 1px 0;


background-color: rgb(165, 165, 165);


text-align: left;


}





#rightbar div.searchbox * {


padding: 0;


}





#rightbar div.searchbox h1 {





padding: 0;


background: transparent;


text-transform: lowercase;


}





#rightbar div.searchbox form {


margin: 10px;


}








#rightbar div.searchbox input.txt {


width: 137px;


margin: 0 0 5px;


padding: 0;


}





#rightbar div.Quicklinks ul {


list-style-type: none;


padding-left: 0; /* remove list indent */


font-size: 1.1em;


}





#rightbar div.Quicklinks * {


vertical-align: middle;


}








#rightbar li img {


margin-top: -4px;


}





#rightbar .newswidget h3 {


display: none;


}





#rightbar .newswidget ul {


list-style-type: none;


margin: 0 12px;


padding: 0;


}





#rightbar .newswidget .news_headline {


float: left;


margin-right: 6px;


}








#rightbar div.New_to_HTCD p {


background: url(new-to.png) no-repeat;


padding: 3px 3px 3px 100px;


margin-left: 4px;


margin-right: 4px;


color: white;


width: 123px;


height: 62px;


}





.homepage_box h1 {


font-size: 1.5em;


color: #d5001e;


margin: 0 0 1.5em;


}





.homepage_box h2 {


font-size: 1.5em;


color: black;


margin: 0;


}





.homepage_box p {


margin: 0;


padding: 0;


}






































#nav {





position: absolute;


right: 0;


bottom: -10px;


}





#nav ul {


list-style-type: none;





}





#nav li {


float: left;


width: 100px;


}





#nav li a {


display: block;


color: #c9262a; /* can't put a more generic rule in because agent stylesheet has higher specificity on anchor styling */


text-decoration: none;


text-transform: uppercase;


text-align: center;


padding-bottom: 20px;


/*height: 30px;*/


font-weight: bold;


}





#nav li a:hover {


background: url(nav-indicator.gif) bottom center no-repeat;


color: white;


}





#nav ul:after {


content: ".";


height: 0px;


visibility: hidden;


clear: both;


}








/* calendars */





#event_table {


border: 1px solid gray;


border-collapse: collapse;


width: 708px;


clear: both;


}





#event_table th {


background: gray;


color: white;


text-align: center;


height: 1.2em;


}








#event_table td h4,


#event_table td p,


#event_table th h6,


#event_table td {


margin: 0;


padding: 0;


}





#event_table td {


background: white;


color: black;


text-align: left;


vertical-align: top;


width: 100px;


height: 100px;


border: 1px solid gray;


border-collapse: collapse;


overflow: hidden;


}











#event_table th h6 {


font-size: 11px;


}





#event_table td p {





width: 99px;


margin-bottom: -100px;


}





#event_table td p a {


background: #ffd9ad;


color: black;


font-size: 11px;


line-height: 1.2em;


display: block;


padding: 17px 0 9px 0;


margin: -17px 0 0 0;


padding: 17px 0 100px 0;


margin: -17px 0 -100px 0;


}





#event_table td br {


display: none; /* Engine inserts spurious breaks which break layout */


}





#event_table td.inactive {


background: #eee;


}





#previous_month,


#current_month,


#next_month {


color: white;


display: inline-block;


text-align: center;


padding: 0;


margin: 0;


float: left;


}





#previous_month a,


#current_month a,


#next_month a {


color: white;


}





#previous_month,


#next_month {


background: rgb(255, 130, 0);


width: 100px;


height: 23px;


border-bottom: 1px solid white;


margin-top: 24px;


font-size: 16px;


padding-top: 8px;


}





#previous_month { background: url(date-left-arrow.gif) 2px 12px no-repeat #f7941d; }





#next_month { background: url(date-right-arrow.gif) 88px 12px no-repeat #f7941d; }





#current_month {


background: rgb(255, 0, 0);


width: 201px;


height: 30px;


border: 1px solid white;


font-size: 26px;


padding-top: 14px;


margin-top: 10px;


}





#month_nav {


width: 404px;


float: right;


}





ul.overview {


list-style-type: none;


margin: 10px 0;


padding: 0;


}





ul.overview ul,


ul.overview p {


font-family: arial, sans-serif;


font-size: 0.9em;


padding: 0;


margin: 0;


}





ul.overview ul {


list-style-type: disc;


color: black;


list-style-image: url(bullet.gif);


}





ul.overview ul li {


float: left;


white-space: nowrap;


list-style-position: inside;


margin: 0 7px 0 0;


}





ul.overview li {


width: 210px;


float: left;


/*display: inline-block;


border: 1px solid green;


vertical-align: top;*/


margin: 0 10px;


height: 265px;


}





ul.overview li h2 {


color: red;


font-size: 1.4em;


margin-bottom: 2px;


}








ul.overview li li {


width: auto;


height: auto;


}





#Content dl {


width: 600px;


}





#Content dl.vertical {


width: 206px;


float: left;


margin: 0 10px;


}





#Content dt,


#Content dt a {


color: red;


width: 206px;


float: left;


font-size: 1.4em;


line-height: 1.2;


font-weight: bold;


margin: 0.9em 0 0.2em;


}





#Content dd {


margin: 0;


width: 206px;





}





a,


a:link,


a:visited {


text-decoration: none;


color: #f00;


}





a:hover {


text-decoration: underline;


color: #f00;


}





h1 {


color: red;


font-size: 2em;


margin: 10px;


}





h1+p,


#Content p:first-child {


font-size: 1.4em;


line-height: 1.3em;


color: gray;


}





#Content>p,


#Sermon_List,


#Top_Sermon_Nav,


#Bottom_Sermon_Nav,


#Sermon_Header {


margin: 0 10px;


}





#Content>h1,


#Content>h2,


#Content>h3,


#Content>h4,


#Content>h5,


#Content>h6 {


margin-left: 10px;


margin-right: 10px;


color: red;


}





#Content>h2 {


color: red;


}





#Content {


overflow: hidden;


}





#Sermon_List div.Odd,


#Sermon_List div.Even {


float: left;


margin: 2px 0;


padding: 2px;


width: 689px;


}





#Sermon_List div.Odd {


background: #ffd9ad;


}





#Top_Sermon_Nav,


#Bottom_Sermon_Nav {


font-size: 11px;


line-height: 1.3em;


margin: 10px;


}





#Top_Sermon_Nav *,


#Bottom_Sermon_Nav * {


margin: 0;


}





#Sermon_List h2 {


width: 120px;


font-size: 11px;


line-height: 1.3em;


float: left;


margin: 0;


}





#Sermon_List h2 a {


color: gray;


text-decoration: none;





}





#Sermon_List h3 {


width: 120px;


font-size: 11px;


float: left;


position: relative;


top: 13px;


left: 120px;





margin: 0;


}





#Sermon_List h4 {


	display: run-in;


	font-size: 11px;


	float: left;


	margin: 0;


}





#Sermon_List h4.sermon_title {


color: red;


}





#Sermon_List .sermon_read_more {


display: none;


}





.sermon_cal_view,


.sermon_calender_view,


#Bottom_Sermon_Nav {


display: none;


}





#Sermon_Detail {


position: relative; /* closest positioned ancestor */


font-size: 1em;


}





#Sermon_Detail * {


font-weight: normal;


font-size: 1em;


margin: 0 0 0 10px;


}





#Sermon_Detail * * {


margin: 0;


}








#sermon_desc {


margin: 10px 10px 8em 10px; /* accommodate positioned siblings */


font-size: 1.4em;


}





#sermon_sound_file {


position: absolute;


left: 0;


bottom: 9.6em;


}





#sermon_sound_file img {


vertical-align: -3px;


}





#sermon_text_file {


position: absolute;


left: 0;


bottom: 7.8em;


}





#sermon_date {


position: absolute;


left: 0;


bottom: 5.2em;


}





#sermon_time {


position: absolute;


left: 0;


bottom: 3.9em;


}





#sermon_speaker {


position: absolute;


left: 0;


bottom: 1.3em;


}





#sermon_type {


position: absolute;


left: 0;


bottom: 0;


}





#sermon_series {


/* display: none; */


}





body.contact_team #PageTitle,


body.resources #PageTitle,


body.top-sundays #PageTitle,


body.top-aboutus #PageTitle,


body.events_calendar #PageTitle,


/* ---------------- Added P. Eksteen */


body.sermons #PageTitle,


body.sermon_upcomming #PageTitle,


/* ---------------- ENDS */


body.home_page #PageTitle {


display: block;


}





body.resources #PageTitle h1 {


background: url(Church-holy-banner.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}





body.contact_team #PageTitle h1 {


background: url(Narrow-banner-church-family.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}





body.top-sundays #PageTitle h1 {


background: url(Narrow-banner-church--family11.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}





body.top-aboutus #PageTitle h1 {


background: url(Narrow-banner-church-family-09.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}





body.events_calendar #PageTitle h1 {


background: url(Narrow-banner-church-family-09.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}





/* ---------------- Added P.Eksteen */


body.sermons #PageTitle h1 {


background: url(Narrow-banner-church-family-09.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}


body.sermon_upcomming #PageTitle h1 {


background: url(Narrow-banner-church-family-09.jpg) left top no-repeat transparent;


padding: 169px 0 10px 10px;


margin: 0;


}


/* ---------------- ENDS */





body.home_page #PageTitle h1 {


background: url(/Site_files/imagerotate.php) left top no-repeat transparent;


padding: 344px 0 10px 10px;


margin: 0;


}





#rightbar .Sundays p {


padding-bottom: 2px;


visibility: hidden;


}





#rightbar .Sundays p a {


visibility: visible;


margin-bottom: -2em !important;


display: block;


}