/* ---------------------
title: Minimus Maximus stylesheet
author: simon tweedale
created: 12/11/09
version: 1.0
--------------------- */

	
/* -----------------------------------------------------------------------------
   generic style */
   
   
		
		
		
		.stripViewer .panelContainer .panel ul {
			text-align: left;
		
		}
		
		.slider-wrap { /* This div isn't entirely necessary but good for getting the side arrows vertically centered */
			padding: 0 0 40px;
			position: relative;
			width: 100%;
			background: url(../img/shadow.png) center bottom no-repeat;
		}

		/* These 2 lines specify style applied while slider is loading */
		.csw {width: 100%; height: 460px; background: #fff; overflow: scroll}
		.csw .loading {margin: 200px 0 300px 0; text-align: center}

		.stripViewer { /* This is the viewing window */
			position: relative;
			overflow: hidden; 
			border: 3px solid #d4c3c3; /* this is the border. should have the same value for the links */
			margin: auto;
			width: 927px; /* Also specified in  .stripViewer .panelContainer .panel  below */
			height: 300px;
			clear: both;
			-moz-border-radius: 2px;
			
		}
		
		.stripViewer .panelContainer { /* This is the big long container used to house your end-to-end divs. Width is calculated and specified by the JS  */
			position: relative;
			left: 0; top: 0;
			width: 100%;
			list-style-type: none;
			/* -moz-user-select: none; // This breaks CSS validation but stops accidental (and intentional - beware) panel highlighting in Firefox. Some people might find this useful, crazy fools. */
		}
		
		.stripViewer .panelContainer .panel { /* Each panel is arranged end-to-end */
			float:left;
			height: 100%;
			position: relative;
			width: 927px; /* Also specified in  .stripViewer  above */
		}
		
		.stripViewer .panelContainer .panel .wrapper { /* Wrapper to give some padding in the panels, without messing with existing panel width */
			padding: 10px 70px;
			color: #fff;
		}
		
		
		.stripNav ul { /* The auto-generated set of links */
			display: none;
		}
		
		
		.stripNavL, .stripNavR { /* The left and right arrows */
			position: absolute;
			top: 230px;
			text-indent: -9000em;
		}
		
		.stripNavL a, .stripNavR a {
			display: block;
			height: 58px;
			width: 58px;
		}
		
		.stripNavL {
			left: 40px;
			margin-top: -85px;
			z-index: 2;
		}
		
		.stripNavR {
			right: 40px;
			margin-top: -85px;
			z-index: 3;
		}
		
		.stripNavL {
			background: url("../img/arrow-left.png") no-repeat center;
		}
		
		.stripNavR {
			background: url("../img/arrow-right.png") no-repeat center;
		}
	
	
/* -----------------------------------------------------------------------------
   panels style */

#allpanel	{
	background: url(../img/all-panel-bg.jpg);
	height: 300px;
	}

#minipanel	{
	background: url(../img/mini-panel-bg.jpg);
	height: 300px;
	}

#midipanel	{
	background: url(../img/midi-panel-bg.jpg);
	height: 300px;
	}

#maxipanel	{
	background: url(../img/maxi-panel-bg.jpg);
	height: 300px;
	}

#megapanel	{
	background: url(../img/mega-panel-bg.jpg);
	height: 300px;
	}
	
.panelContainer h3	{
	text-indent: -9999px;
	width: 240px;
	height: 92px;
	margin-bottom: 0;
	}

.panelContainer ul	{
	font-size: 1.2em;
	}

#minipanel h3 {
	background: url(../img/h2-minimus.png) top left no-repeat;
	}

#midipanel h3 {
	background: url(../img/h2-midimus.png) top left no-repeat;
	}

#maxipanel h3 {
	background: url(../img/h2-maximus.png) top left no-repeat;
	}

#megapanel h3 {
	background: url(../img/h2-megamus.png) top left no-repeat;
	}

.col1	{
	width: 290px;
	float: left;
	margin-right: 32px;
	}
	
.col1 p {
	padding-left: 30px;
	}
	
.col1 ul {
	margin: 0;
	padding-left: 30px;
	}

.col1 li {
	list-style: none;
	background: url(../img/tick.png) 5px 50% no-repeat;
	padding-left: 40px;
	margin-bottom: 8px;
	font-weight: bold;
	font-size: 0.9em;
	}

.col2	{
	width: 290px;
	float: left;
	margin-right: 12px;
	padding: 10px 0;
	}
	
.col2 ul {
	margin: 0;
	}

.col2 li {
	list-style: none;
	padding: 5px 0 5px 35px;
	font-weight: bold;
	font-size: 0.9em;
	}

.col2 li.mail {
	background: url(../img/icon-email.png) left 50% no-repeat;
	}

.col2 li.domain {
	background: url(../img/icon-domain.png) left 50% no-repeat;
	}

.col2 li.clock {
	background: url(../img/icon-clock.png) left 50% no-repeat;
	}

.col2 li.pages {
	background: url(../img/icon-webpage.png) left 50% no-repeat;
	}

.col2 li.animated {
	background: url(../img/icon-animated.png) left 50% no-repeat;
	}
	
.col2 li.photo {
	background: url(../img/icon-photo.png) left 50% no-repeat;
	}

.col2 li.news {
	background: url(../img/icon-news.png) left 50% no-repeat;
	}
	
.col2 li.blog {
	background: url(../img/icon-blog.png) left 50% no-repeat;
	}


.col3	{
	width: 140px;
	float: left;
	}
	
.col3 p	{
	width: 79px;
	height: 123px;
	background: url(../img/shield.png) 5px top no-repeat;
	font-weight: bold;
	font-size: 1.7em;
	padding: 20px 40px;
	font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
	line-height: 30px;
	margin: 0;
	text-align: center;
	}

.col3 p	strong{
	font-size: 1.5em;
	letter-spacing: -1px;
	display: block;
	margin-top: 8px;
	}
	
.col3 p	em {
	font-size: 0.8em;
	color: #ccc;
	display: block;
	}

.col3 a	{
	display: block;
	width: 180px;
	padding: 10px 0;
	color: #fff;
	margin: 0 auto;
	text-decoration: none;
	text-align: center;
	font-size: 1.4em;
	margin-top: 30px;
	-moz-border-radius: 3px;
	}
	
#minibtn a	{
	background-color: #6c6b70;
	border: 1px solid #eee;
	}

#minibtn a:hover	{
	background-color: #58575B;
	}
	
#midibtn a	{
	background-color: #222;
	border: 1px solid #666;
	}

#midibtn a:hover	{
	background-color: #000;
	}
	
#maxibtn a	{
	background-color: #983E00;
	border: 1px solid #e08e06;
	}

#maxibtn a:hover	{
	background-color: #702E00;
	}

#megabtn a	{
	background-color: #861009;
	border: 1px solid #e73a4d;
	}

#megabtn a:hover	{
	background-color: #670B06;
	}