/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Author: Stamatis Kritikos
	Latest update: 10th of June, 2006
	©2006, www.stamatiskritikos.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Basic Styling ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	We set the page background, the font color and size, 
	center the template...
	We set the relative font size of IE5-5.5 differently 
	to everything else, and we scale it from there.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body {
	background: #5986af url("http://symichat.com/templates/cogentBlue/images/gradient.gif") top left repeat;
	line-height: 1.1em;
	color: #111;
	font: small Verdana, Geneva, Arial, Helvetica, sans-serif!important;
	font /*IE5-5.5 Hack*/: x-small Verdana, Geneva, Arial, Helvetica, sans-serif;
	text-align: center; /* center template 1/2 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Whitespace Reset"
	We define padding and margin for all elements and
	we scale it from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
body, form, input {	
	padding: 0px;
	margin: 0px;
}
h1, h2, h4, h5, h6, p, pre, blockquote, form, label, fieldset, address { 
	margin: 5px 0; 	
}
ul, ol, dl {
	margin-top: 5px;
	margin-bottom: 5px;
}
ul, li {
	margin-left: 5px;
}
dd, blockquote {
	margin-left: 40px;
}
fieldset {
	padding: 10px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Hyperlink Control"
	We keep the underline since users have gotten used
	to that line defining a hyperlink and we just change 
	the mouseover color.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
a {
	color: #036;
	text-decoration: none;
	font-weight: bold;
}
a:hover {
	text-decoration: underline;
}
.Authors a:link, .Authors a:active, .Authors a:visited {
	color: #7c1804;
	text-decoration: none;
	font-weight: bold;
}
.Authors a:hover {
	text-decoration: underline;
}
.subnav a:link, .subnav a:visited {
	color: #036;
	text-decoration: none;
	font-weight: bold;
}
.subnav a:hover {
	text-decoration: underline;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Heading Settings"
	We define font size and color mostly among some 
	other more specific things.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
h1, h2, h3 {
	color: #036;
	font-family: 'Trebuchet MS', Arial, Helvetica, sans-serif;
}
h1 {
	font-size: 18px;
	position: relative;
}
h2 {
	font-size: 15px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Image Control"
	We remove the border from all images and we scale it
	from there if we need to.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
img {
	border: 0;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Layers Time ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Global Wrapper"
	This is our parent layer which includes them all.
	From here we mainly choose the width of our page.
	We made it fixed and appropriate for 800x600 res.
	However, if you change it, remember to also alter 
	the width for the "center" layer. If you wish to go
	for relative width, well... be careful.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#monster {
	background: #ace;
	width: 900px;
	text-align: center; /* center tabbed menu 1/2 */
	margin: 0 auto; /* center template 2/2 */
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Tabbed Menu"
	We mainly set the width of the tabs as a whole.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navcontainer {
	clear: left;
	z-index: 3;
	position: relative;
	margin: 0 auto; /* center tabbed menu 2/2 */
	width: auto;
	background-color: #5986af;
	background-position: center top;
	background-repeat: no-repeat;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	The blue line below the tabs.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#tabbar {
	position: relative;
	background: #1f5791;
	font: bold italic 10px Verdana, Arial, Helvetica, sans-serif;
	text-align: center;
	clear:both;	 
	height:14px;	
	margin:0;	
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Navigation
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#navigation {
	font-family: verdana, tahoma, "trebuchet ms", Arial, Helvetica, sans-serif;
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 2px;
	padding-top: 5px;
	background: #eee url("http://symichat.com/templates/cogentBlue/images/left.jpg") top left repeat-x;
	border-top: 5px solid #e5edf5;
	border-left: 10px solid #5986af;
	border-right: 10px solid #5986af;
	border-bottom: 5px solid #e5edf5;
}
#navigation ul {
	list-style: none;
	margin: 0;
	padding: 4px 0 2px 0;
	border-bottom: 1px solid #e5edf5;
}
#navigation li {
	display: inline;
}
#navigation a:link, #navigation a:visited, #navigation a:active { 
	padding: 3px 10px 2px 10px;
	color: #036;
	text-decoration: none;
}
#navigation a:hover {
	color: #069;
	border-bottom: 6px solid #036;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Columns"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Left Column
	"sidemenu" div is included in here.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#left {
	width: 225px;
	float: left;
	line-height: 14px;
	color: #000;
	font-size: 11px;
	text-align: left;
	margin-left: 10px;
	margin-right: 15px;
	font: 11px/19px Tahoma, Verdana, Geneva, Arial, Helvetica, sans-serif;
	letter-spacing: 1px;
}
.lc {
	padding: 10px;
	background: #b9d8f6 url("http://symichat.com/templates/cogentBlue/images/left.jpg") top left repeat;
	margin: 10px 0;
	border-right: 1px solid #069;
	border-bottom: 1px solid #069;
	border-left: 1px solid #eee;
	border-top: 1px solid #eee;
}
.lc p {
	padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Center Column
	Where the main content goes...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#center {
	width: 900px;
	height: auto;
	color: #111;
	line-height: 16px;
	letter-spacing: 1px;
	text-align: left;
}
#cc {
	padding: 15px;
}
#cc p {
	padding: 0 0 10px 10px;
}
#cc h1, #cc h2, #cc h3 {
	color: #069;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Footer"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footer {
	width: auto!important;
	background: #72a0cc url("http://symichat.com/templates/cogentBlue/images/sharp.gif") top left repeat;
	clear: both;
	position: relative;
	text-align: center;
	font-size: 10px;
	line-height: 0.9em;
	padding: 0;
	margin-top: 40px;
	color: ace;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Footer Menu"
	This could be a nice place to fill with useful 
	shortcuts of pages within your site so they'd be
	easily accessible.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footmenu {
	background: #1f5791;
	border-top: 4px solid #72a0cc;
	color: #ADADAD;
	font: 10px Arial,Verdana,Helvetica,sans-serif;
	position: relative;
	text-align: center;
	z-index: 1;
	clear: both;
	margin: 0 0 3px 0;
	padding: 3px;
}
#footmenu a:link, #footmenu a:visited {
	color: #E3EDF4;
}
#footmenu a:hover {
	color: #fff!important;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Miscellaneous Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.author {
	padding: 5px 0;
}
.clear {
	clear: both;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Forms Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
fieldset {
	margin: 1em 0;
	border-top: 1px solid #ccc;
	border-bottom: none;
	border-left: none;
	border-right: none;
}
legend {
	margin: 1em 0;
	padding: 0 .5em;
	color: #069;
	background: #f7f7f7;
	font-size: 1.3em;
	font-weight: bold;
}
label {
	width: 170px;
	padding: 0 1em;
	text-align: right;
	float: left;
}
fieldset div {
	margin-bottom: .5em;
	padding: 0;
	display: block;
}
fieldset div input, fieldset div textarea {
	width: 150px;
	border-top: 1px solid #555;
	border-left: 1px solid #555;
	border-bottom: 1px solid #ccc;
	border-right: 1px solid #ccc;
	padding: 1px;
	color: #333;
	background-color: #eee;
}
fieldset div select {
	padding: 1px;
}
div.fm-multi div {
	margin: 5px 0;
}
div.fm-multi input {
	width: 1em;
}
div.fm-multi label {
	display: block;
	width: 200px;
	padding-left: 5em;
	text-align: left;
}
#fm-submit {
	clear: both;
	padding-top: 1em;
	text-align: center;
}
#fm-submit input {
	border: 1px solid #333;
	padding: 2px 1em;
	background: #666;
	color: #fff;
	font-size: 100%;
}
input:focus, textarea:focus {
	background: #f7f7f7;
	color: #000;
}