/****************************

Copyright the UCCF: The Christian Unions

Design CSS

Written by David Turner



NOTE: This code is copyrighted.  No unauthorized use

is allowed.  Don't steal code.  However, please feel free

to look at how we did something then write it yourself.


=== COLOR SCEME ===


*/

.hidden {	display: none !important; } 

.visible {	display: block !important; } 

.invisible {	visibility: hidden; } 

html {
	height: 100%;
	overflow-y: scroll;
	padding: 0px;
	margin: 0px;

}
body {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	font-family: Helvetica, Arial, sans-serif;
	/*background-image: url(/Images/layout/backgrounds/main_bg.jpg);*/
	background-image: url(/Images/layout/backgrounds/header_bg.gif);
	background-color: #FFF;
	background-position: center 30px;
	background-repeat: repeat-x;
	font-size: 62.5%;
}

div#canvas {
	width: 100%;
	position: relative;
	padding: 0px;
	margin: 0px;
}

a{
	color: #CC0000;
	text-decoration: underline;
}

a:hover{
	color: #CC0000;
	text-decoration: none;
}

hr {
	height: 0px;
	border: none;
	border-top: 1px solid #CCC;
	margin-bottom: 8px;
	width: 100%;
	float: left;
	display: inline;
}



h1 span, h2 span, h3 span{
	background-repeat: no-repeat;
	background-position: 0px 0px;
	display: block;
	margin: 0px;
	padding: 0px;
}
div#centre_layout {
	position: relative;
	height: auto;
	margin: auto;
	width: 760px;
	margin-top: 0px;
	z-index: 10;
	
}
div#page_container {
	position: none;	
	height: auto;
	margin: auto;
	margin-top: 0px;
	padding: 0px;
	float: left;
}

#header_container, #menubar_container, #main_container, #footer_container, #copyright_container  {
	float: left;
	margin: 0px;
	padding: 0px;
	width: 760px;
	position: relative;
	display: inline;

}

#header_container{
	z-index: 10;
}

#header_container h1 {
	display: none;
	width: 139px;
	height: 132px;
	background-image: url(/Images/layout/free_logo.png);
	background-position: left top;
	background-repeat: no-repeat;
	position: absolute;
	left: 60px;
	top: 80px;
	z-index: 10;
}

#menubar_container {
	height: 59px;
	display: block;
	z-index: 10;
	background: none;
	margin: 55px 0 -4px 0;
	padding: 0;
	/*background-image:url(/Images/layout/backgrounds/book_bg.png);*/
	background-position: -10px -8px;
}

#menubar_container ul {
	display: block;
	float: left;	
	position: absolute;
	padding: 0;
	margin: 0;
}

#menubar_container ul li{
	background-image: url(/Images/layout/backgrounds/menu_bg.png);
	width: 100px;
	height: 45px;
	float: left;
	margin-right: 1px;
	margin-top: 8px;
	display: block;
	position: absolute;
}


#menubar_container ul li.home {
	display: block;
	left: 65px;
	margin-top: 11px;
	width: 96px;
	padding: 0px;
}
#menubar_container ul li.home, #menubar_container ul li.home a{ background-position: -5px -2px; }


#menubar_container ul li.about {
	display: block;
	left: 310px;
	width: 78px;
	margin-top: 21px;
}
#menubar_container ul li.about, #menubar_container ul li.about a{ background-position: -118px -8px; }

#menubar_container ul li.read-free {
	display: block;
	left: 376px;
	width: 100px;
	margin-top: 15px;
}
#menubar_container ul li.read-free, #menubar_container ul li.read-free a { background-position: -215px -2px; }

#menubar_container ul li.free-gift {
	display: block;
	left: 465px;
	width: 95px;
	margin-top: 21px;
}
#menubar_container ul li.free-gift, #menubar_container ul li.free-gift a {	background-position: -331px -8px; }

#menubar_container ul li.faq {
	display: block;
	left: 617px;
	width: 51px;
	margin-top: 18px;
}
#menubar_container ul li.faq, #menubar_container ul li.faq a {	background-position: -438px -8px; }

#menubar_container ul li.free-thinking {
	display: block;
	left: 553px;
	width: 121px;
	margin-top: 16px;
}
#menubar_container ul li.free-thinking, #menubar_container ul li.free-thinking a {	background-position: -609px -8px; }

#menubar_container ul li.set-free {
	display: block;
	left: 664px;
	width: 93px;
	margin-top: 19px;
}
#menubar_container ul li.set-free, #menubar_container ul li.set-free a { 	background-position: -502px -8px; }

#menubar_container ul li a {
	width: 100%;
	height: 100%;
	display: block;
	background-image: none;
	position: absolute;
}

#menubar_container ul li.home  { height: 45px; }
#menubar_container ul li.about  { height: 34px; }
#menubar_container ul li.read-free  { height: 40px; }
#menubar_container ul li.free-gift  { height: 34px; }
#menubar_container ul li.faq  { height: 38px; }
#menubar_container ul li.free-thinking {height: 39px; }
#menubar_container ul li.set-free  { height: 37px; }

#menubar_container ul li.selected a { 
	height: 90px; 
	background: inherit;

}

#menubar_container ul li a:hover {
	background-position: inherit;
	background-image: url(/Images/layout/backgrounds/menu_sel_bg.png);

}

#main_container{
	z-index: 5;
	padding: 60px 0px 40px 0px;
	/*background-image: url(/Images/layout/backgrounds/book_bg.png);*/
	background-repeat: no-repeat;
	background-position: center -64px;
	min-height: 500px; 
}

div.SectionHome ul.display-list {
	padding: 0;
	margin: 0;
}

div.SectionHome ul.display-list li{
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 1em;
	padding-bottom: 2em;
	background-repeat: no-repeat;
}

div.SectionHome ul.display-list li h2 {
	margin-bottom: 0.6em;
}

div.SectionHome ul.display-list li p {
	font-size: 1.2em;
}

div.SectionHome ul.display-list li a.MoreLink {
	font-size: 1.2em;
	font-weight: bold;
	width: 100%;
}

div.SectionHome ul.display-list li p, div.SectionHome ul.display-list li h2 {
	background: #FFF;
}

#footer_container {
	width: 100% !important;
	position: relative;
	float: left;
	background: #FFF;
	height: 80px;
	margin-top: -30px;
	padding-left: 0px;
	padding-top: 40px;
	margin-bottom: 0px;
	background-image: url(/Images/layout/backgrounds/footer_bg.gif);
	background-position: center top;
	background-repeat:repeat-x;
	z-index: 2;
}

#footer_container div.centre {
	width: 760px;
	margin: 0px auto;
}

#footer_container a.uccf-link{
	display: block;
	background-image: url(/Images/layout/uccf_logo.png);
	background-position: left top;
	background-repeat: no-repeat;
	width: 200px;
	height: 15px;
}

div.summary p{
	color: #777;
	font-size: 2.2em;
	line-height: 1.2em;
}

.col h1 {
	font-family: "Helvetica Black", "Arial Black", Arial, Helvetica, sans-serif;
	font-weight: bold;
	font-size: 1.9em;
	line-height: 1.2em;
	letter-spacing: -1px;
	margin: 0px 0px 37px 0px;
	text-transform: uppercase;
}

h2 {
	font-size: 1.8em;
	color: #000;
	font-weight: bold;
	padding: 0;
	margin: 0;
	text-transform: lowercase;
	font-family: "Arial Black", Arial, Helvetica, sans-serif
}

h3 {
	font-size: 1.4em;
	color: #000;
	font-weight: bold;
	padding: 0;
	margin: 0;
	text-transform: lowercase;
	font-family: "Arial Black", Arial, Helvetica, sans-serif
}

img {
	margin-bottom: 10px;
}

.small { font-size: 1.1em; }
.red { color: #CC0000; }



div.SectionMenu {
	background-image: url(/Images/layout/backgrounds/menubg_bottom.png);
	background-position: left bottom;
	background-repeat: no-repeat;
	padding: 0px;
	padding-bottom: 34px;
	margin-bottom: 2em;
}

div.SectionMenu h2 {
	display: block;
	background-image: url(/Images/layout/backgrounds/menubg_top.png);
	background-position: top left;
	padding: 17px 0px 10px 0px ;
	margin: 0px;
	height: 15px;
	color: #FFF;
	font-size: 1.4em;
}

div.SectionMenu h2 span {
	margin-left: 20px;
	margin-right: 20px;
	font-size: 1.4em;
	line-height: 1.1em;
	text-transform: uppercase;
	font-family:"Arial Black",Arial, Helvetica, sans-serif;
	font-weight: bold;
	letter-spacing: -1px;
}

div.SectionMenu ul {
	margin: 0px;
	padding: 0px;
	padding-top: 25px;
	background: #000208;
}

div.SectionMenu ul li {
	list-style: none;
	padding: 0px;
	margin: 9px 20px 0px 20px;
	line-height: 1em !important;
}

div.SectionMenu ul li a {
	text-transform: uppercase;
	font-family:"Arial Black",Arial, Helvetica, sans-serif;
	font-weight: bold;
	text-decoration: none;
	color: #FFF;
	
}

div.SectionMenu ul li a:hover {
	color: #AAA;
}

div.SectionMenu ul li.SelectedPage a{
	color: #C00 !important;
}
 
div.col div.pad { background: #FFF; }


div.background {
	display: block;
	width: 100%;
	position: absolute;
	margin: 0px;
	top: 114px;
	left: 0px;
	bottom: 88px;
	background-position: center top;
	background-repeat:no-repeat;
	z-index: 3;
}
div.background div {
	background-position: center top;
	background-repeat:no-repeat;
	display: none;
	position: absolute;
}

div.background.Bg-1 { background-image:url(/Images/layout/backgrounds/doodle_x.gif);	}

div.background.Bg-2 { background-image:url(/Images/layout/backgrounds/doodle_j.gif);	}

div.background.Bg-3 { background-image:url(/Images/layout/backgrounds/doodle_w.gif); }

div.background.Bg-4 { background-image:url(/Images/layout/backgrounds/doodle_i.gif); background-position: -10px top;}

div.background.Bg-5 div { display: block; }
div.background.g-5 div.One { 
	background-image:url(/Images/layout/backgrounds/doodle_b1.gif); 
	background-position: left bottom; 
	width: 667px; 
	height: 602px;
	left: 10px;
	bottom: 10px;
	top: auto; 
}
div.background.Bg-5 div.Two { 
	background-image: url(/Images/layout/backgrounds/doodle_b2.gif); 
	background-position: left top; 
	width: 736px; 
	height: 648px;
	left: auto;
	right: 0px;
	top: -1px;
}

div.background.Bg-6 { 
	background-image:url(/Images/layout/backgrounds/doodle_g.gif); 
	background-position: center top; 
	background-repeat: repeat-y;
}

div.background.Bg-7 { background-image:url(/Images/layout/backgrounds/doodle_d.gif); background-position: left top;}
div.background.Bg-8 { background-image:url(/Images/layout/backgrounds/doodle_h.gif); top: 116px; }
div.background.Bg-9 { background-image:url(/Images/layout/backgrounds/doodle_l.gif); }


div.background.Bg-Error { background-image:url(/Images/layout/backgrounds/doodle_s.gif); background-position: center 30px; }

div#Splash { 
	width: 760px;
	height: 126px;
	position: absolute;
	top: -16px;
}


div.AudioPlayer {
	height: 8.5em;
}