@charset "UTF-8";

color_setup {
<!--#include virtual="/css/light_blues.css" -->
<!--#echo var="color-set" -->
}

body {
	font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
	/* background: #4E5869; */
	background: <!--#echo var="color-background" -->;
	margin: 0;
	padding: 0;
	color: #000;
	max-width: 800px;
	min-width: 400px;
	min-height: 480px;
}

/* ~~ Element/tag selectors ~~ */
ul, ol, dl {
	padding: 0;
	margin: 0;
}
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;
	padding-right: 2px;
	padding-left: 2px;
	color:#666
}
a img {
	border: none;
}
h1 {
	font-size: 24px;
	font-weight:bold;
	color: <!--#echo var="color-nav-hover" -->;
}
h2 {
	font-size: 18px;
	font-weight:bold;
	color: <!--#echo var="color-nav-hover" -->;
}
h3 {
	font-size:20px;
	font-weight:bold;
	color: <!--#echo var="color-nav-hover" -->;
}
p {
	font-size: 18px;
}
li, td {
	font-size: 18px;
}

/* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
a:link {
	color:#414958;
	text-decoration: none;
}
a:visited {
	color: #4E5869;
	text-decoration: underline;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	text-decoration: none;
}

.menutext {
	font-size:14px;
	padding-top: 4 px;
	padding-bottom: 4 px;
}

/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;
	max-width: 2400px;
	min-width: 1000px;
	min-height: 480px;
	background: #FFF;
	overflow: hidden;
}


.img_block {
}
.portrait {
}

.banner {
	width:100%;
	text-align:center;
}
.content {
	margin-top: 2px;
	width: 90%;
	float: left;
	padding: 2px 0;
}
.pagecontain {
	margin-top: 12px;
	width: 90%;
	margin: 20px 20px;
	padding: 20px 20px;
}
.topbar {
	padding: 8px;
	margin: 8px;
	border: 4px solid <!--#echo var="color-background" -->;
	background: #FEFEFE;
	-moz-border-radius: 12px;
	border-radius: 12px;
}
.column1 {
	/*float: left;*/
	float: left;
	width: 33%;
	margin-top: 2px;
	background: <!--#echo var="color-sidebar" -->;
	padding: 2px 0;
}
.column2 {
	float: left;
	width: 33%;
	left: 34%;
	margin-top: 2px;
	background: #F3F3F3;
	/* background:  <!--#echo var="color-sidebar" -->; */	/* medium gray-blue */
	padding: 2px 0;
}
.column3 {
	float: left;
	width: 34%;
	left: 67%;
	margin-top: 2px;
	background: <!--#echo var="color-sidebar" -->;	/* pale green */
	padding: 2px 0;
}
.columnleft {
	float: left;
	width: 33%;
	margin-top: 2px;
	background: <!--#echo var="color-sidebar" -->;	/* pale green */
	padding: 2px 0;
}
.doublewide {
	float: left;
	width: 66%;
	left: 34%;
	margin-top: 2px;
	background: #F3F3F3;
	padding: 2px 0;
}
.colbox {
	padding: 8px;
	margin: 8px;
	border: 2px solid <!--#echo var="color-background" -->;
	-moz-border-radius: 6px;
	border-radius: 6px;
}
.sidebar4 {
	float: right;
	width: 15%;
	margin-top: 20px;
	padding: 2px 0;
}
.footer {
	padding: 10px 20px;
	background: #6F7D94;
	color: #FFFFFF;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
}
.floatbar {
	float: left;
	width: 120%;
	background: #76a67b; /* #93A5C4; */
	padding-bottom: 2px;
	position: relative;
	visibility: hidden;
	left: 100%;
	top: 4px;
}
.card {
	padding: 8px;
	margin: 8px;
	border: 4px solid #CCC;
	background: #FEFEFE;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.idea {
	padding: 8px;
	margin: 8px;
	border: 4px solid <!--#echo var="color-background" -->;
	background: #FEFEFE;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.idea_title {
	background: 	<!--#echo var="color-sidebar" -->;	/* pale green */
	margin-top: 	14px;
	margin-bottom: 	2px;
	margin-left:	12px;
	padding-top:	30px;
	padding-bottom: 4px;
	padding-left:	12px;
	padding-right:	12px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.idea_short {
	font-size: 20px;
	font-style: normal;
	padding: 10px;
	margin:  10px;
	color:#666;
}
.idea_med {
	font-size: 18px;
	padding: 20px;
	margin:  20px;
	color:#666;
}
.idea_long {
	font-size: 18px;
	padding: 20px;
	margin:  20px;
	color:#666;
}
.commentbox {
	font-size: 14px;
	font-style:italic;
	color:#666;
	width:60%;
	border: 4px solid #CCC;
	padding: 20px;
	margin:  20px;
	-moz-border-radius: 8px;
	border-radius: 8px;
}

.descbox {
	width:70%;
	float:left;
}
.votebox {
	width:25%;
	float:right;
}
.clear {
	clear:both;
}

/* ~~ This grouped selector gives the lists in the .content area space ~~ */
.content ul, .content ol { 
	padding: 2px 2px 2px 2px;
}

.topmenu {
	/*float: left;*/
	left: 30%
	width: 100%;
	/* background: #93A5C4; */	/* medium gray-blue */
	background: <!--#echo var="color-nav" -->;
	padding-bottom: 28px;
	margin-bottom: 32px;
}

/* Sidebar 1 - OLD menu navigation */
.menu_bar {
}
ul.nav {
	list-style: none; /* this removes the list marker */
	display: inline;
	margin-bottom: 8px;
}
ul.nav li {
	border-bottom: 1px solid #666;
	border-left: 1px solid #666; /* top border - all others use bottom on LI */
	border-right: 1px solid #666; /* top border - all others use bottom on LI */
	list-style: none; /* this removes the list marker */
	display: inline;
}
ul.nav a, ul.nav a:visited {
	padding: 2px 6px 2px 8px;
	display: inline;
	text-decoration: none;
	/* font-weight: bold; */
	/* background: #8090AB; */	/* steel gray */
	background: <!--#echo var="color-nav" -->;	/* main nav color */
	color: #000;
}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {
	background: <!--#echo var="color-nav-hover" -->;
	color: #FFF;
}

/* new dropdown navigation styling */
/* 
	LEVEL ONE
*/
ul.dropdown                         { position: relative; }
ul.dropdown li                      { font-size: 14px; color: #bbb; list-style: none; float: left;
										background: <!--#echo var="color-nav" -->; }
ul.dropdown a:hover		            { color: <!--#echo var="color-nav-hover" -->; }
ul.dropdown a:active                { color: <!--#echo var="color-nav-hover" -->; }
ul.dropdown li a                    { display: block; padding: 4px 18px;
	 								  color: #222 }
ul.dropdown li:last-child a         { border-right: none; } /* Doesn't work in IE */
ul.dropdown li.hover,
ul.dropdown li:hover                { background: <!--#echo var="color-nav-hover" -->; color: black; position: relative; }
ul.dropdown li.hover a              { color: black; }


/* 
	LEVEL TWO
*/
ul.dropdown ul 						{ width: 200px; visibility: hidden; position: absolute; top: 100%; left: 0; }
ul.dropdown ul li 					{ font-weight: normal; background: #f6f6f6; color: #000; 
									  padding: 2px 18px; border-bottom: 1px solid #ccc; float: none; }
									  
                                    /* IE 6 & 7 Needs Inline Block */
ul.dropdown ul li a					{ border-right: none; width: 100%; display: inline-block; } 

/* 
	LEVEL THREE
*/
ul.dropdown ul ul 					{ left: 100%; top: 0; }
ul.dropdown li:hover > ul 			{ visibility: visible; }

/* nav2 (small in-page submenu) */
ul.nav2 {
	list-style: none; /* this removes the list marker */
	border-top: 1px solid #666; /* top border - all others use bottom on LI */
	margin-bottom: 2px;
	color: #333;
}
ul.nav2 li {
	border-bottom: 1px solid #666;
	background: <!--#echo var="color-nav" -->;	/* main nav color */
	font-size:14px;
	color: #333;
	width: 50%;
}
ul.nav2 a, ul.nav2 a:visited {
	padding: 1px 1px 6px 6px;
	display: block; /* whole area mouse click. */
	text-decoration: none;
	background: <!--#echo var="color-nav" -->;	/* secondary nav color */
	color: #333;
}
ul.nav2 a:hover, ul.nav2 a:active, ul.nav2 a:focus {
	background: <!--#echo var="color-nav-hover" -->;	/* mouseover color */
	color: #FFF;
}

.listnamebox {
	padding: 8px 2px;
}


/* ~~ miscellaneous float/clear classes ~~ */
.fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
	float: right;
	margin-left: 2px;
}
.fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
	float: left;
	margin-right: 2px;
}
.clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the overflow:hidden on the .container is removed */
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* 'widths' sub menu */
#layoutdims {
	clear:both;
	background:#eee;
	border-top:4px solid #000;
	margin:0;
	padding:6px 15px !important;
	text-align:right;
}
/* column container */
.colmask {
	position:relative;	/* This fixes the IE7 overflow hidden bug */
	clear:both;
	float:left;
	width:100%;			/* width of whole page */
	overflow:hidden;		/* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
	float:left;
	width:100%;			/* width of page */
	position:relative;
}
.col1,
.col2,
.col3 {
	float:left;
	position:relative;
	padding:0 0 1em 0;	/* no left and right padding on columns, we just make them narrower instead 
					only padding top and bottom is included here, make it whatever value you need */
	overflow:hidden;
}
/* 3 Column settings */
.threecol {
	background:#eee;		/* right column background colour */
}
.threecol .colmid {
	right:33%;			/* width of the right column */
	background:#fff;		/* center column background colour */
}
.threecol .colleft {
	right:33%;			/* width of the middle column */
	background:#f4f4f4;	/* left column background colour */
}
.threecol .col1 {
	width:33%;			/* width of center column content (column width minus padding on either side) */
	left:100%;			/* 100% plus left padding of center column */
}
.threecol .col2 {
	width:33%;			/* Width of left column content (column width minus padding on either side) */
	left:34%;			/* width of (right column) plus (center column left and right padding) plus (left column left padding) */
}
.threecol .col3 {
	width:33%;			/* Width of right column content (column width minus padding on either side) */
	left:67%;			/* Please make note of the brackets here:
					(100% - left column width) plus (center column left and right padding) plus (left column left and right padding) plus (right column left padding) */
}