/* CSS Document for Easimail*/

*{
	font-family:Arial;
	font-size:12px;}

html, body{
	height: 100%;
	background-color:#CCCCCC;
	margin:0;}
	
#border{
	width:800px;
	border:1px solid #999999;
	background-color:#FFFFFF;
	margin:0 auto 0 auto;}

/* ---> Header <------------------------------------------------------------------ */

#header{
	border-bottom:1px solid #CCCCCC;
	height:100px;}

#box1, #box2, #box3, #box4{
	display:block;
	width:180px;
	height:80px;
	float:left;
	background-repeat:no-repeat;
	text-align:center;
	padding-top:20px;
	padding-left: 20px;
	text-decoration:none;}

#box2 span, #box3 span, #box4 span{
	color: #FFFFFF;
	text-decoration:none;}

#box1{
	background-image:url(../_images/easimail_logo.gif);
	background-color:#FFFFFF;}
	
#box2{
	background-image:url(../_images/box2.gif);
	background-color:#fcb713;}
	
#box2:hover{
	background-image:url(../_images/box2over.gif);}

#box3{
	background-image:url(../_images/box3.gif);
	background-color:#d8550a;}
	
#box3:hover{
	background-image:url(../_images/box3over.gif);}

#box4{
	background-image:url(../_images/box4.gif);
	background-color:#bd0904;}
	
#box4:hover{
	background-image:url(../_images/box4over.gif);}
	
.cat{
	font-size: 16px;
	font-weight:bold;
	display:block;
	color:inherit;}
	
.desc{
	display:block;
	width:144px;
	margin-left: 32px;
	margin-top:10px;}
	
/* ---> Navi <------------------------------------------------------------------ */

#navigation{
	height:30px;
	border-bottom: 3px solid #bd0904;}

#navi{
	padding:8px 0;
	margin:0;
	position:absolute;}

#navi li{
	float: left;
	display:block;
	list-style:none;
	margin:0;
	margin-left:25px;}
	
#navi li a {
	color: #bd0904;
	font-weight:bold;
	font-size:14px;
	text-decoration:none;
	margin-left:5px;
	margin-right:5px;}

#navi li a:hover {	
	color:#fcb713;}

#sel{
	background-image: url(../_images/sel.gif);
	height:22px;}
	
#sel a{
	background-image: url(../_images/sela.gif);
	display:block;
	height:25px;}

/* ---> Navi - Client Login <------------------------------------------------------------------ */
	
#frmLogger{
	padding:5px 0 0 5px;
	margin:0;
	float:right;
	border-left:1px solid #CCCCCC;
	width:194px;
	height:25px;}
	
#frmLogger label{
	font-size:11px;}
	
#txtClientLogin, #txtClientPassword{
	width:43px;
	color: #CCCCCC;
	font-size:11px;
	padding-left:2px;}
	
#login_submit{
	width:30px;
	background-color:#bd0904;
	color:#FFFFFF;
	font-weight:bold;}

/* ---> Content <------------------------------------------------------------------ */

#content{
	padding:30px 10px 30px 30px;
	width:560px;
	float:left;}
	
h1{
	font-size:16px;}
	
h2{
	color:#bd0904;
	margin: 20px 0 -5px 0;}

#content p, #content ul{
	margin-bottom:-3px;}
	
#content ul li{
	margin-left: -22px;
	list-style-image:url(../_images/arrow.gif);}

#content a{
	color:#bd0904;}
	
#content a:hover{
	text-decoration:none;}
	
#content i{
	font-style:normal;
	color: #999999;}

/* ---> Content -> Demo Page <------------------------------------------------------------------ */	
	
.next{
	margin-left:5px;}
	
/* ---> Content -> Examples Page <------------------------------------------------------------------ */
	
.space{
	margin-top:25px;}

/* ---> Content -> Costing Page <------------------------------------------------------------------ */

.largelist li{
	margin-bottom:5px;}	

.largelist b{
	color: #bd0904;}
	
.examples{
	margin-right: 62px;
	border:0;}
.bottom25px{	
	margin-bottom: 25px;}

#costing_table{
	margin-top:20px;
	width:370px;}

#costing_table div{
	float:left;
	border: 1px solid #CCCCCC;
	margin:1px;
	width:170px;
	height:14px;
	text-align:center;}
	
#costing_table .short{
	width:83px;}

/* ---> Content -> Input Forms <------------------------------------------------------------------ */

.input_form label{
	float:left;
	display:block;
	width:125px;
	clear:both;}
	
.w210{
	width:210px;
	margin-left:5px;
	float:left;
	margin-bottom: 2px;
	margin-right: 60px;}
	
.actions{
	clear:both;
	margin-top:20px;
	text-align:right;
	width:343px;}
	
/* ---> Content -> Portfolio <------------------------------------------------------------------ */

.premclients{
	margin-right:15px;
	margin-bottom:5px;
	border:0;}

/* ---> Boxes (right content area) <------------------------------------------------------------------ */

#boxes{
	width: 200px;
	float:left;
	margin-top:40px;
	padding-bottom:30px;}
	
.box{
	border:1px solid #CCCCCC;
	border-right:0;
	margin-bottom:10px;
	padding-bottom:5px;}
	
.box h3{
	background-color:#bd0904;
	color:#FFFFFF;
	margin:0 0 5px 0;
	padding:2px 5px 2px 5px;}
	
.box p{
	font-size:11px;
	padding:2px 5px 2px 5px;
	margin:0;}
	
.box p b, .box p span{
	font-size:11px;}

.box p span{
	margin-top:10px;
	display:block;}
	
.box a{
	font-size:11px;
	color: #bd0904;}
	
.box a:hover{
	text-decoration: none;}
	
.box img{
	border:1px solid #CCCCCC;
	margin:2px 6px 2px 5px;}

.box ul {
	margin:0;}

.box ul li{
	font-size:11px;
	margin-left: -20px;
	list-style:none;
	list-style-image:url(../_images/arrow-s.gif);}

#google-search{
	margin:0;}

#searchfield{
	width:128px;
	color: #CCCCCC;
	font-size:11px;
	padding-left:2px;
	margin-left:5px;}

#search_submit, #cmdSubmit, .submit, .submit_d{
	width:50px;
	background-color:#bd0904;
	color:#FFFFFF;
	font-weight:bold;
	text-align:center;}
	
.submit_d{
	background-color: #999999;
	color:#CCCCCC;}

.inv{
	display:none;} /* for the random client feedback */
	
.box .noborder{
	border:0;}

/* ---> Boxes ---> FAQ Question Form <------------------------------------------------------------------ */

#quest_form{
	margin:0;
	padding:0;}

.box label{
	float:left;
	display:block;
	font-size:11px;
	width:65px;
	margin-left:5px;
	padding-top:5px;}

.w120{
	width:118px;
	margin-top:2px;}
	
.w180{
	width:183px;
	margin-left:5px;}
	
#cmdSubmit{
	margin-left: 142px;
	margin-top:5px;}

/* ---> Footer <------------------------------------------------------------------ */

#footer{
	heigth: 30px;
	width:740px;
	border-top: 3px solid #bd0904;
	margin:0 auto 0 auto;
	background-color:#FFFFFF;
	padding:5px 30px 7px 30px;
	clear:both;}
	
#footer p, #footer p a{
	color: #999999;
	font-size:11px;
	margin:0;}
	
#footer p a:hover{
	text-decoration:none;}

#footer img{
	float:right;
	margin-left:45px;
	border:0;}
	
/* ---> Positions <------------------------------------------------------------------ */

.right{
	float:right;}
	
/* ---> Input Fields / selected / valid / invalid <------------------------------------------------------------------ */

.inp_selected{
	border:2px solid #fcb713;}
	
.inp_valid, .inp_invalid{
	background-image:url(../_images/inp-valid.gif);
	background-position:right top;
	background-repeat:no-repeat;
	margin-bottom:4px;
	border:1px solid #CCCCCC;
	padding:1px;}
	
.inp_invalid{
	background-image:url(../_images/inp-invalid.gif);}