﻿/* internationalcitychurch.com : basestyle */

/*---------------- backdrop ----------------*/
body { 
	font-family: Arial; 
	font-size: 13px; 
	background-color: #111111; 
	padding: 0; margin: 0;
	background-image: none; 
	background-repeat:repeat; 
	z-index: 0; }

/*-------------------- christmas --------------------*/
.christmas_background {	background-image: url(../baseimages/backgrounds/christmas_background.jpg); }

/*---------------- base containers ----------------*/

html.cellpadding { padding: 4px; }

#wrapper { 
	width: 890px;
	margin-top: 0px;	
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    position: relative;
	left: 0px;
    top: 0px; }

/*-------------------- Header --------------------*/
#header { 
	position: absolute;
	top: 2px; 
	left: 0px;
	width: 890px; 
	height: 45px;
	z-index: 2; }

#header p.location { font-size: 10px; color: #CCCCCC; position: absolute; top: 15px; right: 5px; }
#header span.location { font-size: 12px; }

#navigation { 
	display: block;
	position: absolute; 
	top: 48px; 
	left: 0px;
	width: 890px; 
	height: 18px;
	z-index: 4;
	border: 1px solid #999999; }

/*-------------------- content --------------------*/
#content_wrapper {
	display: block;
	position: absolute;
	width: 890px;
	left: 0px;
	top: 69px;
	z-index: 3; }

#pagebanner { 
	display: block; 
	position: relative; 
	width: 890px;
	border-left: 1px solid #999999;	
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
	background-color: #000000;
	z-index: 4; }

#pagetitle { 
	display: block; 
	position: relative;
	width: 890px; 
	height: 20px;
	border-left: 1px solid #999999;	
	border-top: 1px solid #999999;
	border-right: 1px solid #999999;
	z-index: 4; }

#content_background {
	display: block;
	position: relative;
	border: 1px solid #999999;
	background-color: #FFFFFF;
	width: 890px;
	z-index: 4; }

/*-------------------- footer --------------------*/
#footer { 
	position: relative;
	width: 890px; 
	height: 39px;
	margin-top: -15px;
	margin-bottom: 35px;
	border: 1px solid #999999; }

.footeraddress { font-size: 10px; color: #dddddd; position: absolute; top: 0px; left: 8px; } 
.footerlinks { color: #cccccc; position: absolute; top: 2px; right: 8px; } 
.copyright { font-size: 10px; color: #777777; position: absolute; bottom: 2px; right: 8px; }

/*-------------- Picture and div colour settings --------------*/
.picborder { border: 1px #282828 solid }

/*-- box and column background colours --*/ /*-- TO REPLACE THE BG COLOUR IMAGES UP AT THE TOP--*/
.fullwhite { background-color: #FFFFFF; }
.fullblack { background-color: #000000; color: #FFFFFF; }
.fullgrey { background-color: #777777 }
.fulllightgrey { background-color: #CCCCCC; }
.fulldarkgrey { background-color: #555555; }
.fullivory { background-color: #EEEEEE; }


.fadeyellow { background-image: url('../baseimages/fade75_yellow.png'); }
.fadeorange { background-image: url('../baseimages/fade75_orange.png'); }
.fadepurple { background-image: url('../baseimages/fade75_purple.png'); }
.fadeturquiose { background-image: url('../baseimages/fade75_turquiose.png'); }
.fadegreen { background-image: url('../baseimages/fade75_green.png'); }

.fadewhite60 { background-image: url('../baseimages/65white.png'); }
.fadewhite70 { background-image: url('../baseimages/75white.png'); }
.fadewhite80 { background-image: url('../baseimages/85white.png'); }
.fadeblack60 { background-image: url('../baseimages/65black.png'); color: #FFFFFF; }
.fadeblack70 { background-image: url('../baseimages/75black.png'); color: #FFFFFF; }
.fadeblack80 { background-image: url('../baseimages/85black.png'); color: #FFFFFF; }

/*-- box and column background colours --*/
.white65 { background-image: url('../baseimages/65white.png'); }
.white75 { background-image: url('../baseimages/75white.png'); }
.white85 { background-image: url('../baseimages/85white.png'); }

.black65 { background-image: url('../baseimages/65black.png'); }
.black75 { background-image: url('../baseimages/75black.png'); }
.black85 { background-image: url('../baseimages/85black.png'); }

.blackbg { background-image: url('../baseimages/black.jpg'); }
.bluebg { background-image: url('../baseimages/blue.jpg'); }
.graybg { background-image: url('../baseimages/gray.jpg'); }
.lightgreybg { background-image: url('../baseimages/lightgrey.jpg'); }
.greenbg { background-image: url('../baseimages/green.jpg'); }
.navybg { background-image: url('../baseimages/navy.jpg'); }
.orangebg { background-image: url('../baseimages/orange.jpg'); }
.pinkbg { background-image: url('../baseimages/pink.jpg'); }
.redbg { background-image: url('../baseimages/red.jpg'); }
.yellowbg { background-image: url('../baseimages/yellow.jpg'); }

/*-------------------- outline --------------------*/
#outlinebox {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 880px; 
	z-index: 4; 
	padding: 2px; }
	
/*-------------------- columns --------------------*/
#fulltext { 
	position: absolute; 
	width: 870px; 
	top: 5px; 
	left: 5px;
	padding: 4px;
	z-index: 5; }

#fullimg { 
	position: absolute; 
	width: 874px; 
	top: 5px; 
	left: 5px;
	padding: 2px;
	z-index: 5; }

#lefthalfcolumn { 
	position: absolute; 
	width: 427px; 
	top: 5px; 
	left: 5px;
	padding: 4px; 
	z-index: 5; }

#righthalfcolumn { 
	position: absolute; 
	width: 427px; 
	top: 5px; 
	right: 5px; 
	padding: 4px;
	z-index: 5; }

#firstcolumn {
	position: absolute; 
	width: 279px;  
	top: 5px; 
	left: 5px; 
	padding: 4px;
	z-index: 5; }
	
#secondcolumn {
	position: absolute; 
	width: 280px;  
	top: 5px; 
	left: 300px; 
	padding: 4px;
	z-index: 5; }

#thirdcolumn {
	position: absolute; 
	width: 279px;  
	top: 5px; 
	right: 5px; 
	padding: 4px;
	z-index: 5; }

#leftspancolumn {
 	position: absolute; 
	width: 575px;  
	top: 5px; 
	left: 5px; 
	padding: 4px;
	z-index: 5; }

#rightspancolumn {
 	position: absolute; 
	width: 575px;  
	top: 5px; 
	right: 5px; 
	padding: 4px;
	z-index: 5; }

#spancolumn {
 	position: absolute; 
	width: 700px;  
	top: 5px; 
	left: 5px; 
	padding: 4px;
	z-index: 5; }

/*------ link bar - to use with columns -------*/
#spanlinkbar { position: absolute; text-align: center; bottom: 5px; left: 5px; width: 878px; font-size: 14px; z-index: 6; }
#spanlinkbar a { display: block; height: 18px; padding: 2px 7px 2px 7px; font-weight: bold; }

#leftlinkbar { position: absolute; text-align: right; bottom: 5px; left: 5px; width: 435px; font-size: 14px; z-index: 6; }
#leftlinkbar a { display: block; height: 18px; padding: 2px 7px 2px 7px; font-weight: bold; }

#rightlinkbar { position: absolute; text-align: left; bottom: 5px; right: 5px; width: 435px; font-size: 14px; z-index: 6; }
#rightlinkbar a { display: block; height: 18px; padding: 2px 7px 2px 7px; font-weight: bold; }

/*------ link postions for corners -------*/
.leftlink { position: absolute; bottom: 5px; left: 5px; }
.rightlink { position: absolute; bottom: 5px; right: 5px; }

/*-- general heights for columns --*/
.h150 { height: 150px; }
.h200 { height: 200px; }
.h250 { height: 250px; }
.h300 { height: 300px; }
.h400 { height: 400px; }
.h500 { height: 500px; }
.h550 { height: 550px; }
.h600 { height: 600px; }
.h700 { height: 700px; }
.h750 { height: 750px; }
.h1000 { height: 1000px; }

/*------  boxes  -------*/
#middlebox {
	position: absolute;
	top: 75px;
	left: 45px;
	width: 790px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#lefthalfbox { 
	position: absolute;
	top: 75px;
	left: 45px;
	width: 387px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#righthalfbox {
	position: absolute;
	top: 75px;
	right: 45px;
	width: 387px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#firstbox { 
	position: absolute;
	top: 75px;
	left: 45px;
	width: 250px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#secondbox { 
	position: absolute;
	top: 75px;
	left: 315px;
	width: 250px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#thirdbox { 
	position: absolute;
	top: 75px;
	right: 45px;
	width: 250px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#leftspanbox { 
	position: absolute;
	top: 75px;
	left: 45px;
	width: 520px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

#rightspanbox { 
	position: absolute;
	top: 75px;
	left: 315px;
	width: 520px;
	height: 364px;
	padding: 4px;
	z-index: 8; }

/*-- small link bars - to use with box id's --*/
#next_linkbar { position: absolute; text-align: right; bottom: 23px; right: 45px; width: 175px; font-size: 14px; z-index: 8; }
#next_linkbar a { display: block; height: 18px; padding: 2px 7px 2px 7px; font-weight: bold; }

#prev_linkbar { position: absolute; text-align: left; bottom: 23px; left: 45px; width: 175px; font-size: 14px; z-index: 8; }
#prev_linkbar a { display: block; height: 18px; padding: 2px 7px 2px 7px; font-weight: bold; }

/*-- border (bordertheme - defined in each individual site style) --*/
.borderoff { margin: 1px; }

.bordergrey { border: 1px #666666 solid; }
.borderlightgrey { border: 1px #999999 solid; }
.borderdarkgrey { border: 1px #333333 solid; }
.borderblack { border: 1px #000000 solid; }
.borderwhite { border: 1px #ffffff solid; }

/*------------------ popup box ------------------*/
#pop_background {
	position: absolute; 
	left: 0px; 
	width: 100%;
	height: 100%;
	min-height: 100%;
	display: block;
	background-image: url(../baseimages/75black.png);
	background-repeat: repeat;
	visibility: hidden; 
	z-index: 100; }	

/*--- positioning the top for background depending on what includes there are, i.e pagebanner(div) etc ---*/
.up0 { top: 0px; }
.up1 { top: -161px; padding-bottom: 161px; }
.up2 { top: -182px; padding-bottom: 182px; }

/*--- the actual pop up box ---*/
#pop_box { 
	display: block;
	width: 425px;
	height: 380px;
	margin: 10px 0px 100px 0px;
	background-color: #FFFFFF;
	border: 8px solid #888888;
	z-index: 101; }

.popleft { position: absolute; left: 15%; right: 15%; }
.poptop { position: fixed; top: 15%; bottom: 15%; }

/*--- properties in the pop up box ---*/
#pop_title {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 417px;
	height: 41px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
	z-index: 102; }

.pop_titletext { font-size: 18px; text-align: center; padding: 10px; }

#pop_content {
	position: absolute;
	top: 49px;
	left: 3px;
	width: 417px;
	height: 299px;
	background-color: #FFFFFF;
	border: 1px solid #666666;
	overflow: auto;
	text-align: left;
	z-index: 102; }

#pop_close { position: absolute; bottom: 3px; left: 3px; text-align: center; }
#pop_close a { display: block; border: 1px solid #666666; height: 22px; width: 417px; z-index: 102; }
