@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; */
	font: 100%/1.4 Ubuntu, 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;
	background-image: url('/images/background.png');
}


.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-middle" -->;
	padding: 2px 0;
}
.column2 {
	float: left;
	width: 33%;
	left: 34%;
	margin-top: 2px;
	background: #F3F3F3;
	/* background:  <!--#echo var="color-middle" -->; */	/* medium gray-blue */
	padding: 2px 0;
}
.column3 {
	float: left;
	width: 34%;
	left: 67%;
	margin-top: 2px;
	background: <!--#echo var="color-middle" -->;	/* pale green */
	padding: 2px 0;
}
.columnleft {
	float: left;
	width: 33%;
	margin-top: 2px;
	background: <!--#echo var="color-middle" -->;	/* 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;
}
.category {
	background: <!--#echo var="color-middle" -->;
}
.idea {
	padding: 8px;
	margin: 8px;
	border: 4px solid <!--#echo var="color-background" -->;
	background: #FEFEFE;
	width: 60%;
	margin-left: 20%;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.idea_title {
	background: 	<!--#echo var="color-middle" -->;	/* pale green */
	margin-top: 	11px;
	margin-bottom: 	2px;
	margin-left:	12px;
	margin-right:	12px;
	padding-top:	30px;
	padding-bottom: 4px;
	padding-left:	24px;
	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 {
	background:	#EEE;
	border: 4px solid <!--#echo var="color-background" -->;
	font-size: 18px;
	padding: 20px;
	margin:  20px;
	color:#666;
	-moz-border-radius: 8px;
	border-radius: 8px;
}
.idea_long {
	font-size: 18px;
	padding: 20px;
	margin:  20px;
	color:#666;
}
.commentlist {
	padding: 8px;
	margin: 8px;
	border: 4px solid <!--#echo var="color-background" -->;
	background: #FEFEFE;
	width: 60%;
	margin-left: 20%;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
.commentbox {
	font-size: 14px;
	font-style:italic;
	color:#666;
	width:80%;
	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 12px; 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 12px; 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) */
}

blockquote {
	display: block;
	padding: -10px 30px;
	width: 90%;
}
blockquote:before, blockquote:after {
	font-family: Georgia;
	font-weight: bold;
	font-style: italic;
	color: #69c;
	display: block;
	font-size: 700%;
	width: 50px;
}
/* Next we’ll define the specific attributes for the opening and closing quotes. We’ll control the position of the quotes with the margin attributes, and in the case of the opening quote — the height. */
blockquote:before {
	content: '\201C';
	height: 40px;
	margin-top: -40px;
	margin-left: -0.6em;
}
blockquote:after {
	/* content: '\201D'; */
	height: 50px;
	margin-top: -60px;
	margin-left: 410px;
}

.imgbox {
}

.imgbig {
	padding-left: 20%;
	padding-right: 5%;
	padding-top: 20px;
	padding-bottom: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.urlbox {
	padding-left: 20px;
	padding-top: 20px;
	padding-bottom: 20px;
}