/* ----------------------------------------------------------- */
/* ----------------------------------------------------------- */
/* CSS Document for Murwillumbah Historical Society            */
/* Designed in conjunction with FF 3.6.13 and IE 8 (32 bit)    */
/* Initial design and integration by Chrisotpher King          */
/* Copyright (c) 2012 A. All rights reserved.                  */
/*                                                             */
/* NB: comment tags below offer insights & assisstance         */
/* NB: all colours are abbreviated hex codes (xyz, not xxyyzz) */
/*                                                             */
/* NB: tags like <div> are centred by margin:auto              */
/* NB: @font-face is for FF3.6+ & IE5+                         */
/* ----------------------------------------------------------- */

body {
background-color:#cccccc;
background-image:url('images/gradBody.png');
background-repeat:repeat-x;
font-size:16px;
font-family:verdana, arial, helvetica, "sans serif";
padding:0;
margin:0;
text-align:center;
/*min-height:2160px; /* sets the minimum height for the page in modern browsers */
behavior:url('csshover.htc'); /* calls the behaviour file for the menu in IE */
}

@font-face {
font-family:'arial round';
src:url('fonts/arial_round-webfont.eot');
src:url('fonts/arial_round-webfont.eot?iefix') format('eot'),
	url('fonts/arial_round-webfont.woff') format('woff'),
	url('fonts/arial_round-webfont.ttf') format('truetype'),
	url('fonts/arial_round-webfont.svg#webfontEQRsKTNU') format('svg');
font-weight:bold;
font-style:bold;
}


/* ----------------------------------------------------------- */
/* ---------------------- Heading  Tags ---------------------- */
/* ----------------------------------------------------------- */

h1 {
font-family:"bookman old style", georgia, "time new roman";
font-weight:bold;
font-size:2.6em;
text-align:center;
padding-top:25px;
padding-left:10px;
padding-bottom:15px;
padding-right:10px;
cursor:default;
/* background: */
display:block;
width:840px;
margin:auto;
background:#999999;
border-bottom:2px #333333 solid;
}

h1 a.heading {
color:black;
text-decoration:none;
}

h2 {
font-family:georgia, "time new roman";
font-weight:bold;
font-size:1.6em;
text-align:center;
vertical-align:top;
font-style:italic;
cursor:default;
color:#000000;
}

h3 {
padding-top:20px;
font-weight:bold;
font-size:1.25em;
text-align:left;
cursor:default;
font-weight:bold;
font-family:"arial rounded mt bold", "arial round", "arial unicode ms", verdana;
/* will use the rounded Arial font from the system first before reverting to the webfont */
}

h4 {
font-family:georgia, "times new roman", serif;
font-size:1.1em;
font-weight:bold;
margin:0;
}

/* ----------------------------------------------------------- */
/* --------------------- General Content --------------------- */
/* ----------------------------------------------------------- */

p {
line-height:150%;
text-align:justify;
}

ul {
line-height:150%;
text-align:left;
}

img {
border:none;
outline:none;
color:blue;
font-weight:bold;
font-size:0.8em;
} /* removes border around images within anchor <a> tags; also formats alt text*/

div.middlePic {
margin:auto;
width:400px;
height:300px;
}

sup {
	vertical-align:baseline;
	font-size:0.8em;
	position:relative;
	top:-0.4em;
	} /* removes extra space added between lines when <sup> is used */

/* ----------------------------------------------------------- */
/* ------------------------- Header -------------------------- */
/* ----------------------------------------------------------- */

div.header {
width:860px;
margin:auto;
background:#cccccc url('images/headergrad.png') repeat-x;
color:#333333;
padding-bottom:20px;
overflow:hidden;
}

div.header span.midTitle {
color:#666600;
font-style:italic;
font-family:georgia, garamond, "times new roman", serif;
font-weight:bold;
font-size:0.left;
}

div.header div {
height:158px;
}

div.leftHeader {
width:200px;
float:left;
padding:5px;
}

div.leftHeader img {
position:relative;
vertical-align:bottom;
margin:auto;
padding-top:2em;
text-align:left;
}

div.midHeader {
width:440px;
float:left;
padding-top:5px;
padding-bottom:5px;
}

div.midHeader p.construction {
background:#cccccc;
color:#996600;
font-size:0.8em;
font-weight:bold;
text-align:center;
border:2px #663300 solid;
margin-top:0em;
margin-left:2em;
margin-right:2em;
margin-bottom:4em;
padding:0.6eem;
top:0;
}

div.midHeader p.construction a {
font-weight:normal;
}

div.rightHeader {
width:200px;
float:top;
left:0;
position:relative;
overflow:hidden;
font-size:0.8em;
line-height:100%;
font-family:georgia, garamond, "times new roman", serif;
color:#663300;
}

div.rightHeader p.people {
text-align:left;
}

div.rightHeader p {
text-align:right;
font-family:georgia, garamond, "times new roman", serif;
padding-bottom:10px;
margin-top:0;
float:right;
line-height:180%;
}

div.rightHeader p.address {
border-bottom:2px #333333 solid; /* this puts the dividing line there instead of using <hr> */
text-align:right;
margin-top:0;
}

div.rightHeader a {
color:black;
text-decoration:none;
}

div.rightHeader a:hover {
color:black;
text-decoration:underline;
}

span.headerInfo {
text-align:center;
margin:auto;
font-size:0.8em;
font-family:verdana,arial,helvetica;
display:block;
line-height:150%;
}

/* ----------------------------------------------------------- */
/* ----------------------- Navigation ------------------------ */
/* ----------------------------------------------------------- */

div.navBar {
margin:auto;
width:860px;
text-align:center;
position:relative;
left:-40px;
padding-top:0;
border-bottom:0;
}

ul.menu {
width:860px;
margin:auto;
text-align:center;
}

ul.menu li {
float:left;
list-style:none;
text-indent:0;
width:122px;
background:#cccccc url('images/menugrad.png'); /* image doesn't entirely work in IE - different colour rendering */
position:relative;
}

ul.menu li a:hover {
color:#663300; /* colour of main menu items on mouseover */
}

ul.menu li:hover{
background:#cccccc;
border-top:1px #333333 solid;
}

ul.menu li:hover li{
border-top:0;
background-image:none;
}

ul.menu ul { /* the submenus - hidden until mouseover */
display:none;
text-align:left;
position:absolute;
margin:0;
padding:0;
border:0;
float:right;
}

ul.menu ul li { /* the submenu items */
display:block;
overflow:hidden;
width:190px;
font-weight:normal; /* stops submenu from going bold when its parent is bold */
}

ul.menu ul a:hover {
background:#ffffcc; /* affects the colour of the highlighted links' background */
color:#996600; /* colour of submenu item links on mouseover */
}

ul.menu ul a:active {
color:#993300; /*  */
}

#current{
font-weight:bold;
}

.baseLine {
border-bottom:2px #333333 solid;
}

.baseLine:hover {
border:0;
} /* removes ugly double line underneath submenus */

ul.menu a {
display:block;
text-decoration:none;
}

ul.menu li ul li a {
display:block;
border:1px #333333 solid;
padding:2px;
border-top:0; /* removes double lines between submenu items */
}

ul.menu li ul li:hover {
text-indent:2px; /* moves the submenu items accross slightly on mouseover */
}

ul.menu li:hover ul, li.over ul {
display:block;
} /* shows submenus on mouseover */

/* ----------------------------------------------------------- */
/* --------------------- Page Navigation --------------------- */
/* ----------------------------------------------------------- */

div.pageNav {
padding-right:5px;
}

div.pageNav ul {
list-style:none;
padding:5px;
display:block;
margin:auto;
text-align:center;
}

div.pageNav ul li {
padding:2px;
font-family:garamond,"times new roman";
border-bottom:1px #666666 solid;
color:#666666;
display:inline;
}

div.pageNav ul li a:link {
text-decoration:none;
}

div.pageNav ul li a {
text-decoration:underline;
}

/* ----------------------------------------------------------- */
/* -------------------------- Links -------------------------- */
/* ----------------------------------------------------------- */

a.navLink {
display:block;
background:grey;
padding:6px;
text-decoration:none;
font-weight:bold;
}

a:link {
color:#000099;
text-decoration:underline;
}      /* ordinary unvisited link */

a:hover {
color:#993300;
text-decoration:none;
}      /* mouse over link */

a:active {
color:#996600;
text-decoration:none;
}     /* selected link when link is clicked and held (does not appear to work in IE) */

a:visited {
color:#000099;
text-decoration:underline;
}   /* visited link */

/* ----------------------------------------------------------- */
/* ------------------------- Classes ------------------------- */
/* ----------------------------------------------------------- */

.content {
background-color:#ffffcc;
width:800px;
padding-top:30px;
padding-left:30px;
padding-right:30px;
padding-bottom:30px;
margin-bottom:30px;
margin-left:auto;
margin-right:auto;
border-bottom:2px #333333 solid;
}

#leftList {
float:left;
width:30%;
padding-bottom:30px;
}

#rightList {
float:right;
display:block;
width:70%;
padding-bottom:30px;
}

ul.linkList {
list-style:none;
display:block;
line-height:200%;
padding:10px;
}

p.attribution {
font-style:italic;
}

p.attribution em {
font-style:normal;
}

.cost {
font-size:0.8em;
font-weight:bold;
background:#cccccc;
vertical-align:top;
padding:2px;
}

div.book div {
text-align:left;
display:block;
width:100%;
padding:5px;
line-height:150%;
}

div.book div h4 {
font-family:georgia, "times new roman", serif;
font-size:1.1em;
font-weight:bold;
margin:0;
}

div.book div em {
font-style:italic;
display:block;
font-size:0.9em;
}

div.book div p {
padding-left:20px;
padding-right:20px;
font-family:georgia, "times new roman", serif;
}

div.book div p.price {
font-family:verdana,arial,helvetica,"sans serif";
}

div.book div p.price:before {
content:"Price: ";
}

div.topLink {
text-align:left;
text-indent:20px;
padding-top:20px;
}

.topLink a {
font-size:0.6em;
color:#333333;
text-decoration:none;
text-shadow:none;
font-weight:bold;
}

div.topLink a:hover {
text-decoration:underline;
text-shadow:black 0px 0px 2px;
}

div.topLink a:active {
text-shadow:black 2px 2px 4px;
}

div.footer  {
padding:2%;
width:800px;
margin:auto;
padding-left:30px;
padding-right:30px;
font-size:0.8em;
font-family:calibri, "arial narrow", arial, helvetica;
text-align:center;
padding-top:0;
cursor:default;
}

div.footer p {
text-align:center;
width:380px;
margin:auto;
line-height:175%;
}

div.footer a {
color:#333333;
text-decoration:none;
border-bottom:1px #333333 dotted;
font-weight:bold;
cursor:hand;
}

div.footer a:hover {
text-shadow:#333333 0px 0px 4px;
text-decoration:none;
border-bottom:0;
}

div.footer a:active{
text-shadow:#333333 2px 2px 4px;
text-decoration:none;
border-bottom:0;
}

div.footer .design {
font-family:cambria, garamond, "times new roman", georgia;
font-style:italic;
}

/* ----------------------------------------------------------- */
/* --------------------------- IDs --------------------------- */
/* ----------------------------------------------------------- */

#map {
padding:20px;
float:right;
}

/* ----------------------------------------------------------- */
/* -------------------------- Other -------------------------- */
/* ----------------------------------------------------------- */

:active {
outline:none;
} /* eliminates dotted lines usually found around links when clicked */

:focus {
outline:none;
} /* should apply when :active is not effective; may reduce accessibility; remove if necessary*/