/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Author: Stamatis Kritikos
	Latest update: 10th of June, 2006
	©2006, www.stamatiskritikos.com
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	*** Basic Styling ***
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
html, body {
height: 100%;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	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: #eee;
	line-height: 1.1em;
	color: #333;
	font: small Verdana, Geneva, Arial, Helvetica, sans-serif!important;
	font: normal small Verdana, 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, ul, ol, dl, fieldset, address { 
	margin: 5px 0; 	
}
dd {
	margin-left: 40px;
}
blockquote {
	margin-left: 2em;
}

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:link, a:visited {
	color: #06c;
}
a:hover {
	color: #8ccc33;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"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: 24px;
	text-align:center;
	margin-top:30px;
}
h2 {
	font-size: 18px;
	margin-left:20px;	
}
h3 {
	font-size: 18px;
	margin-left:40px;
	margin-top:5px;	
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"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 {
	
	width: 1000px;
	text-align: center; /* center tabbed menu 1/2 */
	margin: 0 auto; /* center template 2/2 */
	height: 100%; /* Height Hack 2/3 */
	background-color:#f6f6f6;
}

/*

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Individual Tab Control"
	We make each tab a seperate div so we can have better
	control of the tabbed assembly.
	One nice trick that we achieve this way is the use
	of one image for the two edges of the menu without
	bothering altering the width of the image.
	If you want to add more tabs, just copy and paste
	the whole code of "tabb" or "tabc", give it a name of 
	your choice and remember to define it in your html.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#taba, #tabb, #tabc{
	padding: 4px;
	background-color: #546F9E;
}
#taba {
	background: #003366 ;
	background-position: bottom left;
	padding-left: 25px;
	margin-right: -1px;
}
#tabb {
	background: #003366;
	margin-right: -1px;
	border-left: 1px solid #fff;
}
#tabc {
	background: #003366;
	margin-right: -1px;
	border-left: 1px solid #fff;
}
#tab {
	background: #003366;
	margin-right: -1px;
	border-left: 1px solid #fff;
}

#taba:hover, #tabb:hover, #tabc:hover,#tabd:hover {
	background-color: #8ccc33;
	color: #fff!important;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Left Column
	"sidemenu" div is included in here.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#left {
	width: 160px;
	float: left;
	background: #f6f6f6;
	font-size: 11px;
	text-align: left;
	line-height: 14px;


}
#lc {
	padding: 10px;

}
#lc p {
	padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Side Menu"
	Remove it from your html if you don't need it.
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#sidemenu {
	font-family: Tahoma,Arial,sans-serif;
	clear: left;
	float: left;
	width: 160px;
	margin: 0;
	padding: 0;
	font-size: 12px;
}
#sidemenu ul {	
	list-style: none;
	width: 142px;
	margin: 0 0 10px 0;
	padding: 0;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Set the following to whatever you want for the menu 
	items to have some space between them (e.g. 4px).
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#sidemenu li {
	margin-bottom: 0;
}
#sidemenu li a {
	font-weight: bold;
	height: 30px;
	text-decoration: none;
	display: block;
	padding: 6px 0 4px 10px;
	background: #fff;
	border-left: 4px solid #cccccc;
}
#sidemenu li a:hover {
	color: #286ea0;
	border-left: 4px solid #286ea0;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Center Column
	Where the main content goes...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#center {
	width: 819px;
	float: left;
	background: #fff;
	color: #666;
	line-height: 16px;
	letter-spacing: 1px;
	text-align: left;
    padding-top:15px;
	margin-top:0px;

}
.cc {
	padding:1px;
	margin-top:20px;
	margin-bottom:30px;
	width:780px;
	margin-left:15px;
}
.cc .picleft{
   padding:15px; height:170px;border-bottom:solid 1px #eaeaea;}
.cc .picleft img{
   float:left;
   padding:5px;
   margin:0 15px;
}
.cc .picleft a{
    text-decoration:none;}
.cc .picright{
   padding:15px; height:170px; border-bottom:solid 1px #eaeaea;}
.cc .picright img{
   float:right;
   padding:5px;
   margin:0 15px;
}
.cc .picleft a{
    text-decoration:none;}
.cc .picright a{
    text-decoration:none;}
.cc .text1{padding-top:15px;}
.cc .text1 img{
   float:left;
   padding:5px;
   margin:0 15px;
}
.cc .text1 p{
   margin-left:20px;
   }
.cc .text2{height:330px; width:286px; padding-top:15px; }
.cc .text2 img{
   float:left;
   padding:5px;
   margin:0 15px;
}
.cc.text2 span{
 float:left;
 text-align:center;}
.cc .text3{   height:600px;}
.cc .text3 img{
   float:left;
   padding:5px;
   margin:0 15px;
}
.cc .text3 .tright{
  float:right;
  display:inline;
}
  .cc .text3 .tleft{
  float:left;
  display:inline;}
.cc ul
{ list-style:square; margin-left:20px;}
.cc ul li{
   list-style:none;
   font-size:14px;
   line-height:150%;
   font-family: Verdana, Arial, Helvetica, sans-serif; }
#center p {
   margin-left:20px;
   line-height: 185%;font-size:14px;
   margin-top:0;
   word-wrap: break-word; word-break: normal;}
.pic{
    margin-right:20px;}
 .pic2{
    margin-left:20px;}  
.add{
   margin-top:50px;
   display:inline;}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Right Column
	Good for headlines, ads and so on...
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#right {
	width: 150px;
	float: right;
	background: #eee;
	line-height: 14px;
	color: #444;
	font-size: 11px;
	text-align: left;
	height: 100%; /* Height Hack 3/3 */
}
#rc {
	padding: 10px;
}
#rc p {
	padding: 0 0 10px 2px;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	"Footer"
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
#footer {
	width: auto!important;
	background:#F5F5F5;
	margin-top:0px;
	clear: both;
	position: relative;
	text-align: center;
	font-size: 10px;
	line-height: 0.9em;
	padding: 0;
	display:inline;
}
#footer table{font-size:12px;}

#footer a:link, #footer a:visited {
	color: #424242;
	font-weight: bold;
}
#footer a:hover {
	color: #1f5791!important;
	font-weight: bold!important;
}

/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Miscellaneous Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/
.author {
	padding: 5px 0;
}
.clear {
	clear: both;
}
/*
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
	Forms Styling
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
*/

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;
}

input:focus, textarea:focus {
	background: #f7f7f7;
	color: #000;
}
#fade_focus{
float:left;
    margin-left:104px;
	display:inline;
}