body {
	margin: 0px;
	padding: 0px;
	background: #00CED1;
	text-align: justify;
	font: 13px Arial, Helvetica, sans-serif;
	color: #000000;
}

h1, h2, h3 {
	margin-top: 0px;
	font-weight: bold;
	color: #FFFFFF;
}

h1 {
	font-size: 2.4em;
}

h2 {
	font-size: 1.8em;
}

h3 {
	font-size: 1.4em;
}

p, ol, ul {
	margin-bottom: 1.2em;
	line-height: 120%;
}

a {
	color: #0586F5;
}

a:hover {
	text-decoration: none;
	color: #FF0000;
}

a img {
	border: none;
}

#wrapper {
	width: 900px;
	margin: 0 auto;
	border: 10px solid #FFFFFF;
}

/* Header */

#header {
	width: 900px;
	height: 100px;
	margin: 0px auto;
	
}

#header a {
	text-decoration: none;
	color: #000000;
}

/* Logo */

#logo {
	float: left;
	padding-left: 20px;
}

#logo h1, #logo p {
	margin: 0px;
	line-height: normal;
	font-weight: normal;
	color: #000000;
}

#logo h1 {
	padding: 25px 0px 0px 0px;
}

#logo h2 {
	float: right;
}

/* Cpy Map */

#cyp_map {
	float: left;
	padding-left: 20px;
}

#cyp_map h1, #cyp_map p {
	margin: 0px;
	line-height: normal;
	font-weight: normal;
	color: #FFFFFF;
}

#cyp_map h1 {
	padding: 25px 0px 0px 0px;
}

/* Menu */

#menu {
	float: right;
}

#menu ul {
	margin: 0px;
	padding: 0px 0px 0px 0px;
	list-style: none;
	line-height: normal;
}
h1, h2, h3 {
	margin-top: 0px;
	font-weight: bold;
	color: #FFFFFF;
}
#menu li {
	float: left;
	margin: 0px;
}

#menu a {
	display: block;
	width: auto;
	padding: 4px 12px;
}

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

#menu .active {
	background: #008B8B;
}

#menu .active a {
	background: url(images/img02.jpg) no-repeat 100% -40px;
}

/* Page */

#page {
	width: 900px;
	margin: 0px auto;
	padding: 10px 0px 0px 0px;
	background: #FFFFFF;
}


#areas {
	
	height: 100%;
	margin-top: 15px;
	margin-right: 0px;
	margin-bottom: 0px;
	padding: 10px 10px 10px 10px;
	background: #00CED1;
	color: #000000;
	
	font-size: 13px;
}

extras
.area_hdr {
	font-size: 16px;
	color: black;
	font-weight: bold;
}

.area_name {
	font-size: 13px;
	color: black;
	font-weight: bold;
	width: 120px;
}

/*header_pic superceded by header_pics*/
#header-pic {
	background: url(images/cyprusrocksmain.jpg) no-repeat left top;
	width: 900px;
	height: 210px;
}

#header-pics {
	width: 900px;
	height: 203px;
	margin: -4px;
}

#header-pics img {
	padding: 2px;
}

#crags {
	height: 100%;
	margin-top: 15px;
	margin-right: 0px;
	margh1, h2, h3 {
	margin-top: 0px;
	font-weight: bold;
	color: #FFFFFF;
}in-bottom: 0px;
	padding: 10px 10px 10px 10px;
	background: #00CED1;
	color: #000000;
	font-size: 13px;
}

.white_divider {
	height: 15px;
	background: #ffffff;
}


#crag-pic {
	background: url(images/cyprusrocksmain.jpg) no-repeat left top;
}


#map-pic {
	position: relative;
	background: url(images/cyprus-map-clickable.jpg) no-repeat left top;
	width: 900px
	
}

/* Content */

#content {
	float: right;
	width: 580px;
	background: #00CED1;
	height: 790px;	/* MODIFY THIS LINE for main page */
}

#content-crag {
	float: right;
	width: 570px;
	background: #00CED1;
}


#content-feedback {
	float: right;
	background: #00CED1;
}

.post {
	margin: 0px 0px 30px 0px;
}

.post .title {
	margin: 0px;
	background: #008B8B url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

.post .title h1 {

}

.post .entry {
	padding: 0 20px;
}

.entry2 {
	padding: 0 20px;
}


.post .meta {
	font-weight: bold;
	padding-left: 20px;
}

.post .byline {
	margin: 0px;
	padding-left: 20px;
}

/* Sidebar */

#sidebar {
	float: left;
	width: 300px;
}

#sidebar-bgtop {
}

#sidebar-bgbtm {
	background: url(images/img03.jpg) no-repeat left bottom;
}

#sidebar-content {
	background: url(images/img01.jpg) repeat-y left top;
}


#sidebar ul {
	padding: 0px 0 5px 0;
	margin: 0px;
	list-style: none;
}

#sidebar li li {
	margin-left: 20px;
	margin-right: 20px;
	line-height: 30px;
	padding-left: 15px;
	border-bottom: 1px dashed #BDBDBD;
	background: url(images/img04.jpg) no-repeat left 50%;
}

.extras li li {
	margin-left: 20px;
	margin-right: 20px;
	line-height: 0px;
	padding-left: 15px;
	border-bottom: 1px dashed #BDBDBD;
	background: url(images/img04.jpg) no-repeat left 50%;
}

#sidebar li ul {
	margin-bottom: 1.8em;
	list-style: none;
}

#sidebar h2 {
	background: #008B8B url(images/img02.jpg) no-repeat left 50%;
	padding: 7px 25px;
	font-size: 1.4em;
}

#sidebar a {
	text-decoration: none;
	color: #008B8B;
}

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

/* Search */

#search {
}

#search form {
	margin-bottom: 1.8em;
	padding: 0px;
}

#search fieldset {
	margin-left: 20px;
	padding: 0px;
	border: none;
}

#search #s {
	width: 160px;
}

/* Footer */

#footer {
	clear: both;
	width: 900px;
	height: 10px;
	margin: 0px auto 30px auto;
	color: #000000;
	
}

#footer p {
	margin: 0px;
	padding: 19px 0px 0px 0px;
	text-align: center;
	line-height: normal;
	font-size: smaller;
}

#footer a {
	color: #FFFFFF;
}

table.crag_info {
	border-width: 1px;
	border-style: outset;
	border-color: gray;
	border-collapse: separate;
	background-color: white;
	color: #000000;
}

p.routeProfile1 {
	background-color: #ffcccc;
	border: 1px solid black; 
	margin: 5px;
}

p.routeProfile2 {
	background-color: #00ff00;
	border: 1px solid black; 
	margin: 5px;
}

.sector_info {
	color: #000000;
	font-size: 1em;
}

	
.sector_info h2 {
	padding: 19px 0px 0px 0px;
	font-weight: bold;
	font-size: 1.4em;
}

#box-link { 
		position: absolute; 
		top: 334px; 
		left: 882px; 
		width: 20px; 
		height: 20px; 
		background-color: transparent; 
		border: 1px solid yellow; }

/* Note that v1 of firefox incorrectly interprets the layering of the body and page tags,
which leads to the central vertical divider between sidebar and content getting its
background from body when should come from the page div.  So we don't get the central bit white
but black.
*/



.modalDialog {
	position: fixed;
	font-family: Arial, Helvetica, sans-serif;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: rgba(0,0,0,0.8);
	z-index: 99999;
	opacity:0;
	-webkit-transition: opacity 400ms ease-in;
	-moz-transition: opacity 400ms ease-in;
	transition: opacity 400ms ease-in;
	pointer-events: none;
}



.modalDialog:target {
	opacity:1;
	pointer-events: auto;
}

.modalDialog > div {
	width: 400px;
	position: relative;
	margin: 10% auto;
	padding: 5px 20px 13px 20px;
	border-radius: 10px;
	background: #fff;
	background: -moz-linear-gradient(#fff, #999);
	background: -webkit-linear-gradient(#fff, #999);
	background: -o-linear-gradient(#fff, #999);
}


.modalDialog h2 {
	margin-top: 0px;
	font-weight: bold;
	color: #F00;
}


.close {
	background: #606061;
	color: #000000;
	line-height: 25px;
	position: absolute;
	right: -12px;
	text-align: center;
	top: -10px;
	width: 24px;
	text-decoration: none;
	font-weight: bold;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }