.skipnavigation {display:none;}/* this is best explained here: http://www.rampweb.com/Accessibility_Resources/Section508/skip_navigation.asp */


/* HTML AND BODY */

html, body, ul, li, img{  
margin: 0; /* zeros margins */
padding: 0; /* zeros padding */
border: 0;/* zeros borders */
}

body {
	min-width: 760px;/* Specifies the minimum width, Not supported by IE. */
	text-align: center;/* This  is a hack to centre the wrapper in IE5x */
	font:100% /140% Arial, Helvetica, sans-serif;/* sets the font size, line height and family */
	color: #1A2B45;/* sets the font colour */
	background: #EFE8DE url(../images/body_background.jpg) repeat-x fixed;/* sets the body background colour, path to the background image and repeats the image across the page */
}
.border-999999 {



	border: 2px dotted #999999;
}
	
/* DIVS AND LISTS LINKS */	
#wrapper {
	margin: 0 auto;/* centres the wrapper div,  auto determines the left and right margins evenly*/
	text-align: left;/* re aligns the text to the left after placing text-align: center; in the body */
	width: 760px;/* sets the width of the wrapper div */
	background:#FFF url(../images/wrapper_background.jpg) repeat-y;/* sets the body background colour, path to the background image and repeats the image down the wrapper div */
	position: relative;/* relative so we can nest an absolute-positioned element within the wrapper div*/
}
#top {
	height: 138px;/* sets the height of the top div as to accommodate it's background image */
	background: url(../images/top_title.jpg) no-repeat;/* sets the path to the background image and no-repeat prevents the image from tiling */

}
#topnav li {
	padding: 0;/* sets the padding to zero */
	float: right;/* floats the list to the right */
	list-style-type: none;/* removes the default list style */
	}
	
#topnav ul li a  {
	display: block;/* http://www.w3.org/TR/REC-CSS2/visuren.html#block-formatting allows our links to act like buttons */
	text-decoration: none;/* removes the default underline from our links */
	width: 100px;/* sets the width */
	text-align: center; /* centres the link text */
	font-weight: bold;/* sets the font style to bold */
	font-size: 80%;/* sets the font size */
}

#header {
	height: 234px;/* sets the div height as to show the background image */
	background: url(../images/kalymnos-log.jpg);/* sets the path to the background image */
}

#navigation {
	position: absolute;/* positions the div absolute to its parent container */
	top: 104px;/* places the div 104 pixels from the top */
	left: 14px;/* places the div 14 pixels from the left */
}

#navigation li {
	padding: 0;/* sets the padding to zero */
	list-style-type: none;/* removes the default list style */
	float: left;/* removes the default list style */
}
	
#navigation ul a  {
	background: #FFF;/* sets the background colour to white */
	display: block; /* http://www.w3.org/TR/REC-CSS2/visuren.html#block-formatting allows our links to act like buttons */
	text-decoration: none;/* removes the default underline */
	width: 121px;/* sets the width */
	height: 24px;/* set the height */
	text-align: center;/* centre aligns the text */
	font-weight: bold;/* sets the font style to bold */
	font-size: 80%;/* sets the font size */
	color: #1C1D3B;/* sets the font colour */
	border-bottom: 1px solid #cecece;/* border properties */
	border-right: 1px solid #cecece;/* border properties */
	padding-top: 4px;/* places the link text 4px from the top */
	background: url(../images/topnav.jpg);/* sets the path to the background image */
}

#navigation ul li a:hover{
	color: #525D7B;/* font colour */
	border-top: 1px solid #cecece;/* border properties, width, type and colour */
	border-left: 1px solid #cecece;/* border properties */
	background:#F4F3F0 url(../images/topnav_hover.jpg);/* sets the background colour and image path */
}

#content {
	width: 742px;/* sets the width of the content div */
}


#contentright {
	float: right; /* floats the div right */
	padding: 0 10px 10px 10px;/* sets the padding top right bottom left */
	width: 500px;/* sets the width */
}
#contentright p {
	font-size: 80%;/* sets the font size */
	padding-left: 5px;/* gives some padding to the left */

}

#sidenav {
	position: absolute;/* positions the side nav absolutely within the content div */
	left: 17px;/* positions the div 17px in (left) */

}
#sidenav ul {
	margin: 0;/* zero margins */
	padding: 0;/* zero padding */
	list-style-type: none;/* removes the default list type image */
}


#sidenav a, 
#sidenav a:visited, #sidenav a:active{
	display: block;/* http://www.w3.org/TR/REC-CSS2/visuren.html#block-formatting allows our links to act like buttons */
	height: 21px;/* sets the height */
	font-size: 70%;/* font size */
	font-weight: bold;/* font weight */
	background: #F9F8F6 url(../images/nav.jpg);/* sets the background colour and path to image */
	color: #626576;/* sets the font colour */
	text-decoration: none;/* removes default underline */
	margin: 0;/* zero margins */
	padding: 4px 0 4px 7px;/* padding top right bottom left */
	width: 171px;/*sets the width */
}


#sidenav a:hover {
	color: #0E0F2B;/* sets the font colour */
	background:#F4F3F0 url(../images/nav_hover.jpg);/* sets the background colour and path to image */
}


/* FOOTER */

#footer {
	font-size: 75%;/* sets the font size */
	text-align: center;/* aligns the text centre */
	width: 490px;/* sets the width */
	padding: 6px;/* sets the padding */
	border: solid black 1px;/* sets ta solid 1px black border around the div */
	clear: both; /* remove this and see what happens :) this basically starts a new line*/
	margin-left: 230px; /* sets the left margin to position the footer div*/
	color: #FFF; /* sets the font colour*/
	background: #5F6C8E; /* sets the background colour*/
}

/* HEADINGS */
.headings {
	border-bottom: solid #516C8A 1px;/* border properties */
}
h1 {
	font-size: 105%;/* sets the font size */
}
h2 {
	font-size: 102%;
}
h3,h4,h5,h6 {
	font-size: 100%;
	
}
h1,h2,h3,h4,h5,h6{
	margin-bottom: 3px;
	color: #406C91;
	
}


/* LINKS */
a:link{
	color: #11ADF6;

}
a:visited{
	color: #11ADF6;
}
a:hover{
	color: #07AAA8;
	text-decoration: none; /* removes the default underline*/
}
a:active{
	color: #000;
	}
	
	
/* PICTURE CLASS, this is applied to the image within the contentright div, it floats the image right*/
.pictright{
	float: right;
	}