/* 
2009.Cascading Stylesheet 
Created by Atanas Mahony for ChiosOnline - www.chiosonline.gr
*/

@import url(reset.css);
@import url(form.css);
/* Global
----------------------------------------------- */

body{ background:#e7f1fd url(../images/bgrnd_1.jpg) repeat-x; color:#6E6E6E; font-family:"Arial",helvetica,verdana,sans-serif; font-size:12px; line-height:24px; margin:0; padding:0; height:100%;}
body.internal{ background:#e7f1fd url(../images/bgrnd_2.jpg) repeat-x;}

p{color:#494949;}

a:link{ text-decoration:none; }
a:hover{}
a:visited{}
a:active{}

h1{}
h2{}
h3{ font-size:14px;}
h4{}
h5{}
h6{}

small{ font-size:10px; color:#09F;}
address{ font-weight:normal; font-style:normal;}
/* Structure
----------------------------------------------- */

#clip{min-height:100%;
   position:relative;
}

#outer{ background: url(../images/outerbg.jpg) no-repeat center top; margin:0px auto;}

#wrapper{ width:960px; margin: 0 auto; padding-bottom:80px;}

.internal #wrapper{ background: url(../images/intbg.jpg) no-repeat top center;}

#inner{ padding:0px 40px;}


h1#logow2{ margin-top:10px; margin-left:15px;}

#logo{ width:154px; height:60px; background: url(../images/w2logo.png) 0 0; display:block; text-indent:-9999px; overflow:hidden;}


#logo:hover{ background: url(../images/w2logo.png) 0 -60px;}
#logo:active{background: url(../images/w2logo.png) 0 -120px;}

/* // Header */

#header{ z-index:2; position:relative; width:920px;}

/* //  Language Navigation */


#langnav{ display: block; width: auto; position:absolute; top:26px; right: -20px!important; /* target other browsers */ right: -100px;/* target IE6 and lower */ }
#langnav ul{padding: 0px 2px;}
#langnav ul li{float:left; height: 24px; padding:3px 5px 3px 0px;}
#langnav ul li p{ color:#596572; line-height:2.2;}




/* // Content */

#content{ position: relative; z-index:1;}
#slidepromo{ height:437px; z-index:1;}


#promoboxes{ height:100px;}
#promoboxes ul{ margin: 0px auto;}
#promoboxes ul li{ width:210px; height:70px; float:left; margin:13px 5px;}

.pb_1{ background: url(../images/pb1.gif) no-repeat top left; width:210px; height:70px; text-indent:-9999px; float:left; }
.pb_2{ background: url(../images/pb2.gif) no-repeat top left; width:210px; height:70px; text-indent:-9999px; float:left; }
.pb_3{ background: url(../images/pb3.gif) no-repeat top left; width:210px; height:70px; text-indent:-9999px; float:left; }
.pb_4{ background: url(../images/pb4.gif) no-repeat top left; width:210px; height:70px; text-indent:-9999px; float:left; }




#subcontent{ width:880px; min-height: 200px;}
#subcolumns { padding:10px 40px; display:block;}
#subcolumns li{ width:33%;float:left;}
#subcolumns li div{ margin:10px 15px;}
#subcolumns li div ul{ width:100%; float:left;}

#subcolumns li div .bnr{ margin-left:20px;}


ul.services_list li{ width:80%!important; padding: 0px 0px 0px 5px; margin-left:10px;background: url(../images/star.gif) no-repeat 0 5px;  text-indent:13px;}
ul.services_list li a{ font-size:12px; text-decoration:none; color:#1b5887; display:block;}

#newsletter_list li{ width:100%!important}




/* // Footer */

#footer{ background:#2a7ca9 ; width: 100%; height:auto;height:80px;position:absolute;bottom:0;}
.credits{ color:white; padding:10px;}
/* Navigation
----------------------------------------------- */

#navigation{ margin-top:25px; margin-right:80px!important; /* target other browsers */ margin-right: 0px;/* target IE6 and lower */ ;}
#nav{ width:370px; height:35px;}
#nav li{ display:inline; float:left;}
#nav li a{ display:block; text-indent:-9999px; overflow:hidden;}

#nav li a.nlink1{ width:109px; height:35px;  background:url(../images/navsprite.png) no-repeat 0 0;}
#nav li a.nlink2{ width:85px; height:35px;  background:url(../images/navsprite.png) no-repeat -125px 0;}
#nav li a.nlink3{ width:84px; height:35px;  background:url(../images/navsprite.png) no-repeat -226px 0;}
#nav li a.nlink4{ width:71px; height:35px;  background:url(../images/navsprite.png) no-repeat -327px 0;}

#nav li a.nlink1:hover{ background:url(../images/navsprite.png) no-repeat 0 -35px;}
#nav li a.nlink2:hover{ background:url(../images/navsprite.png) no-repeat -125px -35px;}
#nav li a.nlink3:hover{ background:url(../images/navsprite.png) no-repeat -226px -35px;}
#nav li a.nlink4:hover{ background:url(../images/navsprite.png) no-repeat -327px -35px;}

#nav li a.nlink1.current{ background:url(../images/navsprite.png) no-repeat 0 -70px;}
#nav li a.nlink2.current{ background:url(../images/navsprite.png) no-repeat -125px -70px;}
#nav li a.nlink3.current { background:url(../images/navsprite.png) no-repeat -226px -70px;}
#nav li a.nlink4.current { background:url(../images/navsprite.png) no-repeat -327px -70px;}



/* Classes
----------------------------------------------- */


/* // Image Classes */


/* // List Classes */


/* // Other Classes */


/* Typografy
----------------------------------------------- */

h3.columntitle{ color:#09F; font-size:16px; border-bottom: 1px solid #CCC; line-height:1.7; margin:5px 0px 15px 0px;}
.news_entry {}
.mini{ font:11px/1.4 Tahoma, Arial, Helvetica, sans-serif; color:#777;}

/* Tables
----------------------------------------------- */


.left{float:left;}
.right{float:right;}
.clear{clear:both;}
.block{ display:block;}
.textCenter{ text-align: center; }
.textRight{ text-align: right; }
.textLeft{ text-align: left; }



.m5{ margin: 5px;}
.m7{ margin:7px;}
.m10{margin: 10px;}

.m-left-5{margin-left: 5px;}
.m-left-7{margin-left: 7px;}
.m-left-10{margin-left: 10px;}

.m-bottom-10{margin-bottom: 10px;}
.margin-10-0{ margin: 15px 0px 15px 10px;}

.width350{width: 350px;}

.hidden{ overflow:hidden;}











div.scrollable {position:relative;overflow:hidden;width: 800px;height:90px;	padding:9px 0;}
div.scrollable div.items {width:20000em;position:absolute;clear:both;margin-left:10px;}
div.scrollable div.items div {float:left;text-align:center;width:140px;padding:0px;background-color: #ddd;margin-right: 20px; border:1px solid #333; height:75px;}
div.scrollable div.items div img{ border: 2px #FFF solid;}
/* this makes it possible to add next button beside scrollable */
div.scrollable {float:left;	}
/* prev, next, prevPage and nextPage buttons */
a.prev, a.next, a.prevPage, a.nextPage {display:block; width:18px;height:18px;background:url(../images/left.png) no-repeat;float:left;
margin:43px 10px;cursor:pointer;}
/* mouseover state */
a.prev:hover, a.next:hover, a.prevPage:hover, a.nextPage:hover {background-position:0px -18px;}
/* disabled navigational button */
a.disabled {visibility:hidden !important;}
/* next button uses another background image */
a.next, a.nextPage {background-image:url(../images/right.png);clear:right;}


#slogan{display:block; width: 300px; margin-top:30px;}
#slogan li{ display:block; float:left; color:#bcbcbc; font: italic 18px "Trebuchet MS", Arial, Helvetica, sans-serif;}

/* ------------------- dropdown menu */

.menu_head{border: none; width:109px; position:relative;}
.menu_body {display:none;  z-index:99; position:absolute; top:45px; border:1px solid #53760f; width:150px; background:#658d14;}
.menu_body li{background:#658d14;}
.menu_body li.alt{background:#5c8012;}
.menu_body li a{color:#fff; text-decoration:none; padding:12px 0px; display:block!important;text-indent:12px!important; font-size:13px; width:148px; border:1px solid #81a51e; border-width:0px 1px 1px 1px;}
.menu_body li a:hover{ color:#53760f;background:#adcc44;}

.menu_head_2{border: none; width:85px; position:relative;}
.menu_body_2 {display:none;  z-index:999; position:absolute; top:45px; border:1px solid #07887f; width:190px; background:#08948b;}
.menu_body_2 li{background:#08948b; z-index:99;}
.menu_body_2 li.alt{background:#07867d;}
.menu_body_2 li a{color:#fff; text-decoration:none; padding:12px 0px; display:block!important;text-indent:12px!important; font-size:13px; width:188px;border:1px solid #22b4a6; border-width:0px 1px 1px 1px;}
.menu_body_2 li a:hover{ background:#2ecfc6; color:#07625a;}


/* ------------------- general internal styles */

.internal #content{ padding:20px;}

div.int_title{ width:auto; height:100px;}
div.int_title h2{ display:block; float:left; color:#fff; font: italic 24px "Trebuchet MS", Arial, Helvetica, sans-serif; padding-left:10px; margin-top:15px;}


.imp{font: italic 18px/2 "Trebuchet MS", Arial, Helvetica, sans-serif; color:#09F; padding:10px 20px; border:1px solid #dce6f2; background:#FFF; text-align:center; }






/* ------------------- company */

#content h3{ color:#538dd4;}

.subcontent{ margin-top:30px; padding-top:20px;}












/* ------------------- contact */

#contact_wrap{ width: 840px;  margin:0px auto; padding-top:30px;}

#contact_details{ float:left; width: 240px; font: 16px "Trebuchet MS", Arial, Helvetica, sans-serif; margin:20px 0px 0px 30px;}
#contact_form{ margin:0px 10px 0px 0px; width:320px; float:left;}
#form2{margin:0;color:#000;width:320px; }
#form2 fieldset{margin:0;padding:0;border:none;	padding-bottom:1em;}		
#form2 legend{display:none;}	
#form2 p{margin:.5em 10px;}	
#form2 label{display:block;}	
#form2 input, #form2 textarea{width:272px;border:1px solid #bcc5d0;background:#fff;padding:5px 3px;color:#757e89;}		
#form2 textarea{height:125px;overflow:auto;}					
#form2 p.submit{text-align:right;}	
#form2 button{padding:0 40px;height:32px; line-height:32px; border:1px solid #1E4473; background:#2c6888; color:#fff; cursor:pointer;text-align:center; margin-right:20px;}	

#map{ width: 200px; height: 450px; background: #999 url(../images/map.png); float: left;}


/* ------------------- // services */

#service_block{ padding-top:15px;}


.sb-container {background:#FFF; border:1px solid #cfd8e3; width:264px; float:left; margin-top:0px;}
.sb-button {border-bottom:1px solid #cfd8e3;border-top:1px solid #fff;cursor:pointer;font-size:0.8em;height:36px;margin:0 2px;padding:10px 10px;width:240px;}
.sb-button img {float:left;margin:2px 0 0; display:block;}
.sb-button a {margin:0px 0 0 0px; color:#333; text-decoration:none; font: bold 12px/2.85 Arial, Helvetica, sans-serif; display:block; float:left; padding-left:15px; width:190px;}
.sb-button a:hover{ background:url(../images/ministar.jpg) no-repeat 186px;}

.sb-current{ background:#cbe7f8;}




.selected {background:#b2e5fd; border:1px solid #A8B4BE; margin:0 1px;}
.selected h2 { color:#0f5c94;}

#service_main {width: 558px;float: right; position: relative; height: 600px; overflow:hidden;}
#service_main h2{ font: 24px/2 "Trebuchet MS", Arial, Helvetica, sans-serif; margin:10px 0px; padding-top:10px; color:#3a5274;}
#service1, #service2, #service3, #service4, #service5, #service6, #service7, #service8 {background:url(../images/servicesbg1.jpg) no-repeat top center; padding: 10px 20px; margin:0px 0px; height:600px; z-index:1; position:relative; display:block; }

.servimg{ float:left; margin:10px;}
.moreinfo{ background:#cddffe; border: 1px solid #b6d1ff; padding:8px; width:500px; margin:20px auto; text-align:center; color:#485772;}
.emtext{ color:#29415b; font-size:13px;}
.cms_gr{ padding: 20px 0px 30px 0px; margin-top:10px;}

.bulletlist{ list-style-type: circle; padding: 0 0 0 20px; color:#3f5c7c;}


/* ------------------- // portfolio */


.main_image {
	width: 600px;
	height: 456px;
	float: left;
	background: #333;
	position: relative;
	overflow: hidden; /*--Overflow hidden allows the description to toggle/tuck away as it slides down--*/
	color: #fff;
}
.main_image h2 {
	font-size: 2em;
	font-weight: normal;
	margin: 0 0 5px;
	padding: 10px;
}
.main_image p {
	font-size: 1.2em;
	line-height: 1.6em;
	padding: 10px;
	margin: 0;
}
.block small { /*--We'll be using this same style on our thumbnail list--*/
	font-size: 1em;
	padding: 0 0 0 20px;
	background: url(../images/icon_calendar.gif) no-repeat 0 center;
}
.main_image .block small {margin-left: 10px;}
.main_image .desc{
	position: absolute;
	bottom: 0;
	left: 0; /*--Stick the desc class to the bottom of our main image container--*/
	width: 100%;
	display: none; /*--Hide description by default, if js is enabled, we will show this--*/
}
.main_image .block{
	width: 100%;
	background: #111;
	border-top: 1px solid #000;
}
.main_image a.collapse { /*--This is our hide/show tab--*/
	background: url(../images/btn_collapse.gif) no-repeat left top;
	height: 27px;
	width: 93px;
	text-indent: -99999px;
	position: absolute;
	top: -27px;
	right: 20px;
}
.main_image a.show {background-position: left bottom;}


/*--thumb column--*/
.image_thumb {
	float: left;
	width: 233px;
	margin-left:5px;
	}
.image_thumb img {
	padding: 0px;
	background: #fff;
	float: left;
	border: 1px solid #000;}
.image_thumb ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
.image_thumb ul li{
	margin: 2px 1px;
	padding: 2px;
	background: #f0f0f0 url(nav_a.gif) repeat-x;
	width: 70px;
	float: left;}
.image_thumb ul li.hover { /*--Hover State--*/
	background: #ddd;
	cursor: pointer;
}
.image_thumb ul li.active { /*--Active State--*/
	background: #fff;
	cursor: default;
}
html .image_thumb ul li h2 {
	margin: 0px 0;
	padding: 0;
}
.image_thumb ul li .block {
	display:none;}
.image_thumb ul li p{display: none;}/*--Hide the description on the list items--*/




ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px; /*--Set height of tabs--*/
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px; /*--Subtract 1px from the height of the unordered list--*/
	line-height: 31px; /*--Vertically aligns the text within the tab--*/
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px; /*--Pull the list item down 1px--*/
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff; /*--Gives the bevel look with a 1px white border inside the list item--*/
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { /*--Makes sure that the active tab does not listen to the hover properties--*/
	background: #fff;
	border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with its content--*/
}

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}