/* ------ elements ------ */

body {
	margin: 0;
	padding: 0;
	background: #FFF url('../images/body_bg0.jpg') repeat-x;
	font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
	color: #555555;
	/* Force IE to center containers */
	text-align:center;
}

h3 {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background-color: transparent;
}

h2 {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background-color: transparent;
}

h1 {
	margin: 0;
	padding: 0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #555;
	background-color: transparent;
}

p {
	line-height: 16px;
	text-align: justify;
	margin: 0 0 10px 0;
}

a, a:visited, a:hover, a:active {
	color:#676767;
}

a:hover {
	text-decoration: none;
}

a img {
	border: 1px #000 solid;
}

a:hover img {
	border: 2px #000 solid;
}

img {
	border-style: none;
}

/* ========================== classes ============================================================== classes ==== */

.lh_normal {
	line-height: normal
}

.title {
	font-size: 22px;
	color: #A5313A;
}

.subtitle {
	font-size: 20px;
	color: #555;
}

.emphasise {
	font-weight: bold;
}

.centre_item {
	text-align: center;
}

/* Horizontal line <hr> styles to ensure IE and FF display the same */
.linestyle1 {
	color: #A5313A;
	background-color: #A5313A;
	height: 1px;
	border: none;
}

.linestyle2 {
	color: #A5313A;
	background-color: #A5313A;
	height: 2px;
	border: none;
}

/* ========================== main wrapper ==================================================== main wrapper ==== */

#mainwrapper {
	width: 770px;
	margin: 0 auto;
	background: #FFF;
	border: 1px #B2B2B2 solid;
}

/* ============================= header ============================================================= header ==== */

#main_header {
	width: 770px;
	height: 220px;
	margin: 0 auto;
	background: #fff url('../images/page_banner_alt.jpg') no-repeat;
}

/* ------ header no script navigation links ------*/

#headernav {
	position: inherit;
	top: 0px;
	height: 22px;
	background: #000;
}

#header_navlist {
	position: relative;
	top: 4px;
	width: 600px;
	height: 22px;
	margin: 0px auto;
}

#header_navlist li {
    list-style-type: none;
    padding-right: 20px;
	display: inline;
}

#header_navlist a {
	font-size: 11px;
	color: #FFF;
    text-decoration: none;
}

#header_navlist a:hover {
	color: #FFF;
}

/* ------ main title text with drop shadow ------ */

/* holding container main title*/
#main_title {
	position: relative;
	float: left;
	top: 20px;
	left: 40px;
	width : 400px;
	height : 57px;
}

/* main title - absolutely position the shadow text npx from upper left, depending on shadow depth */
#main_title h1 {  
	position : absolute;
	font-size : 46px;
	font-weight: bold;
	color: #000;
	top : 3px;
	left : 3px;
}

/* main title - absolutely position the top text -npx from the shadow text, match the px size */
#main_title h1 span {
	position : absolute;
	color : #FFF;
	top : -3px;
	left : -3px;
}

/* text content for callout section in header */
#callout {
	position: relative;
	float: right;
	top: 10px;
	right: 10px;
	width : 300px;
	height : 100px;
}

#callout h1 {
	font-size: 20px;
	color: #000;
}

#callout h2 {
	font-size: 16px;
	color: #fff;
}

#callout a {
	color: #000;
    text-decoration: none;
}

#callout a:hover {
	color: #FFF;
}

/* cyprus map image content for callout section in header */

#callout_img {
	position: relative;
	float: right;
	top: 12px;
	right: 36px;
	width : 188px;
	height : 109px;
}

#callout_img.melekkis {
	position: relative;
	float: right;
	top: 6px;
	right: 60px;
	width : 111px;
	height : 109px;
}

/* icon image content for callout section in header */

#callout_img2 {
	position: relative;
	float: right;
	top: 5px;
	right: 46px;
	width : 132px;
	height : 132px;
}


/* ============================ container ======================================================== container ==== */

#container {
	margin: 0px auto 0px auto;
	padding: 0px 20px 20px 20px;
	background: #FFF; /*url('../images/cont_bg0.jpg') repeat-x left bottom;*/
/* Force IE to left align text again after forcing centering of containers in body element */
	text-align: left;
}

/* ============================= content ============================================================ content ==== */ 

#content {
	width: 650px;
	padding: 0 15px;
	margin: auto;
}

/* ------ Navigation text links aligned right on some pages ------ */

#pagenav ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0 10px 0;
	text-align: right;
}

#pagenav ul li {
	display: inline;
}

#pagenav ul li a {
	text-decoration: underline;
	padding: 0 1em 0 0;
	color: #000;
}

#pagenav ul li a:hover {
	text-decoration: none;
}

/* ------ Navigation text links aligned left on some pages ------ */

#pagenav_left ul {
	list-style-type: none;
	padding: 0;
	margin: 0 0 10px 0;
	text-align: left;
	position: absolute; top: 210px;
}

#pagenav_left ul li {
	display: inline;
}

#pagenav_left ul li a {
	text-decoration: underline;
	padding: 0 1em 0 0;
	color: #000;
}

#pagenav_left ul li a:hover {
	text-decoration: none;
}

/* ------ Navigation text links aligned centre on some pages ------ */

#pagenav_center ul {
	list-style-type: none;
	padding: 0;
	margin: 0 18px 0 0;
	text-align: center;
}

#pagenav_center ul li {
	display: inline;
}

#pagenav_center ul li a {
	text-decoration: underline;
	padding: 0 1em 0 0;
	color: #000;
}

#pagenav_center ul li a:hover {
	text-decoration: none;
}


/* ------ START content styles for venue location (protaras.htm etc.) ------ */

#content_venues {
	float: left;
	width: 600px;
}

#content_venues h3 {
	font-size: 14px;
	color: #000;
}

#content_venues h2 {
	font-size: 18px;
	color: #000;
}

/*#content_venues a, a:visited, a:hover, a:active {
	color: #A5313A;
}*/

/* ------ classes ------ */

.height2 {
	height: 140px
}

.seperator {
	background: url('../images/smalldots.png') repeat-x left bottom;
}

.seperator2 {
	background: url('../images/dots.png') repeat-x left bottom;
}

.floatleft {
	float: left;
	margin: 0 10px 0 0;
	clear: left;
}

.floatright {
	float: right;
	margin: 0 0 0 10px;
	clear: right;
}

.placestitle {
	width: 630px;
	text-align: justify;
	height: 140px;
}

.placestitle_ayianapa {
	width: 630px;
	text-align: justify;
	height: 210px;
}

.placestitle_yacht {
	width: 630px;
	text-align: justify;
	height: 160px;
}

/* ------ image floats ------*/

#imageleft-first {
	float: left;
	margin-top: 20px;
	padding: 5px 0 0 5px;
}

#imageleft-first a{
	text-decoration: none;
}

#imageleft-first a:hover {
	text-decoration: underline;
}

#imageleft {
	float: left;
	width: 595px;
	padding: 5px 0 0 5px;
}

#imageleft a{
	text-decoration: none;
}

#imageleft a:hover {
	text-decoration: underline;
}

#imageright {
	float: right;
	width: 595px;
	padding: 5px 5px 0 0px;
}

#imageright a{
	text-decoration: none;
}

#imageright a:hover {
	text-decoration: underline;
}

/* ------ END content styles for venue location pages (protaras.htm etc.) ------ */


/* ------ START styles for venue pages (venue_goldencoast_civil.htm etc.) ------ */

/* ------ alt main title text with drop shadow ------ */

/* holding container main title*/
#alt_main_title {
	position: relative;
	float: left;
	top: 28px;
	left: 40px;
	width : 480px;
	height : 57px;
}

/* main title - absolutely position the shadow text npx from upper left, depending on shadow depth */
#alt_main_title h1 {  
	position : absolute;
	font-size : 34px;
	font-weight: bold;
	color: #000;
	top : 3px;
	left : 3px;
}

/* main title - absolutely position the top text -npx from the shadow text, match the px size */
#alt_main_title h1 span {
	position : absolute;
	color : #FFF;
	top : -3px;
	left : -3px;
}

/* ------ narrative (left column) ------ */

#narrative {
	float: left;
	width: 180px;
}

#narrative h3 {
	font-size: 14px;
	color: #000;
}

#narrative a, a:visited, a:hover, a:active {
	color: #000;
}

#narrative a img {
	border:none;
}

#narrative a:hover img {
	border:none;
}

/*------ classes ------*/

.description {
	text-align: left;
}

.description strong {
	color: #000;
}

/* ------ END styles for venue pages (venue_goldencoast_civil.htm etc.) ------ */


/* ------ venues photo gallery (right column) ------ */

/* style the outer cntaining div to fit the landscape, portrait and buttons */
#album {
float: right;
padding-left: 0px;
width:520px;
height:420px;
border:1px solid #000;
margin:0 auto;
}
/* remove the padding margin and bullets from the list.
Add a top margin and width to fit the images and a position relative */
.gallery {
padding:0; 
margin: 386px 0 0 0; 
list-style-type:none; 
position: relative;
width:520px;
}
/* remove the default image border */
.gallery img {
border:0;
}
/* make the list horizontal */
.gallery li {
float:left;
}
/* style the link text to be central in a surrounding box */
.gallery li a, .gallery li a:visited {
font-size:11px;
float:left; 
text-decoration:none; 
color:#000;
background:#fff; 
text-align:center; 
width:24px; 
height:25px; 
line-height:22px; 
border:1px solid #000;
margin:2px;
}
/* position the images using an absolute position and hide them from view */
.gallery li a img {
position:absolute; 
top:-376px; 
left:0; 
visibility:hidden; 
border:0;
}
/* fix the top position for the landscape images */
.gallery li a img.landscape {
top:-376px;
border-left:10px solid #fff;
border-right:10px solid #fff;

}
/* fix the left position for the portrait images */
.gallery li a img.portrait {
left:0;
border-left:10px solid #fff;
border-right:10px solid #fff;
}
/* style the hover background color for the text boxes */
.gallery li a:hover {
background:#ddd;
}
/* style the active/focus colors for the text boxes (required for IE) */
.gallery li a:active, .gallery li a:focus {
background:#444; 
color:#fff;
}
/* make the images visible on active/focus */
.gallery li a:active img, .gallery li a:focus img {
visibility: visible;
}

/* ------ venues pages pricing collapsible text ------ */

#collapse {
	float: right;
	padding-left: 0px;
	width: 520px;
	margin: 0 auto;
}

#collapse td, #collapse th {
  text-align: left;
}


#collapse_title {
	font-size: 12px;
	font-weight: bold;
	color: #000;
	text-align: center;
	cursor: pointer;
}

/* ------ START styles for extras pages (flowers.htm etc.) ------ */

/* ------ extras main title text with drop shadow ------ */

/* holding container main title*/
#extras_main_title {
	position: relative;
	float: left;
	top: 28px;
	left: 40px;
	width : 370px;
	height : 57px;
}

/* main title - absolutely position the shadow text npx from upper left, depending on shadow depth */
#extras_main_title h1 {  
	position : absolute;
	font-size : 34px;
	font-weight: bold;
	color: #000;
	top : 3px;
	left : 3px;
}

/* main title - absolutely position the top text -npx from the shadow text, match the px size */
#extras_main_title h1 span {
	position : absolute;
	color : #FFF;
	top : -3px;
	left : -3px;
}

/* ------ extras photo gallery (center column) ------ */

#gallery-container {
	margin: auto;
	width: 540px;
}

/* needed for IE to make :active state work first time */
a, a:visited {
	color: #000;
} 

/* styling for TOP gallery (2 rows) */
#container_top {
	position:relative;
	width:425px;
	height:425px;
	/*background:#d1c8c3;*/
	/*border:1px solid #A5313A;*/
	border-bottom: 1px solid #000;
	margin:1em auto;
}

#container_top img {
	border:0;
}

#container_top .thumbs {
	position:absolute;
	left:0;
	top:0;
}

#container_top a.gallery2:hover span {
	display:block;
	position:absolute;
	width:402px;
	height:50px;
	top:110px;
	left:5px;
	padding:5px;
	font-style:italic;
	color:#000;
	z-index:100;
}

#container_top a.gallery2:hover span:first-line {
	font-style:normal;
	font-weight:bold;
	font-size:1.1em;
	color:#000;
}

#container_top a.gallery2:active, #container_top a.gallery2:focus {
	border:1px solid #000;
}

#container_top a.gallery2:active em, #container_top a.gallery2:focus em {
	display:block;
	position:absolute;
	width:402px;
	height:250px;
	top:160px;
	left:5px;
	color:#000;
	padding:5px;
	border:1px solid #000;
	z-index:50;
}

#container_top h1 {
	clear:both;
	margin:auto;
	width: 250px;
	padding-top:165px;
	text-align:justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:normal;
	color:#000;
}

#container_top h1 em {
	font-size:12px;
	font-style: normal;
	color:#000;
}

/* styling for TOP gallery (3 rows) */
#container_top3 {
	position:relative;
	width:425px;
	height:483px; /*difference 1r/2r (58) added to 2r*/
	/*background:#d1c8c3;*/
	/*border:1px solid #A5313A;*/
	border-bottom: 1px solid #000;
	margin:1em auto;
}

#container_top3.nodescription {
	position:relative;
	width:425px;
	height:463px;
	border-bottom: 1px solid #000;
	margin:1em auto;
}

#container_top3 img {
	border:0;
}

#container_top3 .thumbs {
	position:absolute;
	left:0;
	top:0;
}

#container_top3 a.gallery2:hover span {
	display:block;
	position:absolute;
	width:402px;
	height:50px;
	top:168px; /*difference 1r/2r (58) added to 2r*/
	left:5px;
	padding:5px;
	font-style:italic;
	color:#000;
	z-index:100;
}

#container_top3 a.gallery2:hover span:first-line {
	font-style:normal;
	font-weight:bold;
	font-size:1.1em;
	color:#000;
}

#container_top3 a.gallery2:active, #container_top3 a.gallery2:focus {
	border:1px solid #000;
}

#container_top3 a.gallery2:active em, #container_top3 a.gallery2:focus em {
	display:block;
	position:absolute;
	width:402px;
	height:250px;
	top:219px; /*difference 1r/2r (59) added to 2r*/
	left:5px;
	color:#000;
	padding:5px;
	border:1px solid #000;
	z-index:50;
}

#container_top3.nodescription a.gallery2:active em, #container_top3.nodescription a.gallery2:focus em {
	display:block;
	position:absolute;
	width:402px;
	height:250px;
	top:180px;
	left:5px;
	color:#000;
	padding:5px;
	border:1px solid #000;
	z-index:50;
}

#container_top3 h1 {
	clear:both;
	margin:auto;
	width: 250px;
	padding-top:226px; /*difference 1r/2r (61) added to 2r*/
	text-align:justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:normal;
	color:#000;
}

#container_top3.nodescription h1 {
	clear:both;
	margin:auto;
	width: 250px;
	padding-top:200px;
	text-align:justify;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:18px;
	font-weight:normal;
	color:#000;
}

#container_top3 h1 em {
	font-size:12px;
	font-style: normal;
	color:#000;
}

/* ------ styling for TOP gallery (1 row) ------ */

#container_top1 {position:relative; width:425px; height:367px; /*background:#d1c8c3; border:1px solid #A0522D;*/ border-bottom: 1px solid #000; margin:1em auto;}
#container_top1 img {border:0;}
#container_top1 .thumbs {position:absolute; left:0; top:0;}
#container_top1 a.gallery2:hover span {display:block; position:absolute; width:402px; height:50px; top:52px; left:5px; padding:5px; font-style:italic; color:#000;  z-index:100;}
#container_top1 a.gallery2:hover span:first-line {font-style:normal; font-weight:bold; font-size:1.1em; color:#000;}
#container_top1 a.gallery2:active, #container_top1 a.gallery2:focus {border:1px solid #000;}
#container_top1 a.gallery2:active em, #container_top1 a.gallery2:focus em {display:block; position:absolute; width:402px; height:250px; top:101px; left:5px; color:#000; padding:5px; border:1px solid #000; z-index:50;}
#container_top1 h1 {clear:both; margin:auto; width: 250px; padding-top:104px; text-align:justify; font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; font-size:18px; font-weight:normal; color:#000;}
#container_top1 h1 em {font-size:12px; font-style:normal; color:#000;}

/* ------ END styles for extras pages (flowers.htm etc.) ------ */

/*----------- diary tabs---------- */

#tabs {
	float:left;
	width:94%;
	/*margin: 0 0 0 30px;*/
	padding: 0 0 0 30px;
	background:#FFF;
	font-size: 12px;
	font-weight: bold;
	line-height:normal;
	border-bottom:1px solid #B8B8B8;
}

#tabs ul {
    margin:0;
    padding:0px 10px 0 50px;
    list-style:none;
}

#tabs li {
	display:inline;
	margin:0;
	padding:0;
}

#tabs a {
	float:left;
	background:url("../images/tableft.png") no-repeat left top;
	margin:0;
	padding:0 0 0 5px;
	text-decoration:none;
}

#tabs a span {
	float:left;
	display:block;
	background:url("../images/tabright.png") no-repeat right top;
	padding:5px 15px 4px 6px;
	color:#FFF;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabs a span {float:none;}
/* End IE5-Mac hack */

#tabs a:hover span {
	color:#FFF;
}

#tabs a:hover {
	background-position:0% -43px;
}

#tabs a:hover span {
	background-position:100% -43px;
}

#tabs #current a {
    background-position:0% -43px;
}

#tabs #current a span {
    background-position:100% -43px;
}

/* ------ diary pages ------ */

#content_diary {
	float: left;
	width: 480px;
	padding:10px;
}

#content_diary h3 {
	font-size: 14px;
	color: #000;
}

#content_diary p {
	line-height: normal;
}

/* ------ diary photo pages ------ */

#diarypics {
	width: 520px;
	padding-top: 43px;
	margin: auto;
	color: #fff;
	text-align: center;
}

#diarypics a {
	color: #fff;
}

#diarypics img {
	border: 1px #000 solid;
}


/* ================================ footer ========================================================== footer ==== */

#footer {
	height: 35px;
	padding: 5px 0 0 0;
	background: #000;
}

#footer2 {
	height: 20px;
	padding: 5px 0 0 0;
	background: #FFF;
}

#footer2 h4 {
	font: normal 11px Tahoma, Arial, Helvetica, sans-serif;
}

#footer2 h4 a {
  color: #FFF;
}

/* ------ footer navigation links ------*/

#footer_navlist {
	width: 600px;
	height: 20px;
	margin: 0px auto;
}

#footer_navlist li {
    list-style-type: none;
    padding-right: 20px;
	display: inline;
}

#footer_navlist a {
	font-size: 11px;
	color: #FFF;
    text-decoration: none;
}

#footer_navlist a:hover {
	color: #FFF;
}

#navactive a{
    color: #FFF;
    text-decoration: none;
}

/* ------ footer seo links ------ */

#footer_seo {
	font-size: 9px;
	color: #888;
}

#footer_seo a {
	color: #888;
    text-decoration: none;
}

#footer_seo a:hover {
	color: #888;
    text-decoration: underline;
    text-decoration: none;
	cursor: default;
}