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

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

/* sets max width page = container + side panel*/
#container {width:700px;}

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

/* -------------------- SIDEBAR & MENU --------------------*/
/* define sidebar & menu properties nb. background-color:#841018 for sidebar */
iframe.side {position:absolute; top: 95px; left:0px; width:146px; height:500px;}

iframe.butts {height:100px;}
iframe.butts a {position: relative; text-decoration: none;}

body#sideBar { background-color:#841018; background-image:none;}
body#sideBar img {position:absolute; left:50px; top: 400px; width:51px; height:75px; border:none }

div#pageMenuBox {position:absolute; left:5px; top:8px; width:134px; padding:2px;}
a.mainMenuItem
		{display:block; margin-bottom:1px; padding:1px 1px 1px 5px; width:123px;
		text-decoration:none; background-color: #FFFF99; color:#881018;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666; border-left:solid 3px #666666;
		font: 0.9em arial, sans-serif}
a.mainMenuItem:hover
		{color:#881018; background-color:#FFFFBD;
		border: solid 3px #cccccc; border-top: solid 3px #666666; border-right:solid 3px #666666;
		}
a.mainMenuItem:active {color:#FFFF99; background-color:#800080}

/*------------------------ Define general button --------------*/
/* define width and title locally */
a.boxButton
		{display:block; margin-bottom:1px; padding:2px; width:100px; height:4.5em;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.boxButton1
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:1.5em;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.boxButton2
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:2.5em;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.boxButton3
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:3.8em;text-align:center;
		color:#200000; font:bold .8em arial, sans-serif;
		text-decoration:none; background-color: #FFCC99;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
a.boxButton4
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:6.4em;text-align:center;
		color:#200000; font:bold .8em arial, sans-serif;
		text-decoration:none; background-color: #CCCCCC;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
a.boxButton5
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:4.4em;text-align:center;
		color:#200000; font:bold .8em arial, sans-serif;
		text-decoration:none; background-color: #CCCCFF;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
		

a.boxButtonhust
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:6.8em;text-align:center;
		color:#200000; font:bold .8em arial, sans-serif;
		text-decoration:none; background-color: #FFCC99;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
a.boxButton3emph
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:3.0em;text-align:center;
		color:#200000; font:bold 1em arial, sans-serif;
		text-decoration:none; background-color: #DDDDFF;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
a.boxButton3Hemph
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:5.3em;text-align:center;
		color:#200000; font:bold 1em arial, sans-serif;
		text-decoration:none; background-color: #DEB887;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
a.boxButton3HHemph
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:8.5em;text-align:center;
		color:#200000; font:bold 0.9em arial, sans-serif;
		text-decoration:none; background-color: CornflowerBlue;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
a.boxButton3HHgold
		{display:block; margin-bottom:1px; padding:2px; width:200px; height:4.5em;text-align:center;
		color:#200000; font:bold 0.9em arial, sans-serif;
		text-decoration:none; background-color: gold;
		border:solid 3px #cccccc;
		border-bottom:solid 3px #666666;
		border-left:solid 3px #666666;
		}
		
td.boxbutton3
		{margin-bottom:1px; padding:2px;text-align:center;
		color:#2000FF; 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#map-canvas {border:solid 1px #200000; width: 700px; height: 500px;}
        
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%}

h1.art {font-family: "Comic Sans MS", cursive, sans-serif; color: #F00000; font-size: 250%; text-align:center;}

/*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;}
.HT {color: #444444;font-size: 120%; text-align: justify;
    text-justify: inter-word;}
    
.art {font-family: Arial, sans-serif; color: #444444;font-size: 120%; text-align: justify;
    text-justify: inter-word;}
/* -------------------- 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 default background */
img		{border:solid 1px #FFFF99}
img.icon	{borders: 0; padding:0; float:right;}
img.wrap	{border-style:none; padding:10px; float:right;}

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

/* define image border */
img.pictureborder {border:1px solid #200000;}
img.flowtext {border:1px solid #200000; margin-left: 1.5em;}

/* 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; 
		font-style: italic; 
		text-align: center;}
div.htpic {clear:none; vertical-align:top; 
		margin:5px; 
		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:1px; padding:1px; border:thin solid #400000; background-color:#FFFF99; font-size:90%; z-index: 0;}
.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%;}

div.newflag	{
	z-index: 3;

}
/* 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;
	border: solid 1px #ffffff;
	padding: 2px;
	margin-left: 2em;
	}

/* 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; border:1px;}

/* 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 }
td.footnote   {color: darkred;}
table.inset	{ vertical-align: top; width: 100%; font-size:90%; }
table.insetleft	{ float:left; clear:left; vertical-align: top; width: 49%; font-size:80%; border-width: 5px;}
table.insetleftwk	{ float:left; clear:left; vertical-align: top; width: 89%; font-size:80%; border-width: 5px;}
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;}


h1.mobile a	{padding-top:5px;padding-bottom:5px;padding-left:5px;padding-right:5px;
		margin-left:25px;margin-right:25px;
		text-decoration: none;}
/**/
/* end */