/* 
== SUB PAGE HEROS (Image or Interactive) ====================================================================================

NORTHLAND COLLEGE :: SUB PAGE HEROS STYLE CSS
Created by: Northland College


== NOTES ======================================================================================

- Use for standard sub layer pages


== UPDATE INFO ================================================================================

Last updated: March 12, 2010
Last update by: Chad Sperling


== TABLE OF CONTENTS ==========================================================================

01: INTERACTIVE HOVER BOXES
02: INTERACTIVE FADER CAROUSEL
03: INTERACTIVE FEATURED TABS
04: STANDARD IMAGES (coming soon - transfer from sub-base)
	
============================================================================================== */


/*
===========================================================================================================================================
	
	01: INTERACTIVE HOVER BOXES
	
===========================================================================================================================================
*/

#heroInteractive {
	width:952px;
	height:370px;
	float:left;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 0px;
	margin-left: 0;}
#heroInteractive .leftCol {
	width:280px;
	height:350px;
	float:left;
	margin-right: 5px;}
#heroInteractive .leftCol.img {
	width:280px!important;
	background-color: #000;
	padding:0px;}	
#heroInteractive .rightCol {
	width:667px;
	height:370px;
	float:left;}	
#i1 {
	width:667px;
	height:200px;
	float:left;
	margin-top: 0px;
	margin-right: 0;
	margin-bottom: 5px!important;
	margin-left: 0;}
#i2 {
	width:667px;
	height:165px;
	float:left;}


.boxgrid, .boxgrid2 {
	width: 331px;
	height: 200px;
	float:left;
	background:#161613;
	overflow: hidden;
	position: relative;
	margin-top: 0;
	margin-right: 5px;
	margin-bottom: 0;
	margin-left: 0;}
.boxgrid2 {
	margin-right: 0px!important;}	
.boxgrid img, .boxgrid2 img{ 
	position: absolute; 
	left: 0; 
	border: 0; }
.boxgrid .tag, .boxgrid2 .tag, .boxgrid3 .tag, .boxgrid4 .tag, .boxgrid5 .tag {
	color:#fff;
	font-size:11px;
	font-weight:normal;
	left:0em;
	position:absolute;
	top:0em;
	float:left;
	padding-top: 0px;
	padding-right: 6px;
	padding-bottom: 0px;
	padding-left: 6px;
	font-family: Georgia, "Times New Roman", Times, serif;
	text-transform: uppercase;
	background-color: #C00;
	font-style: italic;}
.boxcaption, .boxcaption2, .boxcaption3 {
	float: left;
	position: absolute;
	font-weight:bold;
	background: #000;
	height: 100px;
	width: 100%;
	opacity: .80;
	/* For IE 5-7 */
	filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
	/* For IE 8 */
	-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";}
.captionfull .boxcaption, .captionfull .boxcaption2 {top: 260;left: 0;}
.caption .boxcaption, .caption .boxcaption2 {top: 165px;left: 0;}

.boxcaption h3, .boxcaption2 h3  {
	font-family:Arial, Helvetica, sans-serif!important;
	letter-spacing:-0.02em!important;
	padding:0;
	text-shadow:none!important;
	text-transform: none!important;
	color:#FFF;
	margin-top: -2px;
	margin-right: 0px;
	margin-bottom: 0;
	margin-left: 0;}
.boxcaption h3 a, .boxcaption2 h3 a {
	color:#FFF!important;
	text-decoration:none;
	text-transform: none!important;
	font-size:18px;
	font-weight:bold;
	float:left;
	width:311px;
	max-width:311px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;} 
.boxcaption h3 a:hover, .boxcaption2 h3 a:hover {color:#0CF;}
.cover boxcaption h3 a:hover, .cover boxcaption2 h3 a:hover { color:#0CF;}
.boxcaption p a, .boxcaption2 p a {
	margin:0;
	color:#FFF;
	text-decoration:none;
	font-size:12px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	float:left;
	color:#999999;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;}
	
	
.boxcaption3 h3  { padding:0; margin:-2px 0 0 0;color:#FFF;text-shadow:none!important;text-transform: none!important;letter-spacing:-0.02em!important;}	
.boxcaption3 h3 a {
	margin:0;
	color:#FFF;
	text-decoration:none;
	font-size:13px;
	font-family:Arial, Helvetica, sans-serif!important;
	font-weight:bold;
	float:left;
	width:199px;
	max-width:199px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 5px;
	padding-left: 10px;}
.boxcaption3 h3 a:hover {color:#0CF;}
.cover boxcaption3 h3 a:hover { color:#0CF;}
.boxcaption3 p a {
	margin:0;
	color:#FFF;
	text-decoration:none;
	font-size:11px;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:normal;
	float:left;
	color:#999999;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 2px;
	padding-left: 10px;}


.boxgrid3{ 
				width: 219px; 
				height: 165px; 
				float:left; 
				background:#161613; 
				overflow: hidden; 
				position: relative; 
				margin:0 5px 0 0;}
.boxgrid3 img{
	position: absolute;
	left: 0;
	border: 0;
	background-image: url(_assets/hero/img-catalog.jpg);}

.captionfull .boxcaption3 {
 	top: 165;
 	left: 0;}
.caption .boxcaption3 {
 					top: 135px;
 					left: 0;
					margin:0;
					padding:0;}
				
				
.boxgrid4{ 
				width: 219px; 
				height: 165px; 
				float:left; 
				background:#161613; 
				overflow: hidden; 
				position: relative; 
				margin:0 5px 0 0;}
.boxgrid4 img{ 
	position: absolute; 
	left: 0; 
	border: 0;}
.boxgrid5{ 
				width: 219px; 
				height: 165px; 
				float:left; 
				background:#161613; 
				overflow: hidden; 
				position: relative; 
				margin:0;}
.boxgrid5 img{ 
	position: absolute; 
	left: 0; 
	border: 0; }
					
.boxgrid6{ 
				width: 192px; 
				height: 208px; 
				float:left; 
				background:#161613; 
				overflow: hidden; 
				position: relative; 
				margin:0 15px 15px 0;}
.boxgrid6 img{ 
	position: absolute; 
	left: 0; 
	border: 0; }

.boxgrid7{ 
				width: 447px; 
				height: 208px; 
				float:left; 
				background:#161613; 
				overflow: hidden; 
				position: relative; 
				margin:0 0 15px 0;}
.boxgrid7 img{ 
	position: absolute; 
	left: 0; 
	border: 0; }
				
.boxgrid8{ 
	width: 447px; 
	height: 160px; 
	float:left; 
	background:#161613; 
	overflow: hidden; 
	position: relative; 
	margin:0 15px 0 0;}
.boxgrid8 img{ 
	position: absolute; 
	left: 0; 
	border: 0;}
				
.boxgrid9{ 
	width: 192px; 
	height: 160px; 
	float:left; 
	background:#161613; 
	overflow: hidden; 
	position: relative; 
	margin:0;}
.boxgrid9 img{ 
	position: absolute; 
	left: 0; 
	border: 0; }
	
	
/*
===========================================================================================================================================
	
	02: INTERACTIVE FADER CAROUSEL
	
===========================================================================================================================================
*/
#heroSlider{ position:relative; width:952px; height:350px; overflow:hidden;}
#heroSlider #home_slideshow_violator{z-index:1000; width:265px; height:32px; float:left; position:relative; top:-590px; left:0px;}

#heroSlider #home_slideshow_violator #slide_navigation{position:absolute;left:2px;top:50px;}
#heroSlider #home_slideshow_violator #slide_navigation a{
	text-indent:-9999px;
	overflow:hidden;
	display:block;
	background:#333;
	background:rgba(0,0,0,.6);
	width:16px;
	height:16px;
	float:left;
	margin-left:5px;
	cursor:pointer;
	overflow:hidden;
	border: 2px solid #FFF;}
#heroSlider #home_slideshow_violator #slide_navigation a:hover{background-color:#004F62;}
#heroSlider #home_slideshow_violator #slide_navigation a.activeSlide{ background-color:#00A2CD;}
#heroSlider #home_slideshow_violator #slide_navigation a{outline:none;}

#heroSlider li span.slide_caption{display:none;}
#home_slides{background-color:#333333; overflow:hidden; height:380px;}

#heroSlider span.state {
	position:relative;
	float:left;
	top:-290px;
	left:0px;
	width:420px;
	height:190px;
	padding:10px 0px 10px 20px;
	font-size:14px;
	color:#fff;
	zoom:1;
	z-index:1;
	background-image: url(../images/bg/sub-hero-slider-caption.png);
	background-repeat: repeat;
	background-position: 0;}
#heroSlider span.state:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
#heroSlider span.state h1 {
	font-size:40px!important;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif!important;
	letter-spacing:-0.06em!important;
	font-weight:normal!important;
	line-height:1.0em!important;
	color:#FFF!important;
	text-shadow: none!important;
	margin-top:0px!important;
	margin-right: 0;
	margin-bottom: 7px!important;
	margin-left: 0;
	padding:0px!important;}
#heroSlider span.state p {
	width:400px;
	line-height:20px;
	margin-bottom:0;
	color:#FFF;
	padding-bottom:15px;
	font-family: "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif!important;}


#heroSlider #home_slideshow_violator #project_caption{display:none; padding:4px 10px; color:#fff; float:left; font-weight: bold;}
#heroSlider #home_slideshow_violator #project_caption a{margin-left:8px; font-weight: bold;}
#heroSlider #home_slideshow_violator #project_caption a:hover{text-decoration:none; background-image:url(/assets/gfx/pinkdot_standard.gif); background-repeat:repeat-x; background-position:bottom;}


/*
===========================================================================================================================================
	
	03: INTERACTIVE FEATURED TABS
	
===========================================================================================================================================
*/

div#feature_list {
	width: 952px;
	height: 320px;
	overflow: hidden;
	position: relative;}

div#feature_list ul {
	position: absolute;
	top: 0;
	list-style: none;	
	padding: 0;
	margin: 0;}
ul#tabs {
	right: 0;
	float:right!important;
	z-index: 2;
	width: 280px;}
ul#tabs li { }
ul#tabs li img {
	padding: 5px;
	border: none;
	float: left;
	margin: 10px 10px 0 0;}
ul#tabs li a {
	color: #00587A!important;
	text-decoration: none;
	display: block;
	padding-left:45px;
	height: 58px;
	outline: none;
	padding-top: 12px;
	padding-right: 5px;
	padding-bottom: 10px;
	background-image: url(../images/hero/featurelist-tab-off.png);}
ul#tabs li a:hover {
	color: #333!important;
	text-decoration: none;
	background-image: url(../images/hero/featurelist-tab-on.png);}
ul#tabs li .title {
	margin: 0;
	line-height:1.0em;
	font-size: 15px;
	font-weight:bold;
	text-transform: uppercase;
	padding-bottom: 2px;}
ul#tabs li a span {
	font-family: "trebuchet ms", sans-serif!important;
	line-height:1.1em!important;
	font-size: 12px;
	color: #666!important;}
ul#tabs li a:hover span {
	color: #333!important;}		
ul#tabs li a.current {
	color: #FFF!important;
	background-image: url(../images/hero/featurelist-tab-current.png);}
ul#tabs li a.current:hover {
	text-decoration: none;
	cursor: default;}
ul#tabs li a.current span {
	color: #FFF!important;}
	
	

ul#output {
	left: 0;
	float:left;
	width: 705px;
	height: 320px;
	position: relative;}
ul#output li {
	position: absolute;
	width: 705px;
	height: 320px;}
ul#output li span.caption {
	position:relative;
	float:left;
	top:-170px;
	left:0px;
	width:440px;
	height:140px;
	font-size:14px;
	color:#fff;
	zoom:1;
	z-index:1;
	background-image: url(../images/hero/bg-transparent-caption.png);
	background-repeat: repeat;
	background-position: 0;
	padding-top: 8px;
	padding-right: 15px;
	padding-bottom: 7px;
	padding-left: 15px;}
ul#output li span.caption:after { content:'.'; display:block; height:0; clear:both; visibility:hidden; }
	
ul#output li span.caption h1 {
	font-size:31px!important;
	font-family: "trebuchet ms", sans-serif!important;
	letter-spacing:-0.06em!important;
	font-weight:normal!important;
	line-height:1.0em!important;
	color:#FFF!important;
	text-shadow: none!important;
	margin-top:0px!important;
	margin-right: 0;
	margin-bottom: 6px!important;
	margin-left: 0;
	padding:0px!important;}
ul#output li span.caption p {
	width:430px;
	font-size:15px!important;
	line-height:1.3em;
	margin-bottom:0;
	color:#FFF;
	margin-bottom:15px;
	font-family: "trebuchet ms", sans-serif!important;}