/* Normalise Browser Styles - Clarke, p158-8 */
/* Normalise margins & padding */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h5, pre, form, fieldset, input, p, blockquote, th, td
{margin: 0; padding: 0;}

/* Normalises font-size for headings */
h1, h2, h3, h4, h5, h6 
{font-size: 100%;}

/* Remove list-styles */
ol, ul
{list-style: none;}

/* Normalise font-style and font-weight */
address, caption, cite, code, dfn, em, strong, th, var
{font-style: normal; font-weight: normal;}

/* Remove borders and spacing from tables */
table
{border-collapse: collapse; border-spacing: 0;}

/* Remove borders from fieldsets and images */
fieldset, img 
{border: 0;}

/* Left align text in caption and th */
caption, th
{text-align: left;}

/* Remove quotations marks from q */
q:before, q:after
{content: '';}

html {
text-align: center; /* centre the design - Clarke, p159 */
height: 100%;} 

body {
position: relative; /* establish positioning context for other positioned elements in design - Clarke, p160 */
width: 960px; /* fixed width - RESEARCH min max for fluid layout */
height: 100%;
margin: 0 auto; /* auto-right and auto-left margins to centre the design within the html tag - Clarke p.160 */
text-align: left; 
font-family: Georgia, serif; 
font-size: 76%;
background-color: white;}

/* Basic Layout */

* 
{margin: 0;
}

div#branding
{position: absolute;
left: 59px;
top: -10px; /* not sure why I am needing to do this - this div should be positioned relative to body, but instead it's moving down with the main nav when offsetting that 10px from the top with margin - Note this isn't working in IE ?does it matter?*/
width: 170px;
height: 185px;
z-index: 10;
background-color: #ac1f23;
background-image: url('../images/logo.gif');}

div#content
{position: relative;
margin-top: 50px;
left: 0;
width: 100%;
padding-bottom: 5em;
}/*  min-height: 100%;temporary fix for footer - need to use inman method to calculate browser height */



div#content_main 
{position: absolute;
left: 30%;
width: 45%;}

div#content_gallery 
{position: absolute;
left: 20px;;
width: 30%;
top: 140px;}

div#content_sub 
{position: absolute;
top: 600px;
width: 30%;
height: 206px;}

div#nav_sub
{position: absolute;
top: 0;
left: 75%;
width: 25%;}

div#advertising_community
{position: absolute;
top: 360px;
left: 75%;
width: 25%;
text-align: right;}

div#advertising_community2
{position: absolute;
top: 0px;
left: 75%;
width: 25%;
text-align: right;}



div#footer, div#nav_main
{width: 100%;
background-color: #fbf2e4;}

/* Trick to get the footer to stick to the bottom - Fait 2008 http://ryanfait.com/resources/footer-stick-to-bottom-of-page/ - used on all pages except Buildings and monuments */

.wrapper 
{min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -15em;}

.footer, .push 
{height: 15em;}


.wrapper2 
{min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -15em;}

/* =si_clear_children - Inman method - tested on sightseeing/buildings.html */ 
.pc, .sc {position : absolute;
top: 0;
left: 0;
}

.clear_children, .cc_tallest {
position: relative;
}

/*\*/* html .clear_children {display: inline;}/**/
.cc_tallest:after {content: '';}


/*
div#footer
{position: relative; 
bottom: 0;} stick footer to bottom of the page (combined with body & html height 100%) - A List Apart)*/

/* Home Page Layout */

div#content_intro 
{position: absolute;
top: -10px;
left: 30%; 
width: 70%;}

div#content_sidepanel
{position: absolute;
left: 0;
width: 30%;
top: 140px;
text-align: center;}

div#content_sub1
{position: absolute;
left: 30%; 
width: 35%;
top: 190px;}

div#content_sub2
{position: absolute;
left: 65%; 
width: 35%;
top: 190px;}

/* Styling for Main Navigation */

div#nav_main
{position: relative;
margin-top: 10px;
height: 58px;
z-index: 1;}

#nav_main ul
{position: absolute;
top: 20px;
left: 30%;
width: 70%;
font-family: AvantGarde, "Avant Garde", "AvantGarde CE", Helvetica, sans-serif;
font-size: 120%;
height: 100%;}

#nav_main ul li
{display: inline;}

#nav_main a, #nav_main a:visited  
{color: #000000;
text-decoration: none;
padding: 1em 1em 1em 35px; 
height: 100%;}

#nav_main a:hover /* hover state must come after visited state to be effective - W3Schools */
{color: #ac1f23;
text-decoration: none;}
/* 
#nav_main a:active, #nav_main a.active, active state must come after hover state to be effective - W3Schools
{text-decoration: none;} */

#nav_accommodation a, #nav_accommodation a:visited
{background: url(../images/acc_icon.png) left no-repeat;}

#nav_accommodation a:hover, #nav_accommodation a:active, #nav_accommodation a.active
{background: url(../images/acc_icon_on.png) left no-repeat;
color: #ac1f23;}

#nav_touristinfo a, #nav_touristinfo a:visited
{background: url(../images/info_icon.png) left no-repeat;}

#nav_touristinfo a:hover, #nav_touristinfo a:active, #nav_touristinfo a.active
{background: url(../images/info_icon_on.png) left no-repeat;
color: #ac1f23;}

#nav_sightseeing a, #nav_sightseeing a:visited
{background: url(../images/sight_icon.png) left no-repeat;}

#nav_sightseeing a:hover, #nav_sightseeing a:active, #nav_sightseeing a.active
{background: url(../images/sight_icon_on.png) left no-repeat;
color: #ac1f23;}

#nav_experiences a, #nav_experiences a:visited
{background: url(../images/exp_icon.png) left no-repeat;}

#nav_experiences a:hover, #nav_experiences a:active, #nav_experiences a.active
{background: url(../images/exp_icon_on.png) left no-repeat;
color: #ac1f23;}

/* Extra content for Accessibility - Hide off screen */

div#skip_to
{position: absolute;
top: -1000px; /* hide skip to links off screen so available to screen readers and users with CSS disabled*/
}

.hide_left 
{position: absolute;
left: -9999px;}

.hide_right 
{position: absolute;
right: 9999px;}

/* Styling for Headings */

h1{color: #ac1f23;
font-size: 170%;
padding-bottom: 10px;} 

h2 {color: #ac1f23;
font-size: 170%;
padding-bottom: 5px;}

h3 {color: #000000;
font-size: 120%;
font-weight: bold;
padding: 5px 0 5px 0;}

h4 {color: #596a63;
font-size: 100%;
font-weight: bold;
padding-bottom: 0px;}

/* Basic Links styling */

a 
{color: #596a63;}

a:visited
{color: #838f8a;}

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



/* Styling for Main Content Type */

a#top 
{color: #596a63;
font-size: 120%;
font-weight: bold;
text-decoration: none;}

a:hover#top 
{color: #ac1f23;}

#content_main p
{padding-bottom: 1em;}

#content_main ul
{padding-bottom: 10px;
padding-left: 10px;}

#content_main ul li h4 a
{padding-left: 10px;
background: url(../images/arrow.gif) no-repeat left;
color: #596a63;
text-decoration: none;}

#content_main ul li h4 a:hover
{color: #ac1f23;
background: url(../images/arrow_on.gif) no-repeat left;}

#content_main ul li h4 a.active /*ACTIVE STATE DOESN'T WORK*/
{color: #ac1f23;
background: url(../images/arrow_down.gif) no-repeat left;}


#content_main ul p
{text-indent: 0px;
margin: 5px 0 10px 10px;}

/* #content_main ul p.hidden
{display: none; using display instead of visibility because I don't want the p to take up space when not shown - Kyrnin) 
} I LATER MOVED THIS INTO A SCRIPT INSTEAD SO PARAGRAPHS WOULD BE VISIBLE WITH JAVASCRIPT TURNED OFF*/

#content_main ul p.unhidden
{display: block;}

#content_main p#toggle
{display: none;}


/* Styling for Gallery - Tanaka */

/*#content_gallery img.feature
{margin-left: 34px;		/* column width (288) - image width (220) / 2 
padding-bottom: 10px;
}

#content_gallery ul
{margin-left: 36px;} /* thumbnails set in a couple of pixels from feature image 

#content_gallery ul li 
{display: inline;
padding: 5px 5px 0 0;
position: relative;
}
#content_gallery ul li img
{padding: 4px;
border: 1px dashed #ac1f23; 
}*/



#content_gallery {
	overflow: hidden;
	border: none;
	padding: 10px;
	margin: 0 auto;}
	
img { border: none;}

#content_gallery div img {
	padding: 10px 0;
	float: left;}
	
#content_gallery ul.thumbnails {
	margin: 0;
	padding: 0 0 0 10px;
	width: 220px;
	float: left;}
	
#content_gallery ul.thumbnails li{
	width: 37px;
	height: 37px;
	margin: 5px 15px 5px 0;
	padding: 0;
	float: left;
	overflow: hidden;
	position: relative;
	border: 1px solid #ac1f23;
	text-align: center;}
	
#content_gallery ul.thumbnails li:hover {
	border: 1px dashed #ac1f23;
	-moz-opacity:.75; 
	filter:alpha(opacity=75); 
	opacity:.75; }
	
#content_gallery ul.thumbnails li img {
	position: absolute;
	top: -180px;
	left: -145px;}

p.gallery
{padding: 0 4em 0 1em;
text-align: left;}

/* Styling for Supplementary Content (Go to...) */

div#content_sub
{background: url(../images/notepaper.jpg) no-repeat center;}

#content_sub h2
{margin-top: 35px;
text-indent: 70px;}

#content_sub ul
{text-indent: 70px;}

#content_sub ul li
{padding: 15px 0 0 0;}

#content_sub a
{color: #596a63;
text-decoration: none;
font-size: 95%;}

#content_sub a:visited
{text-decoration: line-through;}

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

/* Styling for Secondary Navigation */

#nav_sub ul
{position: absolute;
text-indent: 20px;
width: 85%;
right: 0;
font-family: AvantGarde, "Avant Garde", Helvetica, sans-serif;}

#nav_sub ul li{
border-bottom: 2px solid #ffffff;
border-top: 2px solid #ffffff;}

#nav_sub ul li ul li
{padding-left: 20px;
border-bottom: 0;}

#nav_sub ul li a
{display: block;
background-color: #596a63;
text-decoration: none;
color: #ffffff;
padding: 1em;
width: 100%; /*to fix display: block not working in IE/Windows - A List Apart */
}

html>body #nav_sub ul li a 
{width: auto;			/*to fix display: block & width: 100% not working in IE5/Mac & Netscape/Mozilla - A List Apart */
}

#nav_sub ul li a:visited
{background-color: #838f80;
color: #fbf2e4;}

#nav_sub ul li a:hover, #nav_sub ul li a:active
{background-color: #838f80;}



#nav_sub ul#sightseeing li a.active
{background: #838f80 url(../images/sight_icon_sub.png) left no-repeat;
color: #ffffff;}

#nav_sub ul#accommodation li a.active
{background: #838f80 url(../images/acc_icon_sub.png) left no-repeat;
color: #ffffff;}

#nav_sub ul#experiences li a.active
{background: #838f80 url(../images/exp_icon_sub.png) left no-repeat;
color: #ffffff;}

#nav_sub ul#touristinfo li a.active
{background: #838f80 url(../images/info_icon_sub.png) left no-repeat;
color: #ffffff;}

/* Home content styling */

#content_intro p
{font-family: Georgia, "Times New Roman", serif;
font-size: 130%;
line-height: 1.5em; 
font-weight: normal;}

#content_intro p span
{color: #ac1f23;}

#content_intro blockquote p
{padding: 1.5em 6em 2em 5em;
font-size: 95%; /*% of intro p*/
line-height: 1.2em;}

cite
{padding: 1em;
font-style: italic;}

#feature2
{height: 220px;
width: 75%;
margin: auto; }

#feature3, #feature4, #feature5
{height: 180px;
width: 75%;
margin: auto; }

#feature1, #feature6
{text-align: center;
height: 220px;} 

p.caption
{font-family: "Handwriting - Dakota", "Bradley Hand", "Brush Script", fantasy;
font-size: 110%;
padding-top: 0.1em;}

hr 
{background-color: #ac1f23;
width: 60%;
height: 2px;
margin: auto;}

#content_sub1 p, #content_sub2 p
{line-height: 1.5em;
padding-bottom: 1.5em;} 

[lang=it] /*attribute selector - matches all elements with the lang attribute set to italian - http://www.smashingmagazine.com/2007/05/10/70-expert-ideas-for-better-css-coding/ */
{border-bottom: 1px dotted #ac1f23;}

p.time
{padding: 1em 3em 1em 4em;
text-align: left;}

#content_sidepanel ul
{padding-bottom: 1.5em;}

#content_sidepanel ul li
{padding-top: 0.5em;}

/* Footer stying */

div#footer ul 
{padding-left: 34px;}

div#footer ul li 
{display: inline;}

div#footer h2 
{padding: 0.5em 0 0.5em 34px;}/* 34px is to line up with the image gallery */

div#footer img
{opacity: 0.8;
filter: alpha(opacity=80); /*to tone down the ugly sponsored ads a bit - W3Schools */
}

#site_info ul
{padding: 1em 0 1em 0;}

/* Form stying */

form
{font-family: "AvantGarde CE", Helvetica, Arial, san-serif;}

fieldset
{margin: 20px 0 50px 50px;
font-size: 120%;}

fieldset li 
{padding-bottom: 1.5em;}

select.select, select.select:hover, select.select:focus
{width: 20.5em; /*falls slightly short of text field so added extra .5em*/
background-color: #ac1f23;
color: #fff;}

option
{background-color: #fff;
color: #000;
padding: 0.5em 0 0 0;}

option.default
{padding: 0.5em 0 0 0;
background-color: #ac1f23;
color: #fff;}

input.text
{width: 20em;
height: 2em;
border: 3px solid #ac1f23;}

textarea.text
{width: 20em;
border: 3px solid #ac1f23;}

input.submit
{color: #fff;
background-color: #ac1f23;
border: none;
font-size: 110%;
letter-spacing: .05em;
padding: .5em 1.5em .5em 1.5em;
/*margin-bottom: 5em;*/
}

label 
{display: block;}