style.scss

@import "reset";
@import "text";
@import "976_16";

body{
	background:#000;
	margin:0;
}


#wrapper{
	
	background-image: url(http://images.communitybible.com/layout/background/bg-content2.jpg);
	background-size:contain;
	background-repeat:no-repeat;
	position:relative;
}

#wrapper-no-header{
	background:#000;
}


	

#header {
	background: url(http://images.communitybible.com/layout/background/transparent-black.png);
	height: 100px;
	top: 0;
	position: relative;
	width: 100%;
	z-index: 2;
}

#brand {
	background: url(http://images.communitybible.com/layout/header/logo.png) no-repeat;
	background-position:middle left;

	color:#fff;
	display: block;
	float: left;
	/*
		TODO 
	*/
	font: 28px/1.5 "ff-din-web-pro-condensed", sans-serif;
	height: 40px;
	margin-top: 28px;
	padding-left: 62px;
	text-decoration:none;
	width: 250px;
	z-index: 3;
}

#brand div {
	position:relative;
	
}




/*========================HEADER MENU==========================*/

#icons-top {
	float: right;
	margin: 15px 0px 0px 0px;
}




#icons-top li{

	color:#fff;
	display:inline;
	float:right;
	font-size:11px;
	font-weight:100px;
	padding:0px 0px 0px 0px;
	margin:0 5px;

} 



#icons-top li a:link, #icons-top li a:visited{
	color:#fff;
	display:inline;
	text-decoration:none;
}

#icons-top li a:hover{
	color:#bd4929;
}

#twit-fb-search li a:link{
	display:block;
	height:24px;
	width:24px;
	
}



#search{ /* contains the entire form field for the search */
	background:#fff;
	border-radius:14px;
	height:25px;
	padding:0px 0px 0px 0px;
	position:relative;
	top:-1px;
	width:200px;
}

#search input{  /* general styles for all input elements in form*/
	border:none;
	border-radius:10px;
	margin:0px;
	color:#bd4929;
	

}

#search-box{  /* search textfield*/
	border:none;
	height:20px;
	outline:none;
	position:relative;
	top:3px;
	left:15px;


}

#searchsubmit{ /*search submit button*/
	background:url(http://images.communitybible.com/layout/icons/icon-search.png) no-repeat;

	border:none;
	float:right;
	height:30px;
	position:relative;
	width:30px;
	top:0px;
	right:0px;
}

#searchsubmit:hover{
	background:url(http://images.communitybible.com/layout/icons/icon-search-hover.png) no-repeat;
}





a:link#facebook, a:active#facebook{
	background: url(http://images.communitybible.com/layout/icons/icon-facebook-rollover.png) bottom;
}

a:hover#facebook{
	background: url(http://images.communitybible.com/layout/icons/icon-facebook-rollover.png) top ;
}

a:link#twitter, a:active#twitter{
	background: url(http://images.communitybible.com/layout/icons/icon-twitter-rollover.png) bottom;
}

a:hover#twitter{
	background: url(http://images.communitybible.com/layout/icons/icon-twitter-rollover.png) top;
}

/*end HEADER MENU*/


/*=============================MAIN NAV================================*/
#nav-container{
	
	
	width:100%;
}

#navbar{
	background:url(http://images.communitybible.com/layout/background/bg-navbar.png);
	height:50px;
	width:100%;
	position:relative;
	top:30px;
}

nav{
	color:#fff;/*
		TODO add color
	*/
	/*
		TODO add font size
	*/font-size:14px;
	position:relative;
	height:50px;
	text-decoration:none;/*
		TODO add text-decoration
	*/
	width:100%;
}

nav ul{
	position:relative;
	text-align:center;
	top:15px;
}

nav li{
	display:inline;
	margin:-6px;
	padding:20px 25px;

	text-transform:uppercase;
}


nav li:hover{
	background:#fff;
	cursor:pointer;
	color:#000 !important;
	padding:20px 25px;
}



/*
	TODO add a.no-sub-nav:link, a.no-sub-nav:visited
*/
a.no-sub-nav:link, a.no-sub-nav:visited{
	color:#fff;
	
	text-decoration:none;
}

/*
	TODO add a.no-sub-nav:hover
*/

a.no-sub-nav:hover{
	color:#000;
	
}



nav li div.left-border{/***** dividers in between the main menu items*********/
	background:url(http://images.communitybible.com/layout/dividers/divider.png);
	display:inline;
	height:40px;
	position:absolute;
	top:-6px;
	width:1px;
	z-index:2;
}

nav li div.right-border{/***** dividers in between the main menu items*********/
	background:url(http://images.communitybible.com/layout/dividers/divider.png);
	display:inline;
	height:40px;
	position:absolute;
	top:-6px;
	width:1px;
	z-index:2;
}

nav li div.left-border{
	margin:0px 0px 0px -20px;
}

nav li div.right-border{
	margin:0px 0px 0px 15px;
}

nav li ul{
	
	background:#fff;
	color:#000;
	display:none;
	height:165px;
	padding:5px 0px 0px 0px;
	position:absolute;

	text-align:center;
	margin-top:20px;
	margin-right:auto;
	
	width:100%;
}

nav#navbar-homepage li ul, nav#navbar-no-header li ul {
	height:110px !important;
}




nav li ul div.menu-item-container{ /* div menu-item-container contains the menu items divs in the drop down menu.   necessary in order to apply container_16*/ 
	
	border:1px solid #fff;
	
	float:none !important;
	height:100px;
	text-align:left;
	margin-top:0px !important;
	width:956px !important;
}


nav li ul div { /* individual menu items */
	

	float:left;
	width:300px !important;
	margin:10px 0px 0px 10px;
	position:relative !important;

	text-transform:capitalize;
}

/*
	TODO add padding:0px !important
*/
nav li ul div a:link, nav li ul div a:visited{
	color: #bd4929; /* orange */
	text-decoration:none;
	padding:0px;
}



nav li ul div a:hover{
	color:#502b21; /* purple */
	
}

/*============================NAV MESSAGE MENU========================*/

 #robert, #robert a:link, #robert a:visited{
	color:#ff3939; /*orange*/
}

#robert a:hover{
	color:#aa0101; /*red*/
}

 #chris, #chris a:link, #chris a:visited{
	color:#06b4ce; /*turquise*/
	
}

#chris a:hover{
	color:#00616f; /*green*/
}

 #john, #john a:link, #john a:visited, #espanol-message{
	color:#fe8f00;/*yellow*/
}

#john a:hover{
	color:#894d00;/*brown*/
}

#robert img#robert-pic, #chris img#chris-pic, #john img#john-pic{
	height:80px;
	float:left !important;
	margin-right:10px;
}

a#espanol-message:link, a#espanol-message:visited{
	color:#894d00 !important;/*brown*/
}

a#espanol-message:hover{
	color:#fe8f00 !important;/*yellow*/
}


nav li ul div .message-title{
	
	font-size:18px;
}


nav li ul div .message-date{
	color:#828282;
	font-size:10px;
	position:relative;
	top:-10px;
}



nav li ul div .messages{
	font-size:13px;
	line-height:16px;
	position:relative;
	top:-5px;
	
}

.messages img{ /*play and podcast icons*/
	margin:-5px 5px 0px 0px;
}
/*End NAV MESSAGE MENU*/


/*=========================NAV EVENT MENU==================================*/

.nav-events{/*individual event items in drop down nav*/
	width:180px !important;
}



.nav-events-ltarrow{
	background:url(http://images.communitybible.com/layout/buttons/btn-events-ltarrow-rlv.png);
	background-position:bottom;
	height:12px;
	margin:35px 10px 0 0;
	width:12px !important;
}

.nav-events-rtarrow{
	background:url(http://images.communitybible.com/layout/buttons/btn-events-rtarrow-rlv.png);
	background-position:bottom;
	height:12px;
	margin:35px 10px 0 0;
	width:12px !important;
}

.nav-events-ltarrow:hover, .nav-events-rtarrow:hover{
	background-position:top;
}

nav li ul div .nav-event-box{ /*calendar square*/
	background:#06b4ce;
	color:#adfc9b;
	height:70px !important;

	margin:0px 5px 0px 0px;
	padding-top:5px;
	text-align:center;
	width:50px !important;
}

nav li ul div a.nav-event-title{
	color:#bb4829;/*orang*/
	font-size:13px;
	font-weight:bold;
	margin:0px 0px 0px 0px;
	text-transform:uppercase;
	
}

nav li ul div a.nav-event-title:hover{
	color:#502b21; /* purple */
}


.nav-event-date .event-date-number{
	color:#fff;
	font-size:25px;
	position:relative;
	top:2px;
}


nav li ul div .nav-event-time-location{
	color:#878787;
	line-height:14px;
	margin:0px 0px 10px 0px !important;
	
}

nav li ul div a.nav-event-register:link, nav li ul div a.nav-event-register:visited{
	color:#06b4ce;
	font-size:13px;
	margin:0px 0px 0px 0px !important;
	text-transform:uppercase;
}

nav li ul div a.nav-event-register:hover{
	color:#bd4929; /*orange*/
}

a#nav-events-all{
	color:#bd4929; /*orange*/
	float:left;
	font-size:13px;
	margin-left:-15px;
	position:relative;
	text-transform:uppercase;
	top:30px;
}

a#nav-events-all:hover{
	color:#502b21; /* purple */
	
}

/*==============================================*/



nav li ul div ul{
	background:transparent;
	height:50px;
	position:relative;
	
}




nav li ul div ul li{
	color:#20b7a6; /* green */
	font-weight:bold !important;
	padding:15px;
/*	text-transform:capitalize !important;*/


}

nav li ul div ul li:hover {
	background:transparent !important;
	color:#bd4929; /* orange */
	padding:15px;
	
}




nav li:hover ul {
	display: block !important;
	

}

nav LI.over ul {
	display: block !important;
}


/*==========================HOME PICS=======================================*/

#home-pics {
/*
	TODO edit top: 148px, delete left
*/	
	position: fixed;
	top: -50%;
	left: -50%;
	
	width: 200%;
	height: 200%;
	z-index: 1;
}

#home-pics img {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	min-width: 50%;
	min-height: 50%;
}

/*Events Page======================================================== */
.events{
	margin-top:60px;
	
}

.events-hr{ /*line separating events on events page*/
	background-color:#aefc9c;
	height:2px;
	position:relative;
	top:20px;
}

.event-calendar-box{
	background:#aefc9c;
	color:#06b4ce;
	float:left;
	font-size:18px;
	height:120px;
	margin-right:20px;
	padding-top:10px;
	text-align:center;
	width:100px;
}

.event-calendar-box .date{
	color:#000;
	font-size:40px;
	
}

.events p{
	color:#fff;
	font-size:25px;
}

.event-time-location, .event-description{
	color:#fff;
	float:left;
	font-size:16px !important;
	line-height:22px;
	position:relative;
	/*
		TODO add !important to margin-top
	*/
	margin-top:-14px !important;

}

.event-description {
	float: right !important;
}


.location{
	color:#aefc9c;
	font-weight:bold;
}

.event-description{

	width:400px;
}

.btn-register-info, .btn-more-info{
	background:url(http://images.communitybible.com/layout/icons/icon-click.png)no-repeat center right;
	background-color:#9cf0fc;
	color:#000;
	float:left;
	/*
		TODO add font-size
	*/
	font-size:14px !important;
	font-weight:bold;
	height:28px;
	margin-right:45px;
	margin-top:0px;
	/*
		TODO add bottom padding
	*/
	padding:10px 0 10px 10px;
	text-decoration:none;
	text-transform:uppercase;
	width:160px;
}

/*
	TODO add color to button text
*/
.btn-register-info:link, .btn-register-info:visited, .btn-more-info:link, .btn-more-info:visited{
	color:black !important;
}

.btn-register-info:hover, .btn-more-info:hover{
	background-color:#bd4929; /* orange */;
}
/* Content Page ===================================================== */


.subcontent, .subcontent-no-header, .subcontent-sermon{
	background: url(http://images.communitybible.com/layout/background/bg-green.jpg);

}

.subcontent{
	margin-top:0px;
	position:relative;
}

.subcontent-no-header{
	margin-top:0px;
	padding-top:0px;
	position:relative;
}

.condensed {
  font-family: "ff-din-web-pro-condensed", sans-serif;

}

.copy{
	color:#ffffff;
	font-size:18px;
	line-height:30px;
}


#header-pics {
	
	background: url(http://images.communitybible.com/layout/panel/bg-wood-sm.png) repeat-x;
	height:300px;
	/*
		TODO remove negative left margin
	*/
	margin:215px 0 30px 0px;
	position:relative;
}

#panel{

	background: url(http://images.communitybible.com/layout/panel/bg-wood.png) repeat-x;
	height:250px;
	margin:0px 0 -40px 0px;
	position:relative;
}

.content-slideshow{
	background-color:#fff;
	border:5px solid #fff;
	height:350px;
	position:relative;
	top:-60px;
	/*
		TODO add width
	*/
	width:956px;
	
}

.subnav{
	margin-top:0px;
	position:relative;
	text-align:center;
	width:100%;
}

/*
	TODO add .subnav a, .subnav li, .subnav a:hover
*/
.subnav a, .subnav li, .subnav a:hover{
	color:#fff;
	font-size:22px;
	text-decoration:none;
	
}

.subnav li{
	display:inline;
	margin:5px ;

	text-align:center;
}

.subnav a:link{
	padding:2px 14px;
}
	
/*
	TODO remove .subnav li a:hover
*/


.subnav li ul {
	
	display: none;
	margin: 4px 0px 0px -50px;
	padding: 0px 0px 0px 0px;
	position: absolute;
	width:400px;
}

.subnav li.margin-right50 ul {
	
	display: none;
	margin: 5px 0px 0px -200px !important;
}



.subnav li ul li{
	font-size:18px;
	display:inline;
	text-align:left;
	padding:2px 2px;
	
	
}

.subnav li ul li a:link {
	display:inline;
	font-size:18px;
	padding: 15px 10px !important;
	width:50px;
}


.subnav li ul li img{
	float:none !important;
	position:relative !important;
}


.subnav li ul li a:hover {
	color: #aefc9c; /* lime green */
	font-size:18px;
}

.subnav li:hover ul {
	display: block;
	
}

.subnav LI.over ul {
	display: block;
}

div#subnav ul li {

	position:relative;
}

/*#content{
	padding-bottom:300px;

}*/

#content h1 {
	color:#aefc9c;
	font-size:60px;
	margin:50px 0px 0px 0px;

}



#content h2{
	color:#9cf0fc; /*light blue*/
	font-size:30px;
	margin-top:50px;
}

/*
	TODO add #content p
*/
#content p{
	margin-top:30px;
}


#content p.condensed{
	color:#6dd4c4;
	font-size:36px;
	line-height:50px !important;
	text-align:justify;
	text-transform:uppercase;
}

.subcontent p.condensed, .subcontent-no-header p.condensed, .subcontent-sermon p.condensed {
	color:#15f6de;
	font-size:34px;
	letter-spacing:0px;
	margin-top:35px;
	text-align:left;
	text-transform:uppercase;
}

/*
	TODO add link and visited states for #content links
*/
#content a:link, #content a:visited{
	color:#9cf0fc; /*light blue*/
	text-decoration:none;
}
/*
	TODO add hover state for content links
*/
#content a:hover{
	color:#aefc9c; /*green*/
	text-decoration:none;
}

/*
	TODO add #content .half-block
*/
#content .half-block{
	background:#000;
	float:left;
	width:50%;
	
}


/*=======================================SERMON=====================================*/
#sermon-vid{
	background:#fff;
	border:2px solid #fff;
	height:390px;
	margin-left:auto;
	margin-right:auto;
	margin-top:60px;
	width:705px;
}




#sermon-vid-list{
	
	margin-top:45px;

	padding-bottom:200px;
	
}

#sermon-vid-list div{
	border:4px solid #fff;
	height:135px;
	width:160px;
}

#sermon-vid-list p{
	color:#8c8c8c;
	background:transparent;
	padding:5px 0px;
	text-align:center;
}

#sermon-vid-list p .vid-thumbnail-title{
	color:#ff3939; /*red*/
	font-size:13px;
}



#sermon-vid-list a:link, #sermon-vid-list a:visited{
	
	text-decoration:none;
}

#sermon-vid-list a div, #sermon-vid-list a div:visited{
	background:#fff;
}

#sermon-vid-list a div:hover{
	color:#fff;
	background:#ff3939; /*red*/
	border: 4px solid #ff3939 ;
	

}

#sermon-vid-list a div:hover p, #sermon-vid-list a div:hover p .vid-thumbnail-title{
	color:#fff ;
}


#sermon-vid-list a#arrow-left{
	
	background:url(http://images.communitybible.com/layout/buttons/arrow-left-rollover.png);
}

#sermon-vid-list a#arrow-left:hover{
	
	background:url(http://images.communitybible.com/layout/buttons/arrow-left-rollover.png) bottom left;
}

#sermon-vid-list a#arrow-right{
	
	background:url(http://images.communitybible.com/layout/buttons/arrow-right-rollover.png);
}

#sermon-vid-list a#arrow-right:hover{
	
	background:url(http://images.communitybible.com/layout/buttons/arrow-right-rollover.png) bottom left;
}

#sermon-vid-list a#arrow-right, #sermon-vid-list a#arrow-left, #sermon-vid-list a#arrow-right:hover, #sermon-vid-list a#arrow-left:hover{
	background-repeat:no-repeat;
	display:block;
	float:left;
	height:30px;
	margin:40px 20px 0px 0px;
	width:30px;
}


.vid-thumbnail{
	float:left;
	margin-left:40px;
}



/*=======================================FOOTER=====================================*/

footer{
	/*
		TODO change background
	*/
	background:#000;
	color:#fff;
	height:150px;
/*	bottom:0;*/
	position:relative;
	margin: 100px 0px 0px 0px;
	z-index:2;
	
}

footer ul {
	margin-bottom: 0px !important;
}



#footer-homepage{
	/*
		TODO add background image
	*/
	background: url(http://images.communitybible.com/layout/background/transparent-black.png);
	position:absolute;
	bottom:0;
	width:100%;
}

footer div div{
	float:left;

}

footer #pastors-three{
	background:url(http://images.communitybible.com/layout/pastors/pastors-three.png);
	background-repeat:no-repeat;
	height:150px;
	width:30%;
}

footer #give{

	text-align:center;
	letter-spacing:5px;
	height:100px;
	margin-top:0px;
	
}
/*
	TODO add footer #invite-friend
*/
footer #invite-friend{
	text-align:center;
	letter-spacing:5px;
	height:100px;
	margin:0px 50px 0px 75px;
	text-transform:uppercase;
	
}

/*
	TODO add footer a:hover #invite-friend
*/

footer  a:hover #give, footer a:hover #invite-friend{
	background:#bd4929; /* orange */

	width:170px;
	height:100px;
}

/*
	TODO add footer a #invite-friend
*/

footer  a #give, footer a #invite-friend{


	color:#fff;
	font-size:25px;
	height:100px;
	padding-top:40px;
	padding-bottom:10px;
	text-decoration:none;
	text-transform:uppercase;
	width:170px;

}

footer #links{
	color:#fff;
	text-align:right;
	margin-top:10px;
	width:50%;
}

footer #links a:link, footer #links a:visited{
	color:#fff;
	text-decoration:none;
}

footer #links a:hover{
	color:#fff;
}

footer form input{
	color:#000;
	background:#fff;
	border-radius:15px;
	outline:none;

}

#newsletter-text-field{
	border:none;
	height:25px;
	margin:20px 10px 25px 0px;
	padding:0px 10px;
	width:190px;
}

#newsletter-submit{
	cursor:pointer;
	height:27px;
	width:27px;
}


footer  #links li{
	
	color:#fff;
	display:inline;
	font-size:10px;
	margin:5px;
	text-transform:uppercase;
}

footer #links li a:hover{
	color:#bd4929; /* orange */
}

footer #links p {
	font-size: 12px;
	margin-top: 0px !important;
}


/* For debugging block items  ===================================================== */
.debug {
	border-collapse: collapse;
	border: 1px solid #990000;
}