﻿/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$

	remove all default browsers styles

$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

HTML, BODY, DIV, SPAN, H1, H2, H3, P, A, FORM, LABEL, TABLE, TBODY, TFOOT, THEAD, TR, TD, TD {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}

BODY {
    text-align: center;
	font-family: verdana;
	font-size: 11px;
	color: #333;
}
HTML, FORM, BODY {
	margin: 0px;
}

/* this forces a right scroll bar on all pages. why? on pages with show/hide content (help, etc..) as the page expands, when the scroll bar is displayed, the page shifts to the right. this will keep that from happening */

HTML {
	overflow: scroll;
}
TD {
	vertical-align: top;
}

/************************************************************************
* 
* FONTS
*
************************************************************************/

h1 {
	font: bold 18px Arial Black;
	letter-spacing: -1px;
	color: #8F7B6F;
	margin: 0 0 8px 0;
	width: 100%;
	Clear: both;
}
h2 {
	font: bold 14px Arial Black;
	letter-spacing: -1px;
	color: #666;
	margin: 0 0 8px 0;
	width: 100%;
	Clear: both;
}
h2 span {
	color: #C85435;
}
h3 {
	font: bold 12px Arial Black;
	letter-spacing: -1px;
	color: #666;
	margin: 2px 0 4px 0;
	width: 100%;
	Clear: both;
}
h3 a:link,
h3 a:visited,
h3 a:active,
h3 a:hover {
	color: #666;
}
/*
h3 {
	background: #C1482B url('../img/h3-bg.png') top repeat-x;
	border-top: 1px solid #f63;
	border-right: 1px solid #600;
	border-bottom: 1px solid #600;
	border-left: 1px solid #f63;
	margin: 0px 0px 4px 0px;
	padding: 3px 5px;
	cursor: pointer;
	font: bold 12px Arial Black;
	color: #fff;
}
h3 a {
	color: #fff;
}
*/
p {
	font: normal 12px/1.4em verdana, arial;
	color: #333; 
	margin: 12px 0px;
}
.container {
	width: 100%;
	clear: both;
}

/************************************************************************
* 
* LINKS
*
************************************************************************/

a:link, a:visited, a:active {
	color: #C85435;
	text-decoration: underline;
}
a:hover {
	color: #E5603C;
	text-decoration: none;
}

















/************************************************************************
* 
* PAGE LAYOUT
*
************************************************************************/

#outside {
	width: 1000px;
	height: 100%;
	margin: 0px auto;
	text-align: left;
}

#primary-column {
	width: 840px;
	background: transparent url('../img/ltgn-bg.png');
	text-align: left;
	height: 100%;
}
#main-content,
#home-content {
	width: 800px;
	margin: 10px 20px 50px 20px;
}
.secondary-column {
	background: transparent url('../img/sub-column-bg.png') repeat-y top left;
	width: 160px;
	height: 100%;
}

.logo {
	background: transparent url('../img/sub-column-bg.png') repeat-y top left;
	width: 160px;
	height: 175px;
}
.logo A:link, .logo A:active, .logo A:visited {
	font: bold 12px verdana, arial;
	text-decoration: none;
	color: #fff;
}
.logo A:hover {
	font: bold 12px verdana, arial;
	text-decoration: hover;
	color: #fff;
}

#header {
	background: transparent url('../img/tab-bg.png') top left repeat-x;
	width: 840px;
	height: 54px;
	border-top: 1px solid #8F7B6F;
}

/************************************************************************
* 
* PRIMARY NAVIGATION
*
************************************************************************/

div.primary-navigation {
	margin: 0px;
	width: 828px; /* 840 - 12px */
	height: 39px; /* 54 - 15px */
	padding: 15px 0px 0px 12px;
	background: #8f7b6f url('../img/tab-bg.png') repeat-x;
}
table.primary-navigation {
/*	margin: 15px 0px 0px 12px; */
	height: 38px;
}
.tab1-off {
	background: transparent url('../img/tab-seasonal-resources.png') no-repeat;
}
.tab2-off {
	background: transparent url('../img/tab-weekly-resources.png') no-repeat;
}
.tab3-off {
	background: transparent url('../img/tab-seasonal-art.png') no-repeat;
}
.tab4-off {
	background: transparent url('../img/tab-seasonal-music.png') no-repeat;
}
.tab5-off {
	background: transparent url('../img/tab-singing-the-good-news.png') no-repeat;
}
.tab6-off {
	background: transparent url('../img/tab-external-links.png') no-repeat;
}
.tab1-on {
	background: transparent url('../img/tab-seasonal-resources-on.png') no-repeat;
}
.tab2-on {
	background: transparent url('../img/tab-weekly-resources-on.png') no-repeat;
}
.tab3-on {
	background: transparent url('../img/tab-seasonal-art-on.png') no-repeat;
}
.tab4-on {
	background: transparent url('../img/tab-seasonal-music-on.png') no-repeat;
}
.tab5-on {
	background: transparent url('../img/tab-singing-the-good-news-on.png') no-repeat;
}
.tab6-on {
	background: transparent url('../img/tab-external-links-on.png') no-repeat;
}

/************************************************************************
* 
*  SECONDARY NAVIGATION
*
************************************************************************/

/*
.secondary {
	padding: 4px;
	margin: 0px 0px 0px 14px;
}
.secondary A {
	text-decoration: none;
	font: bold 12px Verdana, Arial, sans-serif;
	color: #06f;
}
.secondary A:hover {
	color: #39f;
	text-decoration: underline;
}
*/

/************************************************************************
* 
* TERTIARY NAVIGATION
*
************************************************************************/

#tertiary-navigation a, #tertiary-navigation {
    font: bold 11px verdana;
}
div.tertiary-navigation a,
div.tertiary-navigation-over a {
	text-decoration: none;
    color: #fff;
}
div.tertiary-navigation a:hover,
div.tertiary-navigation-over a:hover {
	text-decoration: underline;
    color: #fff;
}
div.tertiary-navigation a:visited {
	text-decoration: none;
    color: #ddd;
}
div.tertiary-navigation,
div.tertiary-navigation-over {
	margin: 6px 0 4px 10px;
}




DIV#primary-column {
	margin: 10px 10px;
	background-color: #fff;
	font: normal 11px verdana;
	text-align: left;
}










/* this is the class used on the week page */

img.gospel-graphic-sm {
	float: left;
	margin: 0 12px 6px 0;
	border: 0px;
 }

/************************************************************************
* 
* BREADCRUMB NAVIGATION
*
************************************************************************/

#breadcrumb {
/*	display: none; */
	font: bold 11px verdana;
	height: 11px;
	margin: 0 0 8px 4px;
}
#breadcrumb a:link, #breadcrumb a:visited, #breadcrumb a:active {
    color: #C85435;
	text-decoration: underline;
}
#breadcrumb A:hover {
    color: #E5603C;
	text-decoration: none;
}
#breadcrumb div.On, #breadcrumb div.On A {
    text-decoration: none;
    color: #73635A;
}
img.breadcrumb, #breadcrumb div {
    float: left;
}

/************************************************************************
* 
* footer
*
************************************************************************/

div.footer {
	margin: 8px 0 8px 12px;	
}
td.footer-left {
	background: transparent url('../img/sub-column-bg.png') repeat-y top left;
	width: 160px;
	height: 35px;
}
td#below-footer {
	background:  transparent url('../img/below-footer-bg.png') top repeat-x;
	width: 1000px;
	height: 35px;
}
















TD.column-left, TD.column-right {
	width: 400px;
}
TD.column-left {
	padding: 0px 8px 0px 4px;
}
TD.column-right {
	padding: 0px 4px 0px 8px;
}
TD.vertical-divider {
	width: 1px;
	padding: 0px;
/*	background: transparent url('../img/vertical-divider.png') repeat-y; */
}

/************************************************************************
* 
* btn
*
************************************************************************/

img.btn {
	width: 124px;
	height: 24px;
	border: none;
}

/************************************************************************
* 
* SUBMIT BUTTON ON ART PASSWORD PAGE
*
************************************************************************/

.btn-submit {
    border: 0px;
    height: 24px;
    width: 124px;
	background: #fff url('../img/btn-submit.png') no-repeat;
}
.btn-submit-over {
    border: 0px;
    height: 24px;
    width: 124px;
	background: #fff url('../img/btn-submit-over.png') no-repeat;
	vertical-align: top;
}
.btn-submit-press {
    border: 0px;
    height: 24px;
    width: 124px;
	background: #fff url('../img/btn-submit-press.png') no-repeat;
	vertical-align: top;
}






table.art-table td.title,
table.music-table td.title {
	font: bold 14px Arial Black;
	letter-spacing: -1px;
	color: #545454 /* #C1482B */;
	margin: 0 20px;
	text-align: left;
}

table.music-table td.title a {
	color: #C85435;
}
table.music-table td.title a:hover {
	color: #E5603C;
}
table.weekly-resources td.title {
    width: 150px; /* 190 - (20px + 20px) = 150px */
    padding: 0 20px;
}
table.weekly-resources td.title a:link,
table.weekly-resources td.title a:active,
table.weekly-resources td.title a:visited {
	color: #333;
	font: bold 11px verdana;
}
table.weekly-resources td.title a span {
	color: #C85435;
	font: bold 16px Arial Black;
	letter-spacing: -1px;
}
table.weekly-resources td.title a:hover span {
	color: #E5603C;
}

/************************************************************************
* 
* PREVIEW GOSPEL GRAPHIC
*
************************************************************************/

.btn-preview-gg {
    border: 0px;
    height: 23px;
    width: 105px;
	background: #fff url('../img/btn-preview-gg.png') no-repeat;
	float: left;
	margin: 0 0 0 47px;
}
.btn-preview-gg-over {
    border: 0px;
    height: 23px;
    width: 105px;
	background: #fff url('../img/btn-preview-gg-over.png') no-repeat;
	vertical-align: top;
	float: left;
	margin: 0 0 0 47px;
}
.btn-preview-gg-press {
    border: 0px;
    height: 23px;
    width: 105px;
	background: #fff url('../img/btn-preview-gg-press.png') no-repeat;
	vertical-align: top;
	float: left;
	margin: 0 0 0 47px;
}

/************************************************************************
* 
* DOWNLOAD GOSPEL GRAPHIC
*
************************************************************************/

.btn-download-gg {
    border: 0px;
    height: 23px;
    width: 105px;
	background: #fff url('../img/btn-download-gg.png') no-repeat;
	float: left;
	margin: 0 0 0 95px;
}
.btn-download-gg-over {
    border: 0px;
    height: 23px;
    width: 105px;
	background: #fff url('../img/btn-download-gg-over.png') no-repeat;
	vertical-align: top;
	float: left;
	margin: 0 0 0 95px;
}
.btn-download-gg-press {
    border: 0px;
    height: 23px;
    width: 105px;
	background: #fff url('../img/btn-download-gg-press.png') no-repeat;
	vertical-align: top;
	float: left;
	margin: 0 0 0 95px;
}

/************************************************************************
* 
* PASSWORD ERROR
*
************************************************************************/

.error {
	font: bold 12px verdana, arial;
	color: #c00;
}

/************************************************************************
* 
* LIVING THE GOOD NEWS LANDING PAGE
* GODLY PLAY SELECT DENOMINATION PAGE
*
************************************************************************/

.denomination {
    float: left;
    margin: 0px 5px 5px 0px;
	width: 100px;
    height: 175px;
}
.denomination-over {
    float: left;
    margin: 0px 5px 5px 0px;
	width: 100px;
    height: 175px;
}
.denomination-image {
	border: 0;
}

/************************************************************************
* 
* LAYOUT TABLE
*
************************************************************************/

table.art-table {
	width: 100%;
	border: 0;
	padding: 0;
}
table.float-table {
	width: 360px;
	margin: 0;
	border: 0;
	padding: 0;
}
table.art-table td.title,
table.music-table td.title {
	width: auto;
	padding: 0 0 0 0;
}
table.art-table td.thumb {
	width: 260px;
	padding: 0 0 0 0;
}
table.art-table td.thumb img {
	margin: 2px 16px 12px 0;
}
table.art-table td.thumb a {
	border: 2px solid #C85435;
}
table.art-table td.thumb a:hover {
	border: 2px solid #E5603C;
}

/* song / art title link */


table.layout-table td.title a:link,
table.layout-table td.title a:active,
table.layout-table td.title a:visited,
table.float-table td.title a:link,
table.float-table td.title a:active,
table.float-table td.title a:visited {
	font: bold 12px/1.4em verdana, arial;
	color: #c85435;
	text-decoration: underline;	
}
table.layout-table td.title a:hover,
table.float-table td.title a:hover {
	color: #f63;
	text-decoration: none;
}
table.layout-table td.title a:link span,
table.layout-table td.title a:active span,
table.layout-table td.title a:visited span {
	font: bold 14px/1.4em verdana, arial;
	color: #8f7b6f;
	text-decoration: underline;	
}
table.layout-table td.title A:hover span,
table.float-table td.title A:hover {
	color: #b49a8a;
	text-decoration: none;
}


.hide, .hide {
	visibility: hidden;
}





.pdf-container {
	width: 360px;
	min-height: 28px;
	display: block;
	border-bottom: 1px dotted #999;
	margin: 3px 0 0 0;
	float: left;
}
.pdf-container:hover {
	background-color: #fefefe;
	border-bottom: 1px dotted #666;
}
.pdf-container .icon {
	width: 30px;
	height: 25px;
	float: left;
}
.pdf-container .title {
	width: 320px;
	margin: 5px 0 0 0;
	float: left;
}




.ppt-container {
	width: 100%;
	min-height: 28px;
	display: block;
	border-bottom: 1px dotted #999;
	margin: 3px 0 0 0;
	clear: both;
}
.ppt-container:hover {
	background-color: #fefefe;
	border-bottom: 1px dotted #666;
}
.ppt-container .icon {
	width: 60px;
	height: 50px;
	float: left;
}
.ppt-container .title {
	width: 700px;
	float: left;
}
.ppt-container .title a {
	color: #C85435;
	vertical-align: middle;
}
.ppt-container .title a:hover {
	color: #E5603C;
}

.music-container {
	width: 100%;
	display: block;
	border-bottom: 1px dotted #999;
	margin: 0 0 0 0;
	clear: both;
}
.music-container:hover {
	background-color: #fefefe;
	border-bottom: 1px dotted #666;
}








ul.ext-links {
    list-style-image: url('img/external-link-orange-dark02.png');
	margin: 12px 0;
}
ul.ext-links a:link, ul.ext-links a:visited, ul.ext-links a:active {
	font: bold 12px verdana, arial;
	color: #C85435;
	text-decoration: underline;
}
ul.ext-links a:hover {
	color: #E5603C;
	text-decoration: none;
}
ul.ext-links li {
	margin: 0 0 12px 0;
}


