/* 	BCurrid Web Tecnnology
		Responsive grid from responsivegridsystem.com
*/
body {
	background: url('images/ocean-tiled.jpg');
	background-repeat: repeat;
	color: #000099;
}
.col span {
	width: 100%;
	padding: 5px; /* .span_1_of_4 border-radius + 1px to keep text out of the inset shadow */
}
.tbl {
	display: table;
	width: 100%;
	max-width: 100%;
	min-width: 100%;
/* 	height: 100%; */
	padding: 0;
	margin: 0;
}
.tbl span {
	display: inline-block;
	vertical-align: top;
}
.tbl span.countdown span {
	display: inline;
}
.row {
	border-bottom: 1px solid;
}
.cell15 {
	width: 13.5%;
	min-width: 13.5%;
	max-width: 13.5%;
}
.cell25 {
	width: 24%;
	min-width: 24%;
	max-width: 24%;
}
.cell50 {
	width: 50%;
	min-width: 50%;
	max-width: 50%;
}
.cell75 {
	width: 70%;
	min-width: 70%;
	max-width: 70%;
}
.title {
	color: red; /*#48891f;*/
	font-family: 'Lobster', cursive;
	font-size: 2em;
	text-shadow: 3px 3px 2px blue;	/* x-coord y-coord blur-radius color */ 
	text-align: center;
}
.h {
	color: red; /*#48891f;*/
	text-shadow: 1.5px 1.5px 3px blue;	/* x-coord y-coord blur-radius color */ 
	font-weight: bold;
	font-size: 1.2em;
}
.header {
	color: #99c2ff;
	background-color: #000099;
}
.adminLink {
	color: #99c2ff;
	font-size: 1.5em; 
	text-decoration: none;
	text-shadow: 0px 0px 2px blue;	/* x-coord y-coord blur-radius color */ 
}
.copy, #refLink {
	text-align: center;
	color: #737373;
}
.archive {
	text-decoration-line: line-through;
	text-decoration-color: red;
}
a:link, a:visited { /* The order is: Link, Visited, Hover, Active */
	text-decoration: none;
	color:  #000099; 
}
.popup a:link, .popup a:visited { /* The order is: Link, Visited, Hover, Active */
	text-decoration: none;
	color:  #000099; 
}
a:hover, a.alt:hover, .popup a:hover, .popup a.alt:hover {
	color: red;
}
a:active {
	text-decoration: none;
	color: #000099;
}
/* ----- Magnific Popup stuff ----- */
	.popup, .popupForm  {
		font-size: 100%;
		line-height: 1em;
		color: white; 
		background: transparent; 
		width: 99%;
		min-width: 99%;
	}
	.popupForm .tbl span {
		padding-top: 5px;
	}
/*
	.popup button, .popupForm button {
		background: transparent;
	}
*/
	.popupForm input, .popupForm select , .popupForm textarea{
		background-color: transparent;
		color: #99c2ff;
	} 
	.popupForm select option {
		background-color: #262f37;
		color: #99c2ff;
	}
	.popup form {
		background: transparent;
	}
	 input[type=radio] ,input[type=checkbox] { 
		color:#99c2ff;
		box-shadow: none;
	} 

/* ----- Responsive grid stuff ----- */
/*  SECTIONS  */
.section {
	clear: both;
	padding: 0px;
	margin: 0px;
}

/*  COLUMN SETUP  */
.col {
	display: block;
	float:left;
	margin: 1% 0 1% 1.6%;
}
.col:first-child { margin-left: 0; }

/*  GROUPING  */
.group:before,
.group:after { content:""; display:table; }
.group:after { clear:both;}
.group { zoom:1; /* For IE 6/7 */ }
/*  GRID OF FOUR  */
.span_4_of_4 {
	width: 100%;
}
.span_3_of_4 {
	width: 74.6%;
}
.span_2_of_4 {
	width: 49.2%;
}
.span_1_of_4 {
	width: 23.8%;
}
.bg {
	background-color: #99c2ff;
	opacity: 0.80;
	border-radius: 4px; 
	box-shadow: inset 0 0 10px #1b2126;
}


/* Divide and Conquer
Let's say you're pulling items from a database, and you might have lots of similar sized divs in the same section but you can't add in the code to break them out into new horizontal rows.
Some nth-child jiggery-pokery removes the left margin and puts every fourth div after the first one into a new row. */
.span_1_of_4:nth-child(4n+1) { 
	clear:left; 
	margin-left: 0;
	}

/*  GO FULL WIDTH BELOW 480 PIXELS */
@media only screen and (max-width: 480px) {
	.col {  margin: 1% 0 1% 0%; }
	.span_1_of_4, .span_2_of_4, .span_3_of_4, .span_4_of_4 { width: 100%; }
}

/* ***********************************************************************
Overrides for ResponsiveVerticalTabs.css */
		ul.tabs { 
			width: 10%;
		}
		ul.tabs li {
			background-color:#99c2ff;
			opacity: 0.50;
		}
		ul.tabs li.active {
			background-color: #99c2ff;
			opacity: 0.80;
			border: none;
		}
		.tab_container {
			background: #99c2ff;
			opacity: 0.80;
			border: none;
			width: 89%;
			min-height: 400px; 
		} 
/* **********************************************************************/