* {  margin:0; padding:0; }
body { background:#c8bba4; font-family: 'Open Sans', sans-serif; font-size:12px; width:100%; height:100%; min-width: 990px; overflow:hidden;   }
img { border:none; }
.hiddencc { display:none; }
.container { width: 1010px; margin: 0 auto; }
#nav { float:left; width:100%; min-width: 1010px; height: 70px; background: url(../images/bg.jpg) repeat-x; position:absolute; top:0; left:0; z-index:13; }
#nav-left, #nav-right { float: left; width:401px; height: 58px; }
#logo { float:left; width: 208px; height: 58px; margin: 12px 0 0; }
#nav-left ul, #nav-right ul { list-style-type: none; }
#nav ul li { float: left; margin: 5px 13px 5px 0; padding: 5px; position:relative; cursor: pointer; }
#nav-left ul li { float:right; margin: 5px 6px 5px 0; }
#nav-right ul li { margin: 5px 0 5px 1px; }
#nav ul li a { font-family: 'Open Sans Condensed', sans-serif; font-weight:normal; color:#004d06; text-decoration: none; line-height: 24px; font-size: 17px; }
#mobilenav { display:none; width: 0px; height: 0px; overflow: hidden; }
#footer { float:left; background: url(../images/footer.jpg) repeat-x; width:100%; min-width: 1010px; height:22px; font-size:10px; color:#004d06; line-height:22px; position:absolute; bottom:0; left:0; z-index:13; }
#footer.PhotoGallery { float:left; background: url(../images/footer.jpg) repeat-x bottom; width:100%; min-width: 1010px; height:92px; font-size:10px; color:#004d06; line-height:22px; position:absolute; bottom:0; left:0; z-index:13; }
#footer a { color:#004d06; text-decoration: none; font-weight: bold; }
#footer p { float: left; margin: 0 20px; }
#footer span { float: right; margin: 0 20px; }

#social { width: 145px; height: 32px; position: absolute; top: 68px; right: 20px; z-index:13;  }
#social a img { float: left; margin: 0 0 0 5px; }
#langs { width: 32px; height: 120px; position: absolute; top: 68px; left: 20px; z-index:13;  }
#langs a.en { float: left; width: 32px; height: 32px; background: url(../images/en.png) top no-repeat; }
#langs a.en.inactive { background: url(../images/en.png) bottom no-repeat; }
#langs a.el { float: left; width: 32px; height: 32px; background: url(../images/el.png) top no-repeat; }
#langs a.el.inactive { background: url(../images/el.png) bottom no-repeat; }
#langs a { margin: 0 0 10px 0; }

#homebox { background: url(../images/trans.png) ; width: 700px; height: 200px; padding: 20px; position: absolute; bottom: 44px; left: 20px; z-index:13; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -moz-box-shadow: inset 0 0 15px #2e3029; -webkit-box-shadow: inset 0 0 15px #2e3029; box-shadow: inset 0 0 15px #2e3029; }
#homebox h2 { font-size: 25px; color: #ebe1c1; margin: 0 0 10px; font-weight: normal; }
#scrollbar1 .viewport p { margin: 0 0 10px; font-size: 14px; color: #FFF; }
#scrollbar1 .viewport h2 { color: #EBE1B9;}
#scrollbar1 .viewport table { width: 650px; padding: 5px; margin: 0 0 10px; font-size: 13px; background: #ebe0c0 url(../images/table.jpg) repeat-x top; border-collapse: collapse;  }
#scrollbar1 .viewport table tr {  }
#scrollbar1 .viewport table tr td { padding: 5px 10px; text-align: center; }
#scrollbar1 .viewport table tr th { padding: 5px 10px; text-align: left; }
#scrollbar1 .viewport table tr th.center { padding: 5px 10px; text-align: center; }
#scrollbar1 .viewport table tr * { color: #5d614a; }
#scrollbar1 .viewport table tr th h3 { color: #e8e2c2; }
table, th, td { border: 2px solid #5d614a; }
#innertitle { background: url(../images/innerboxtitle.png) repeat-x ; width: auto; height: 66px; padding:0 20px; position: absolute; bottom: 229px; left: 0; color: #ebe1c1; line-height: 66px;  z-index:13; }
#innertitle h2 { font-size: 25px;  font-family: 'Open Sans Condensed', sans-serif; font-weight: normal; }
#innertitle h2 a { font-size: 14px;  font-family: 'Open Sans Condensed', sans-serif; font-weight: normal; cursor: pointer; margin: 0 0 0 20px; }
#innerbox { background: url(../images/trans.png) ; width: 700px; height: 170px; padding: 20px; position: absolute; bottom: 22px; left: 0; z-index:13; }

#scrollbar1 { width: 700px; clear: both; margin: 0; }
#scrollbar1 .overview { list-style: none; position: absolute; left: 0; top: 0; }
#scrollbar1 .thumb .end,
#scrollbar1 .thumb { background-color: #a8a58a; }
#scrollbar1 .scrollbar { position: relative; float: right; width: 10px; }
#scrollbar1 .track { background-color: #cfc7aa; height: 100%; width:8px; position: relative; }
#scrollbar1 .thumb { height: 20px; width: 12px; cursor: pointer; overflow: hidden; position: absolute; top: 0; margin: 0 0 0 -2px; }
#scrollbar1 .thumb .end { overflow: hidden; height: 5px; width: 12px; }
#scrollbar1 .disable{ display: none; }
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }


#scrollbar1 .viewport { width: 680px; height: 200px; overflow: hidden; position: relative; }
#innerbox #scrollbar1 .viewport { height: 170px; }

#map { background: url(../images/trans.png) ; width: 400px; height: 270px; padding: 20px; position: absolute; bottom: 22px; left: 570px;  z-index:13; }

#contact { background: url(../images/trans.png) ; width: 680px; height: 270px; padding: 20px 10px 20px 0; position: absolute; bottom: 22px; left: 320px; overflow: hidden; z-index:13; }


#innerbox.Prices-and-Reservation, #innerbox.About-Lefkada { height: 270px; }
#innerbox.Prices-and-Reservation #scrollbar1 .viewport { height: 300px; }
#innerbox.Prices-and-Reservation #scrollbar1 .viewport, #innerbox.About-Lefkada #scrollbar1 .viewport { height: 270px; }
#innertitle.Prices-and-Reservation, #innertitle.About-Lefkada { bottom: 329px; }
#scrollbar1.Contact { width: 280px; }
#scrollbar1.Contact p { width: 280px; }
#innerbox.Contact { height: 270px; width: 280px; }
#innerbox.Contact #scrollbar1 .viewport { height: 300px; }
#innerbox.Contact #scrollbar1 .viewport { height: 270px; }
#innertitle.Contact { bottom: 329px; }

#scrollbar1.About-Lefkada { width: 530px; }
#scrollbar1.About-Lefkada .viewport { width: 500px; }
#innerbox.About-Lefkada { width: 530px; }

#form { width: 700px; height: auto; float: left; margin:  0 0;}
#form label { width: 130px; height: 24px; float: left; color:#FFF; line-height: 24px; font-size: 14px; margin: 0 0 10px; }
#form label.l { width: 180px; }
#form label.xl { width:650px; margin: 0 0px; }
#form input[type=text] { width: 150px; height: 20px; border:1px solid #2D332A; padding: 2px 10px; float: left; margin: 0 30px 10px 0; }
#form input[type=text].l { width: 100px; }
#form select { width: 170px; height: 24px; float: left; margin: 0 30px 10px 0; }
#form textarea { width: 400px; height:45px; border:1px solid #2D332A; padding: 2px 10px; float: left; margin: 10px 0 10px; }
#form label.error { float:left; color: #F00; width: 0px; height: 0; overflow: hidden; }
#contact h3 {color: #EBE1B9;}
p.errorcs { width: 650px; margin: 0 0 10px; float: left; color: #FFF; font-weight: bold;  }
#form input[type=submit] { width: 150px; height: 75px; line-height: 75px; border:none; background: none; color: #FFF; font-size: 14px; text-align: center; }

#nav  ul li ul.sublist{
	float:left;
	list-style:none;
	margin:8px 0 0 0px;
	padding:0 0 0 0;
	position:absolute;
	left:0px;
	top:31px;
	width:150px;
        z-index: 900;
	opacity:0;
	visibility: hidden;  /*Avoids being selected even if the opacity is set to 0 */
	-moz-transition:opacity 0.2s 0.1s ease-out, visibility 0.1s 0.1s linear; 
	-webkit-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	-o-transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
	transition:opacity 0.3s ease-out, visibility 0.1s 0.1s linear;
         background: #F7F0DE;
         -webkit-border-bottom-right-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-moz-border-radius-bottomright: 8px;
-moz-border-radius-bottomleft: 8px;
border-bottom-right-radius: 8px;
border-bottom-left-radius: 8px;
}
#nav ul li ul.sublist li {
	/*border:none;
	border-bottom:1px solid #ccc;*/
	text-align: left;
	clear:both;
	margin: 0 5px; z-index:13; 
	padding:0;
	width:140px;
	-moz-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-webkit-transition:opacity 0.1s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	-o-transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
	transition:opacity 0.15s 0.15s ease-out, margin 0.3s 0.1s ease-out;
}

#nav ul li ul.sublist li a { width: 150px; height: auto; padding: 5px; color: #5a5f54; }
#nav ul li ul.sublist li:hover a, #nav ul li ul.sublist li.active a { color: #5a5f54; }
#nav ul li ul.sublist li:hover, #nav ul li ul.sublist li.active { background: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
#nav ul li:hover ul.sublist { opacity:1; visibility:visible; z-index:13;  }

#nav ul li:hover, #nav ul li.active { background: #5a5f54; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; }
#nav ul li.active a { color: #E3D5B8; }
#nav ul li a { display: block; }
#nav ul li:hover a { color: #E3D5B8; }


#thumb-tray { float:left; background: #E1D6B8; width:100%; height:60px; padding: 5px 0; z-index:13; overflow:hidden; }		
ul#thumb-list{ display:inline-block; list-style:none; position:relative; left:0px; padding:0 0px; }
ul#thumb-list li{ list-style:none; display:inline; width:80px; height:60px; overflow:hidden; float:left; margin:0; }
ul#thumb-list li img { width:80px; height:60px; margin: 0 0 0 5px; opacity:0.7; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; filter:alpha(opacity=70); }
ul#thumb-list li.current-thumb img, ul#thumb-list li:hover img{ opacity:1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); }
ul#thumb-list li:hover{ cursor:pointer; }
		
				
#thumb-back, #thumb-forward{ position:absolute; z-index:5; bottom:23px; height:70px; width:40px; }
#thumb-back{ left:0; background: url('../img/thumb-back.png') no-repeat center center;}
#thumb-forward{ right:0; background:url('../img/thumb-forward.png') no-repeat center center;}
#thumb-back:hover, #thumb-forward:hover{ cursor:pointer; background-color:rgba(256,256,256, 0.1); }
#thumb-back:hover{ border-right:1px solid rgba(256,256,256, 0.2); }
#thumb-forward:hover{ border-left:1px solid rgba(256,256,256, 0.2); }


#slideshow { position:relative; overflow:hidden; height: 1000px; width: 1000px; z-index: 0; }
#slideshow img { position:absolute; bottom:0; left: 0; z-index:8; }
#slideshow img.active { z-index:10; }
#slideshow img.last-active { z-index:9; }