/* CSS Document Styles*/

/*set background to the site*/
html {background: #3e4d59;}

/*set font-family*/
body {font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	    }

/*format appearance of links and visited links*/
a:link, a:visited {font-weight: normal;
					         color: #fff;
					         text-decoration: none;
					         }
/*format colour of links when hovered and active */								 
a:hover, a:focus, a:active 
									{font-weight: normal;
					         color:  #fff;
					         text-decoration: underline; 
									}
/*give the website a margin to set it off the background*/
#wrap {
	padding:20px;
}

/*set up current page indicator*/
body.about li#about a {background-color:#fff; color: #b30000}
body.location li#location a {background-color:#fff; color: #b30000}
body.map li#main-item5 {background-color:#fff; color: #006600}
body.activities li#activities a {background-color:#fff; color: #b30000}
body.places li#main-item1 {background-color:#fff; color: #006600}
body.cuisine  li#cuisine a {background-color:#fff; color: #b30000}
body.restaurant li#main-item1 {background-color:#fff; color: #006600}
body.rates  li#rates a {background-color:#fff; color: #b30000}
body.prices li#main-item1 {background-color:#fff; color: #006600}
body.booking li#main-item2 {background-color:#fff; color: #006600}
body.contact li#contact a {background-color:#fff; color: #b30000}




/*remove border from all images*/									
img {border-style: none;}

/*basic settings for container div*/
#container {width: 798px;
    				margin: 10px auto 0 auto;
   					text-align: justify;
						padding:4px 0px 4px 4px;
						background: #fff;
						}

#lang {
	margin-top:0px;
	width:157px;
	height:35px;
	background-color:#fff;
	border-color:#b30000;
	border-width:1px;
	border-style:solid;
	
	
}

.flags {
	margin-top:-1px;
	margin-right:3px;
	float:right;
}
	

						
/*basic settings for header*/						
#header {width: 800px; 
				height: 124px;
				margin: 0;
				padding: 0;
				font-size: 1em;
				padding:0;
				font-weight: normal;
				}
/*set width and position of content*/							
#content {width: 638px;	
					float: right;
					} 
/*position global navigation*/					
#main-nav {float: right;
					width:639px;
					
					} 					
/*set navigation items to display in block, set formatting, no text decoration, background color to dark red*/
#main-nav li {margin: 0px;
				     padding:2px 1px 0 0;
				     list-style-type: none;
				     float: left;
				     width: 104px;
				     height:35px;
					 text-align:center;
					 background: #b30000;
					 line-height:75%;
					 border-right: 1px solid #fff;
					 margin-top:0px;
				     }
						 
#main-nav li a {display: block;
								width: 105px;
								height: 35px;
								margin-top:-2px;
								padding-top:2px;
								text-decoration: none;
								}
/*change background colour to light red on hover and focus*/								
#main-nav li a:hover {background: #cc0000;}
#main-nav li a:focus {background: #cc0000;}
											 
/*set text div formatting and position*/					
#text	{width: 440px;
			height: auto; 
			padding:5px;
			float: left;
			/*set font colour to navy*/
			color: #003366;
			font-size:0.9em; 
			}
			
#videotext	{	height: auto; 
			padding:5px;
			float: left;
			/*set font colour to navy*/
			color: #003366;
			font-size:0.9em; 
			}
			
/*set formatting of links, hover and focus; change link colour to light blue, add border*/			
#text a {color: #3366cc;}
#text a:hover {color: #3366cc; text-decoration: underline;}
#text a:focus {color: #3366cc; border: 1px dotted #003366;}
#text a:visited {color: #6600cc;}

/*set formatting of links, hover and focus; change link colour to light blue, add border*/			
#videotext a {color: #3366cc;}
#videotext a:hover {color: #3366cc; text-decoration: underline;}
#videotext a:focus {color: #3366cc; border: 1px dotted #003366;}
#videotext a:visited {color: #6600cc;}

/*format text on homepage - different layout to most pages*/			
#text-home	{width: 620px;
						height: auto; 
						padding:5px;
						float: left;
						color: #003366;
						font-size:0.9em; 
						}
div#text-home h1.home {width: 550px;
											height:30px;
											font-size: 2em;
											margin: 5px 5px 5px 40px;
											padding: 5px;
											
											}	
											
div#text-home h1.home_de {width: 800px;
											height:30px;
											font-size: 26px;
											margin: 5px 5px 5px 5px;
											padding: 5px;
											
											}
													
p.home-photo {width: 500px;
							height: 375px; 
							padding: 5px;
							margin-left:95px;
							}
/*format H1 and H2, and lists within text div*/						
div#text h1 {font-size: 1.5em;
						margin-top: 10px;
						padding:10px;
						}
div#text h1.small {font-size: 1.2em;
									margin-top: 5px;
									padding:5px;
									}
						
div#text h2 {font-size: 1.2em;
						padding:5px;
						}
ul.selection {font-size: 1em; padding:0;}


div#text p {padding: 6px;
						font-size: 1em;
						line-height: 130%;
					   }
					   
/*format H1 and H2, and lists within text div*/						
div#videotext h1 {font-size: 1.5em;
						margin-top: 10px;
						padding:10px;
						color: #003366;
						}
div#videotext h1.small {font-size: 1.2em;
									margin-top: 5px;
									padding:5px;
									color: #003366;
									}
						
div#videotext h2 {font-size: 1.2em;
						padding:5px;
						color: #003366;
						}

div#videotext p {padding: 6px;
						font-size: 1em;
						line-height: 130%;
						color: #003366;
					   }
 					
div#videotext li {padding: 5px;}

 					
div#text li {padding: 5px;}
ul.main-page {list-style-type: square;	
							margin-left: 20px;
						}	

/*format and offset logo-link to the Hostelling International*/						
div.logolink {width: 180px;
							margin-left: 60%;
							position: relative; top: -3.5em;}

/*add padding to Google map*/						
#map-big {padding: 5px;}									

/*style Dreamhost MailForm*/									
#form /*add background colour to make it stand out more*/
			{background: #d3e5f0;
				margin: 10px 0;}
fieldset input {
     display: inline;
		 margin: 4px;
		 border: 1px solid #0099cc;
		 }
fieldset input#name, #e-mail {margin-left: 16px;}
textarea {
		 border: 1px solid #0099cc;
     }
/*add styles to table border*/
table {border: 2px solid #0099cc;
			border-collapse: separate;
			border-spacing: 2px;
			}	
			
tr td {border: 1px solid #0099cc;
			padding: 3px;}								
							
/* root element for scrollable - used to be scrollable, now it's just 3 static images*/
div.scrollable {  
	position:relative;
	float: right;

	/* vertical scrollers have typically larger height than width */	
	height: 450px;	 
	width:180px;	
}

/* root element for scrollable items */
div.scrollable div.items {	
	position:absolute;
}

/* item style defined */
div.scrollable div.items div {
	float:left;
	margin:10px 5px;
	width: 160px;
	height: 128px;
}
div.scrollable div.itemsvert div {
	float:left;
	margin:40px auto 10px 20px;
	width: 128px;
	height: 160px;
}

/*style and position sidebar*/
#sidebar {background: #2c562e;/*green-matching the greenery from photo but toned down*/
				  float: left;
				  width: 159px;
					height: auto;
					font-size:0.8em; 
					color:#fff;
					text-align: left;
					margin-top:0px;
					}
					
/*style all links on sidebar - different colour, and text decoration to Nav bar and text divs*/					
#sidebar a /*make links bright green to stand out*/
						{color: #99ff00;
						font-size: 1em;
						}

/*pages have different elements on sidebar, some have taglines, some have local navigation - style accordingly*/	
/*tagline styles*/								
#tagline-home h2.page-title {margin-left: 5px;
														margin-top: 10px;
														padding: 5px;
														font-size: 1.6em;
														font-weight: bold;
														}
#tagline-home	h3.tag2 {margin-left: 5px;
				 							padding: 0px;
											font-size: 1.2em;
				 							}		
													
#tagline-home h3 {width: 135px;
								  height: 20px;
					 				margin-left: 5px;
					 				padding: 10px;
									margin: 10px;
					 				}	
									
#tagline-home img {width:147px;
					margin-left:5px;
					}									
					
h2.page-title {margin-left: 5px;
							margin-top: 10px;
							padding: 5px;
							font-size: 1.4em;
							font-weight: bold;
							}
				
#tagline h3 {width: 150px;
					 margin-left: 5px;
					 padding: 5px;
					 }	
					 
h3.tag1 {margin-left: 5px;
				 padding: 5px;
				 font-size: 0.8em;
				 }	
				 
h3.tag2 {margin-left: 5px;
				 padding: 5px;
				 font-size: 1.5em;
				 }	
/*position and add border to sidebar photos*/				 
.small-pic {margin: 20px 8px 10px 8px;
						border: 2px solid #fff; 
						}	
						
#tagline2 p {width: 140px;
					margin:6px;
					font-size: 1em;
					padding: 3px
					}	
/*local navigation styles*/
#local-nav {	margin-left: 8px;
							padding: 5px;
						  width:138px; 
							font-weight: bold;
						 }
						 
#loval-nav ul, li {padding: 3px;	}
					 
li.main-item1, li.main-item2, li.main-item3 
						{font-size: 1em; padding: 5px;}
ul.sub-items li {
						 font-size: 0.85em;
						 margin-left: 5px;	
						 padding: 5px;						
						 }		
/*style and position quick link to the photo gallery*/						 
#gallery-link {width: 115px;
					height: 20px;
					padding: 10px;
					margin: 20px 5px;
					text-align: center;
					font-size: 1.2em;
					/*b-colour: dark green*/
					background-color: #003333;
					/*border colour: bright green for contrast*/
					border: 5px solid #99ff00;
					}
					
#gallery-link-it {width: 115px;
					height: 20px;
					padding: 10px;
					margin: 20px 5px;
					text-align: center;
					font-size: 1em;
					/*b-colour: dark green*/
					background-color: #003333;
					/*border colour: bright green for contrast*/
					border: 5px solid #99ff00;
					}					
					
/*link styles - the same as the rest of sidebar*/					
#gallery-link a {color: #fff;}	
#gallery-link a:hover {color: #99ff00; text-decoration: none;}
#gallery-link a:focus {color: #99ff00; border: 1px dotted #003366;}	

#gallery-link-it a {color: #fff;}	
#gallery-link-it a:hover {color: #99ff00; text-decoration: none;}
#gallery-link-it a:focus {color: #99ff00; border: 1px dotted #003366;}	

/*video-link*/					
#video-link a {color: #fff;}	
#video-link a:hover {color: #99ff00; text-decoration: none;}
#video-link a:focus {color: #99ff00; border: 1px dotted #003366;}	

#video-link {width: 115px;
					height: 20px;
					padding: 10px;
					margin: 20px 5px;
					text-align: center;
					font-size: 1.2em;
					/*b-colour: dark green*/
					background-color: #003333;
					/*border colour: bright green for contrast*/
					border: 5px solid #99ff00;
					}
				
/*style and position of t-shirt link*/
#tshirt-link {width: 109px;
					padding: 0px;
					margin-left:0px;
					margin-top:20px;
					margin-bottom:10px;
					
					}

/*style and position quick link to booking form*/
#booking-link {width: 115px;
					height: 20px;
					padding: 10px;
					margin: 20px 5px;
					text-align: center;
					font-size: 1.5em;
					background-color: #fff;
					/*border colour: dark green*/
					border: 5px solid #003333;
					}
					
#booking-link a {color: #336633;}	
#booking-link a:hover {color: #99ff00; text-decoration: none;}
#booking-link a:focus {color: #99ff00; border: 1px dotted #003366;}							

/*style and position footer*/					
#footer {width: 796px;
				height: 25px;
				display: block;
				background-color: #fff;
				font-size: 10px; 
				/*font colour: steel gray*/
				color: #3e4d59;
				clear: both;
				text-align:left;
				}
				
#footer ul {width: 600px; float: right; }				
#footer li {width: 135px; float: left; padding-top: 5px;}	

#footer a {color: #3e4d59;}	
#footer a:hover {color: #3366cc; text-decoration: underline;}
#footer a:focus {border: 1px dotted #3e4d59}						

/* tables */
#price1 {width:292px;}
#price2 {width:130px;}
#booking1 {width:136px;}
#booking2 {width:450px;}

/*span classes*/
.description {
	font-size:9px;
}

.activity {
	font-weight:700;
}

.menubottom {
	font-size:11px;
	}
	
p.home {text-align:center;}

p.home a {color:#0066CC;}

.summerparty {
		width:620px;
		height:750px;
		margin-top:10px;
	}
	
p.menuhead {
	text-align:center;
	font-size:15px;
	text-decoration:underline;
	font-weight:bold;
	}	
	
p.menu {
	text-align:center;
	}
	
#banner {

	padding:px;
	margin-left:3px;
	margin-top:-10px;
	background-color:#fd7100;
	border: 3px solid #000000;
	font-family:Verdana;
	font-size:16px;
	text-align:center;
	}
	
#banner a {color: #ffffff;}
#banner a:hover {color: #000000;}
#banner a:focus {color: #000000; border: 1px dotted #003366;}

.red {
	color:#F00
}

h3 {text-align:center;
	margin-top:-10px;
}

.mainpic {
	width:400px;
	height:300px;
	margin-left:20px;
	margin-bottom:5px;
}

input.button {
    padding: 0 .25em;
    width: 0; /* for IE only */
    overflow: visible;
}

input.button[class] { /* IE ignores [class] */
    width: auto;
}

#iframe {width: 115px;
					padding: 0px;
					margin-left:7px;
					margin-top:0px;
					margin-bottom:0px;
					}
					
#tshirt_text {margin-left: 7px;
				margin-top: -2px;
}