/* Style sheet for Church In Darlington website*/
/**/
/* Site theme colours */
/*
Body - background #FFFFBD, text #200000,
Top & Side bars background #881019,
In-line boxes - background-color #FFFF99, border #400000, purple, #800080
*/
body {
	background-color:#FFFFBD;
    background-image:url(images/pageBackground.jpg);
	background-repeat: no-repeat;
	background-position: left top;
	color: #200000;
	font-family: "Times Roman", "Times New Roman", serif;
	font-size: 100%;
	}
	
/* -------------------- PAGE DEFINITION ---------------------- */
/* define whole page wrapper */
div.wrapper {margin:0px auto; width:875px}

/* define main page container */
#container {position:absolute; top:100px; left:175px; width:auto; margin-right:0px;}


/*#container {width:expression(document.body.clientWidth > 700? "700px": "auto" )} */
/* sets max width for IE */
#container {width:700px;} /* sets max width for other browsers if IE fails */

/* -------------------- SIDEBAR & MENU --------------------*/
/* define sidebar & menu properties nb. background-color:#881019 for sidebar */
iframe.side {position:absolute; top: 95px; left:0px; width:147px; height:500px;}
body#sideBar { background-color:#881019; background-image:none;}
body#sideBar img {position:absolute; left:50px; top: 400px; width:51px; height:75px; border:none }
div#pageMenuBox {position:absolute; left:6px; top:8px; width:136px; padding:2px;}
a.mainMenuItem
		{display:block; margin-bottom:1px; padding:1px 1px 1px 5px; width:125px;
		text-decoration:none; background-color: #FFFF99; color:#881019;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666; border-left:solid 3px #666666;
		font: 0.9em arial, sans-serif}
a.mainMenuItem:hover
		{color:#881019; background-color:#FFFFBD;
		border: solid 3px #cccccc; border-top: solid 3px #666666; border-right:solid 3px #666666;
		}
a.mainMenuItem:active {background-color:#800080}

/*------------------------ Define general button --------------*/
/* define width and title locally */
a.boxButton
		{display:block; margin-bottom:1px; padding:2px; width:100px; height:1.2em;text-align:center;
		color:#200000; font:bold 1em arial, sans-serif;
		text-decoration:none; background-color: #FFFF99;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666; border-left:solid 3px #666666;
		}
a.boxButton:hover
		{color:#200000; background-color:#FFFFBD;
		border: solid 3px #cccccc; border-top: solid 3px #666666; border-left:solid 3px #666666;
		}
a.boxButton:active {background-color:#800080}

/* -------------------- FIND CHURCH PAGE -----------------------*/
/* define navigation boxes link properties for list-church pages */
a.boxNavigate
		{display:block; margin-bottom:1px; padding:2px; width:300px; height:1.2em;text-align:center;
		color:#200000; font:bold 1em arial, sans-serif;
		text-decoration:none; background-color: #FFFF99;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666; border-left:solid 3px #666666;
		}
a.boxNavigate:hover
		{color:#200000; background-color:#FFFFBD;
		border: solid 3px #cccccc; border-top: solid 3px #666666; border-left:solid 3px #666666;
		}
a.boxNavigate:active {background-color:#800080}

div#pageFindChurch {margin:auto; width: 300px; clear:both;}
div#pageFindChurch a.boxNavigate {width:300px}
div#pageFindChurchGroup {margin:auto; width: 400px; clear:both;}
div#pageFindChurchGroup a.boxNavigate {width:400px}

/* -------------------- GOOGLE MAP PAGE ----------------------*/
div#mapCanvas {border:solid 1px #200000}
div#bubble {color:green} 
div#mapNotes {width:auto}
/* -------------------- TEXT PARAMETERS ----------------------*/
/* define general font properties */
h1,h2,h3{font-family: Arial, sans-serif;}
h1 {font-size: 180%; text-align:center;}
h2 {font-size:140%}
h2.left {font-size:140%; text-align:left}
h3 {font-size:110%}
/*hr {color:#881018; }*/
p:first-letter.initial {font-size: 295%; font-weight: bold;  float: left;}
.textaligncenter {text-align:center}
.textalignleft {text-align:left}
.textalignright {text-align:right}
.textsize12em  {font-size:1.2em}
.boldunderline  {font-weight: bold; text-decoration: underline;}
.italic  {font-style: italic;}
.bold    {font-weight:bold}
.bolditalic {font-weight:bold; font-style:italic}
.date  {font-size: 150%; font-weight: bold; vertical-align: middle;}
.details { text-align: justify; }
.spacebelow { text-align: center; margin-bottom: 6px;}

/* -------------------- LISTS, IMAGES etc ----------------*/
/* define properties for dt tag in ul tags */
dt { font-size:1.1em; font-family: "Arial", sans-serif}

/* define default border for img tag .i.e no visible border on defauly background */
img		{border:solid 1px #FFFF99}

/* define image border when used in link */
a:hover img  {border:solid 1px #800080}

/* define image border */
img.pictureborder {border:1px solid #200000;}

/* define properties for name in a tag */
a[name]  {color:#200000; text-decoration:none}

/* -------------------- DEFAULT LINK PROPERTIES ----------------- */
/* define general link properties */
a    {color: #200000; text-decoration: underline; }
a:hover  {color:#800080; text-decoration: none; }

/* -------------------- MULTI COLUMN FORMATS ----------------------- */
/* define various multi-column parameters */
div.picture {float:right; clear:none; vertical-align:top; margin:5px; border:none ; font-style: italic; text-align: center;}
div.col2left {float:left; width:49%;}
div.col2right {float:right; width:49%;}
div.colx2 {float:left; width:50%}
div.colx2varwidth {float:left}
div.colx3 {float:left; width:33%}

/* -------------------- BOXES --------------------------------- */
.Boxinfo {width:40%; height:80%; float:right; margin:5px; padding:10px; border:thin solid #400000; }
.Box30  {width:30%; float:right; margin:10px; padding:10px; border:thin solid #400000; background-color:#FFFF99; font-size:90%;}
.Box40  {width:40%; float:right; margin:10px; padding:10px; border:thin solid #400000; background-color:#FFFF99; font-size:90%;}
.Box40L	{width:40%; float:left; margin:10px; padding:10px; border:thin solid #400000; background-color:#FFFF99; font-size:90%;}
.Box30Rtc {width:30%; float:right; text-align:center; margin:10px; padding:10px; border:thin solid #400000; background-color:#FFFF99; font-size:90%;}
.Box40Rtc {width:40%; float:right; text-align:center; margin:10px; padding:10px; border:thin solid #400000; background-color:#FFFF99; font-size:90%;}

.boxBackc {text-align:center; margin:5px; padding:2px; border:thin solid #400000; background-color:#FFFF99; font-size:90%;}

/* define navigation return link properties for church data pages - change width locally as required */
a.boxBack
		{display:block; margin-bottom:1px; padding:2px; width:250px; text-align:center;
		text-decoration:none; background-color: #FFFF99;
		color:#200000;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666; border-left:solid 3px #666666;
		font:bold 1em arial, sans-serif}
a.boxBack:hover
		{color:#200000; background-color:#FFFFBD;
		border: solid 3px #cccccc;  border-top: solid 3px #666666; border-left:solid 3px #666666;
		}
a.boxBack:active {background-color:#800080}


/* -------------------- CHURCH DATA PAGES -------------------------*/
/* parameters below define table etc for Church Information pages */
/* Container for all the church information */
#churchinfo {width:100%; float:left; clear:both; background-color:white; padding: 10px;
	border-top: solid 4px #cccccc; 
	border-right: solid 4px #cccccc;
	border-bottom: solid 4px #666666;
	border-left: solid 4px #666666 }
.churchname  { font-size: 200%; font-weight: bold; text-align: center; }
.titlearial {text-align: center; font-family: "Arial", sans-serif}
#churchinfo img {border:solid 1px #200000; padding:1em;}

/* container for Church name */
div.churchdata {width: 100%; float:left; clear:both; text-align: center; }
.denominationTitle {font-size: 120%; font-weight: bold;}

/* container for general comments & picture of church */
div.churchcomment{ width:100%; float:left; clear:both;}

/* container for information about services and church contacts */
div.churchcontacts {width:100%;float:left; clear:both;}

/* tables for formatting church-info contacts detail */
td.leftalign  { text-align: left;  border-width: 0px; padding: 5px }
td.rightalign { text-align: right; font-weight: bold; border-width: 0px; padding: 5px }
table.inset	{ vertical-align: top; width: 100%; font-size:90%; }
table.insetleft	{ float:left; clear:left; vertical-align: top; width: 49%; font-size:90%; }
table.insetright { float:right; clear:right; vertical-align: top; width: 49%; font-size:90%; }
td.cellright1 {vertical-align: top; width:125px; text-align: right; border-style: none; border-width: 0px; font-style:italic}
td.cellright2 {vertical-align: top; width:50px; text-align: right; border-style: none; border-width: 0px; font-style:italic}
td.cellleft  {vertical-align: top; text-align: left; border-style: none; border-width: 0px; padding-right:2px}
td.cellcentre { text-align: center; border-style: none; border-width: 0px; padding: 2px; }
.celltitle   { font-size: 110%; font-weight: bold; text-decoration:underline}

/* Box outside of church data with a reminder note */
div.reminder    { vertical-align:top; float:left; clear:both; width:95%; font-size: 90%;padding: 0px 5px; font-weight: bold; text-align: center; }

/*--------------------- SERVICE DATA PAGE --------------------*/
table#serviceTable {width:100%; clear:both; border-collapse:collapse; background-color:white;
		border-top: solid 4px #666666; 
		border-right: solid 4px #666666;
		border-bottom: solid 4px #cccccc;
		border-left: solid 4px #cccccc; }
table#serviceTable th {background-color:#FFFF99; text-align:center; line-height:2em;}
table#serviceTable th a {font-weight:bold; text-decoration:none;}
table#serviceTable th span {font:1.5em arial, verdana, sans-serif ; color:#800080;}
table#serviceTable tr {height:0.9em; border: solid 1px gray;}
table#serviceTable td.col1 {width:10%; vertical-align:top; padding: 0px 2px 0px 5px;}
table#serviceTable td.col2 {width:15%; vertical-align:top;}
table#serviceTable td.col3 {width:45%; vertical-align:top;color:#800080;}
table#serviceTable td.col4 {width:30%; vertical-align:top;}
table#serviceTable td.col4 span {font-style:italic}
/*------------------ CHRISTMAS SERVICE DATA PAGE ---------------*/
table#christmasServiceTable {
		width:100%;
		border-collapse:collapse;
		background-color:white;
		float:left;clear:both;
		border-top: solid 4px #666666; 
		border-right: solid 4px #666666;
		border-bottom: solid 4px #cccccc;
		border-left: solid 4px #cccccc; }
table#christmasServiceTable th.headerFestive {background-color:#FFFF99; color:green; text-align:center; line-height:2em;}
table#christmasServiceTable th.headerDay {background-color:#FFFF99; color:red; text-align:left; line-height:1.2em;}
table#christmasServiceTable th a {}
table#christmasServiceTable span.title {font-family: "Times Roman", "Times New Roman", serif; font-size:1.2em; color:red;}
table#christmasServiceTable tr {height:0.9em; border: solid 1px gray;}
table#christmasServiceTable td {vertical-align:middle;}
table#christmasServiceTable td.col1 {width:10%; vertical-align:top; padding: 0px 2px 0px 5px;}
table#christmasServiceTable td.col2 {width:15%; vertical-align:top;}
table#christmasServiceTable td.col3 {width:45%;font-weight:bold; font-size:1.1em; vertical-align:top;color:#800080;}
table#christmasServiceTable td.col4 {width:30%; vertical-align:top;}
table#christmasServiceTable td.col4 span.denomination {font-style:italic}
table#christmasServiceTable td span {font-size:80%;color:#881018;}
img.festivalHeader {border: 1px solid purple; padding:0px; margin:0px; height:80px; width:80px;}
img.serviceIcon {float:right; border: 0px solid white; padding:0px; height:35px; width:auto;}
/**/
/* end */