/* 
	Web Designer & 
	Author: Maniataki Katerina
	Developer: Nikos Papanikolaou
	Sales Manager: Tolis Sirlantzis
	Company: Net360 S.A.
	Client: Petradi Hotel
	Date:	12.01.2010
	Update: 20.05.2010
	=============================================================
	=============================================================
*/


/* 

	General  
	============================

*/

*{
	margin: 0;
	padding: 0;
	outline: none;
	border: none;
}

body, html{
	width: 100%;
	height: 100%;
	overflow:hidden;
}

.inv{
	position: absolute;
	left:-5000px;
}

body{
	font:12px Arial,Helvetica,sans-serif;
	cursor:default;
	color:#000000;
	background-color: #FFFFFF;
}

img{
	border:none;
}


/* 

	Header
	============================

*/


#header h1{
	position: absolute;
	bottom:50px;
	left: 0;
	z-index: 3;
}


#header h1 a{
	width: 224px;
	height:68px;
	background: url(../images/logo.png) no-repeat top left;
	display:block;
}

#header #languages{
	position:absolute;
	top:20px;
	right:263px;
	z-index: 4;
}

#header #languages ul, #header #languages li{
	margin:0;
	padding:0;
	list-style:none;
}

#header #languages li{
	float:left;
	list-style: none;
	margin:5px;
}

#header #languages li a{
	display: block;
	padding: 2px;
	color: #02BFD5;
	text-decoration:none;
	font-size:12px;
}

#header #languages li a:hover{
	color: #0293a6;
}


/* 

	General Ids
	============================

*/

#superWrapper{
	width: 100%;
	height:100%;
	position: relative;
	z-index: 1;
}

/* 

	Banner
	============================

*/

#banner, #banner table, #banner td {
    height:100%;
    width:100%;
    overflow:hidden;
    z-index: -1;
}

#banner {
    position: fixed;
}

#banner div {
    height:200%;
    left:-50%;
    position:absolute;
    top:-50%;
    width:200%;
}

#banner td {
    text-align:center;
    vertical-align:middle;
}

#banner img {
    margin:0 auto;
	 height:50%;
	 width:50%;
    min-height:530px;
    min-width:960px;
}

/* 

	Navigation
	============================

*/


#navigation{
	background-color: #003366;	
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
	filter:alpha(opacity=70);
	-moz-opacity:0.7;
	-khtml-opacity: 0.7;
	opacity: 0.7;
	position: absolute;
	bottom:50px;
	left:224px;
	border-left:1px solid #ffffff;
	width:100%;
	z-index:2;
}

#navigation ul{
	width:800px;
}

#navigation ul, #navigation li{
	list-style: none;
}

#navigation ul li{
	float: left;
	height:68px;
}

#navigation ul li a{
	color: #ffffff;
	font-size:15px;
	text-decoration: none;
	padding:25px 15px 26px;
	display: block;
	-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
	filter:alpha(opacity=100);
	-moz-opacity:1;
	-khtml-opacity: 1;
	opacity: 1;
}

#navigation ul li a:hover{
	background-color: purple;
}

#navigation ul li a.active{background-color: purple;}


/* 

	Online Booking
	============================ 
	Form
	============================

*/


#availability-checker{
	background: url(../images/tools.png) no-repeat top left;
	width:297px;
	height:122px;
	position:absolute;
	top:10px;
	right:30px;
	overflow: hidden;
	z-index: 1;
	display: block;
}


#availability-checker form label{
	font-size:12px;
	color: #ffffff;
}

#availability-checker form input, #availability-checker form select{
	border:1px solid #000033;
	width:100px;
	padding:2px;
	font-size:11px;
}

#availability-checker form select{
	width:40px;
	padding:0;
}

#availability-checker .date{
	display:block;
	position: absolute;
	top:50px;
	left:15px;
}

#availability-checker .nights{
	position:absolute;
	top:70px;
	left:40px;
}

#availability-checker .adults{
	position: absolute;
	top:70px;
	left:90px;
}

#availability-checker .children{
	position: absolute;
	top:70px;
	left:140px;
}

#availability-checker .nights label, #availability-checker .adults label, 
#availability-checker .children label{
	display: block!important;
	float: none;	
}


#availability-checker #use-calendar{
	width:20px!important;
	height:15px!important;
	display: block!important;
	float: right;
	position:absolute;
	top:7px;
	right:60px;
}

#availability-checker form .go{
	background-color: #0293a6!important;
	color: #ffffff!important;
	position:absolute;
	top:80px;
	right: 40px;
	width:28px!important;
	height:28px!important;
	padding: 0!important;
}

/* 

	Weather Add on
	============================

*/

#weather{
	position:absolute;
	top: 0px;
	right:40px;
	color: #ffffff;
	z-index: 8;
	width:70px;
	height:34px;
}

#weather img{
	width:34px; 
	height:34px;
	float: left;
	margin:-20px 5px 0 5px;
}

#weather #temperature{
	font-size:13px;
	padding-top: 20px;
	float: right;
}


/* 

	Add this tool
	============================

*/

.addthis_button{
	position:absolute;
	z-index:50;
	top:25px;
	right:130px;
}

.addthis_button img{
	width:125px;
	height:18px; 
	display:block;
}



/* 

	Typography
	============================

*/

h2{
	font-size:21px;
	color: #ffffff;
	font-weight:lighter;
	margin-top:-50px;
	padding: 20px 10px;
}

h3{
	font-size:18px;
	color: #003366;
	font-weight:lighter;
	padding: 10px;
}

/*.contents3 .column1 img{
	width:350px;
	height:210px;
}*/

p, .box ul{
	padding: 5px 10px;
	font-size: 12px;
}

.box ul{
	padding:5px 30px;
}

.box li{
	padding: 3px 10px
}


/* 

	Content
	============================

*/

.row3 .contents1, .row3 .contents2,  .row3 .contents3{
	z-index:2;
}

.row3 .column1{
	position:absolute;	
	right:0px;
	width:100%;
	height:100%;
	overflow: auto;
	top:-1px;
	left:-1px;
}

.box { 
    margin: 0 auto; 
    width: 370px;
    padding: 10px;
    background: white;
    line-height: 2em;
    position:absolute;
    top:50%;
    right:10px;}
    
.box a{
	color: #40a1ff;
}

#mapCanvas{
	width:400px;
	height:400px;
	display: block;
        border:5px solid #40a1ff;
        margin-top:50px;
}


/* 

	Extras
	============================ 
	Photos
	============================

*/	


.row3 .column3{
	margin-left:20px;
}


.row3 .column3 a{
	position:relative;
	float: left;
	background: url(../images/photoWrapper.png) no-repeat top left;
	margin-right:5px; 
        margin-bottom:5px;
}

.row3 .column3 a img{
	display: block;
	border: none;
	margin:6px 7px;
	width: 120px;	
	height: 80px;
}

.contents1 .column3{
       width:650px;
}

/* 

	Contact
	============================

*/

/*#contactForm{
	width:300px;
	margin-top:20px;
	margin-bottom:100px;
}


#contactForm label{
	font-size:12px;
	display: inline;
}

#contactForm input, #contactForm textarea{
	background-color: #ffffff;
	border: 1px solid #000033;
	padding: 2px;
	color:#333333!important;
	width: 200px;
}

#contactForm input:hover, #contactForm textarea:hover{
	background-color:white;
	border: 1px solid #a2a2a2;
}

#contactForm input.sendForm{
	background-color:#003366!important;
	border: none!important;
	font-size:10px;
	color: white!important;
	display: block;
	position:relative;
	padding: 5px;
}

#contactForm input.sendForm:hover{
	color: #000000!important;
	background-color: #02bfd5!important;
}*/

/*--------------------------CONTACT--------------------------*/

.alert{ 
	color: #FF0000!important; 
	margin-left:-3px!important;
        margin-bottom:100px!important;
}

.error{ 
	border:1px solid #FF0000!important;
}

div.contact_btn{
	width: 100%;
	text-align:center;
	margin-top:20px;
        
}

#contactFormSuccess{
	display:none;
	width:100%;
	line-height:18px;
}

#contact_form label{
	display: block;
	font-size:1.0em!important;
	padding:0px 0px;
}

#contactForm{
	margin-left:20px;
	margin-top:20px;
	
}

.form_textfield{
	margin-top:5px;        
}


.form_textarea{
	margin-top:5px;        
}


.button{
	background-color:#003366;
	color:white;
        width:80px;
        height:27px;
        padding-bottom:3px;
}

.button:hover{
        background-color:#02BFD5;
	color:#000;
}

#contactForm input, #contactForm textarea{
	background-color: #ffffff;
	border: 1px solid #000033;
	padding: 2px;
	color:#333333!important;
	width: 200px;
}

#contactForm input:hover, #contactForm textarea:hover{
	background-color:white;
	border: 1px solid #a2a2a2;
}



#footer{
	bottom:10px;
	left:5px;
	position:absolute;
}

#net360 a{color:#FFFFFF;
font-size:12px;
font-weight:bold;
text-decoration:none;}