/*	BE Styles for interim design
	author: Brennan Paezold
*/

li {
}

#be-content > li {
	margin-bottom: 40px;
}

#be-content li.hero span.logo {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 200px;
	height: 200px;
	background: url(../images/medibank-be-logo.png) 0 0 no-repeat;
	}
	#be-content ul.hero-stories li {
	vertical-align: top;
	}

#be-content li.hero  {
	position: relative;
	width: 700px;
	display: block;
	}
	#be-content li.hero ul {
	width: 700px;
	display: block;
	vertical-align: top;
	}
	#be-content li.hero ul li h3 {
	color: #2C5697;
	}
#be-content li.hero a  {
	position: relative;
	}
#be-content li.hero a span.play {
	background: url(../images/hero-play.png) 490px 0 no-repeat;
	opacity:0.5;
	position: absolute;
	top: -60px;
	left: 0;
	width: 100%;
	height: 45px;
	}
	#be-content li.hero a:hover span.play {
	opacity:1;
	}

#be-content li.story {
	width: 340px;
    float: left;
	display: inline-block;
	}
	#be-content li.story-left {
		margin-right: 15px;
	}
#be-content li.story a {
	position: relative;
	}
#be-content li.story a span {
	background: url(../images/play.png) center center no-repeat;
	opacity:0.5;
	position: absolute;
	top: -120px;
	left: 0;
	width: 100%;
	height: 40px;
	}
	#be-content li.story a:hover span {
	opacity:1;
	}
/*#be-content li.story img {
	border-bottom: 10px solid #00A3E0;
	}*/


/* COLOURS */
#be-content li.lifestyle h3 {
	color: #D40F7D;
	}

#be-content li.experts h3 {
	color: #FF932F;
	}
	
#be-content li.stories h3 {
	color: #00a4e4;
	}
	
#be-content li.feature h3 {
	color: #ba208c;
	}

.lifestylebar {
	color: #D40F7D;
	line-height: 10px; 
    width: 100%; 
    background: #D40F7D left top; 
    height: 10px; 
    font-size: 6px; 
    margin-top: -5px;
    }

.expertsbar {
	color: #FF932F;
	line-height: 10px; 
    width: 100%; 
    background: #FF932F left top; 
    height: 10px; 
    font-size: 6px; 
    margin-top: -5px;
    }
	
.storiesbar {
	color: #00a4e4;
	line-height: 10px; 
    width: 100%; 
    background: #00a4e4 left top; 
    height: 10px; 
    font-size: 6px; 
    margin-top: -5px;
    }
	
.featurebar {
	color: #ba208c;
	line-height: 10px; 
    width: 100%; 
    background: #ba208c left top; 
    height: 10px; 
    font-size: 6px; 
    margin-top: -5px;
    }

#be-content li.be-footer {
	width: 700px;
    float: left;
	margin: 0;
	padding: 0;
	background: #464646;
	}
	#be-content li.be-footer ul {
	width: 500px;
	margin: 0 auto;
	}
	#be-content li.be-footer ul li {
    float: left;
	display: inline-block;
	color:#fff;
	padding: 0 50px;	
	height: 40px;
	line-height: 40px;
	}
	#be-content li.be-footer ul li span {
	display: inline-block;
	vertical-align: middle;
	width: 20px;
	height: 20px;
	}
	
/***********************  
 * Social Navigation
 ***********************/
	li a.fb {
		background: url("/img/icon-facebook.png") 0 0 no-repeat;
		padding-left: 25px;
		height: 21px;
	    display:inline-block;
	}
	li a.twtr {
		background: url("/img/icon-twitter.png") 0 0 no-repeat;
		padding-left: 25px;
		height: 21px;
	    display:inline-block;
	}	

/***********************
 * IE7
 ***********************/
 
.ie7 #be-content li.story a span {
	background: url(../images/play.png) center center no-repeat;
	opacity:0.5;
	position: absolute;
	top: 80px;
	left: 0;
	width: 100%;
	height: 40px;
	}
.ie7 #be-content li.hero a span.play {
	background: url(../images/hero-play.png) 490px 0 no-repeat;
	opacity:0.5;
	position: absolute;
	top: 280px;
	left: 0;
	width: 100%;
	height: 45px;
	}