/** Master Styles for Twillingate Project
By Taliesin Smith

Last Edited - August 6, 2008 
Validated - May 27, 2008 **/

/***** Container Colours *****/
body {background-color: #E9EFE0;}
#container {background: #fff url(../../static/images/cssImages/bg-subMenu.png) repeat-y left;}
#pageHeader {background-color: #f8a016;} /*#f8a016;*/
/*#contentContainer{background: transparent url(../../static/images/cssImages/bg-subMenu.png) repeat-y left;}*/
#content {background-color: #fff;}
#mainNav{background-color: #f8a016;}/*#bdd78d*/
#subMenu{background-color: #661898;} /*#661898;*/
#sideBar {background-color: #fff;}
#pageFooter {background: #fff url(../../static/images/cssImages/bg-subMenu.png) repeat-y left;}
#homeLink {background: transparent;}

/** Positioning of main container divs **/
body {
	text-align: center;
	}
#container {/*contains all other containers*/
	text-align: left;
	}
#container {
	width: 892px;
	margin: 0 auto;
	}
#pageHeader {
	position: relative;
}
#contentContainer {
	float: left;
	width: 100%;
	}
#contentContainer, #sideBar {
	margin-top: 1px;
	}
#content {
	float: left;
	margin: 0 223px;
	width: 447px;
	}
#subMenu {
	float: left;
	width: 223px;
	margin-left: -893px; /* negative margin puts menu on the left side of content */
	}
#sideBar {
	float: left;
	width: 222px;
	margin-left: -222px; /*negative margin puts sideBar inside right side of content */
	}
#pageFooter {
	clear:left;
	width:100%;
	}
#pageFooter div{
	text-align:center;
	font-size:90%;
	color: #939598;
	margin-top:20px;
}
#content,
#subMenu,
#sideBar {
	padding-bottom: 20px;
}
#sideBar img {
	vertical-align:bottom;
}

#sideBar a {
	display: block;
	margin-bottom: 5px;
}
 
/** Environmental Pretty Styles**/
a#homeLink {
	text-decoration: none;
	font-size: 45px;
	line-height: 48px;
	display: block;
	width: 100%;
	position: relative; /*for z-index*/
	z-index: 500;
	height: 45px;
	padding: 0;
	margin: 0;
	font-weight: bold;
	color: #fabe60;
	text-align: right;
	}
#homeLink:link, #homeLink:visited, #homeLink:hover, #home:focus, home:active {
	text-decoration: none;
	/*color: #661898;*/	
	}
#branding {
	margin: -5px 0 0 0;
	padding: 0;
	height: 191px;
	width: 223px;
	font-size: 35px;
	font-weight: bold;
	text-align: left;
	text-indent: 30px;
	text-transform: lowercase;
	color: #d5fb99;
	background-color: #9dc65d;
	border: 1px #fff solid;
	border-left: none;
	}
#branding span{
	display: block;
	line-height: 37px;
	height: 35px;
	position: absolute;
	top: 202px;
}

#tagLine {
	margin: 0;
	padding: 0;
	width: 668px;
	height: 191px;
	position: absolute;
	top: 40px;
	left: 223px;
	/*margin: -193px 0 0 223px;*/
	background: transparent url(../../static/images/banners/h2-iceberg.jpg) no-repeat right top;
	z-index: 0;
	border: 1px #fff solid;
	border-right: none;
	}
#tagLine span, #branding span.hide {
	display: block;
	text-indent: -9999px;
	font-size: 1px;
	line-height: 1px;
	}
.skipToContent {
	height: 1px;
	line-height: 1px;
	background-color: #fff;
}	
/** Navigation - targeted by envrionment **/	
#mainNav {
	font-size: 13px;
	line-height: 1em;
	height: 1em;
	color: #fff;
	}
#mainNav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	height: 20px;
	background-color: #f8a016;
	border: 1px #fff solid;
	border-top: none;
	border-right: none;
	border-left: none;
	}
#mainNav li {
	float: left; 
	line-height: 20px;
}
#mainNav a {
	border-right: 2px #fff solid;
	font-weight: normal;
}
/*#mainNav .first a {
	border-left: none;
}*/
/*#mainNav .last a {
	border-right: 2px #fff solid;
}*/
#mainNav a {
	display: block;
	color: #fff;
	padding: 0 25px;
}
#mainNav a:hover, 
#mainNav .active {
	color: #661898;
	text-decoration: none;
}
#subNav, #quickNav, .galNav {
	font-size: 12px;
	line-height: 1em;
	list-style-type: none;
	}
#quickNav, #subNav, .galNav {
	margin: 20px 0 0 35px;
	padding: 0;
	width: 154px;
}
.galMenu {/* creates box around gallery navigation*/
	border: 1px solid #9dc65d; /*Light green*/
}
.galNav {
	padding-bottom: 20px;
}
#subNav, .galNav {
	text-align: center;
}
#subNav a, .fancyButton a {
	color: #fff;
	font-weight: normal;
	display: block;
}
.galNav a {
	font-weight: normal;
	display: block;
}
#sideBar h3 {
	text-align: center;
}


#subNav a:hover, 
#quickNav a:hover,
.galNav a:hover,
#subNav .active {
	text-decoration:none;
	color: #f8a016;
}
#subNav li, .galNav li {
	height: 20px;
	line-height: 20px;
	border-bottom: 1px solid #a172c0;
}
#quickNav a {
	color: #fff;
	font-weight: normal;
}
#quickNav a:hover,
#quickNav .active {
	border: 1px #f8a016 solid;
}
.fancyButton li {
	margin-bottom: 4px;
	line-height: 20px;
}
.fancyButton a {
	text-indent: 60px;
	background-position: 25px 50%;
	background-repeat: no-repeat;
	background-color: #8646af;
	border: 1px solid #a172c0;
}
a.bookmark {background-image: url(../../static/images/cssImages/bookmark.png);}
a.tellAFriend {background-image: url(../../static/images/cssImages/tellAFriend.png);}
a.gallery {background-image: url(../../static/images/cssImages/gallery.png);}
a.faq {background-image: url(../../static/images/cssImages/faq.png);}
a.news {background-image: url(../../static/images/cssImages/news.png);}
a.links {background-image: url(../../static/images/cssImages/links.png);}
a.siteMap {background-image: url(../../static/images/cssImages/siteMap.png);}
a.facebook {background-image: url(../../static/images/cssImages/facebook.png);}
a.delicious {background-image: url(../../static/images/cssImages/delicious.png);}
a.digg {background-image: url(../../static/images/cssImages/digg.png);}

.paging {
	list-style-type: none;
	color: #441364;
	font-size: 11px;
	line-height: 13px;
	float: right;
	width: 75px;
	padding-bottom: 0;
	margin-top: 10px;
	margin-right: 15px;
	padding: 0;
}
.paging a {
	padding-right: 0;/*0.5em*/
	}
.paging li {
	display: inline;
	border-right-width: 1px;
	border-right-style: solid;
	padding-right: 0.55em; /*padding bigger on li to compensate for border*/
}
.paging li.pages {
	border-right: none;
	display: block;
	text-align: left;
	padding-right: 0;
}
.pages .curPage, .pages .totPages {
	font-weight: bold;
}
.paging .next {
	border-right: none;
	padding-right: 0;
	padding-left: 0.5em;
}
#pageFooter {
	text-align: left;
	padding-bottom: 20px;
}
#pageFooter .pipeLine {
	margin: 0 0 0 223px;
	padding: 0 0 0 2px;
}
#pageFooter a {
	color: #939598;
	text-decoration: none;
}
#pageFooter a:hover,
#pageFooter .active {
	text-decoration: underline;	
}
/** -Did You Know div **/
#didYouKnow {
	margin: 25px 0 0 35px;
	padding: 0;
	width: 154px;
}	
#didYouKnow h3 {
	color: #9dc65d;
	font-size: 12px;
	text-indent: 60px;
	margin: 0;
	padding: 0 0 25px 0;
	background-position: 25px top;
	background-repeat: no-repeat;
	background-image: url(../../static/images/cssImages/didYouKnow.png);
	}
#didYouKnow p {
	color: #fff;
	font-size: 1.1em;
	line-height: 1.3em;
	margin: 0 0 0 7px;
	padding: 0 0 0 18px;
	background-image: url(../../static/images/cssImages/quoteOpen.png);
	background-position: left top;
	background-repeat: no-repeat;
	}
#didYouKnow span {
	display: inline-block;
	background-image: url(../../static/images/cssImages/quoteClose.png);
	background-position: right bottom;
	background-repeat: no-repeat;
	padding-right: 18px;
	}
div.rc {
	margin: 0 4px 4px;
	border-bottom: 1px solid #cee2ad;
	padding-left: 3px;
	}
.rc h1, .rc h2 {
	margin: 15px 20px 15px 11px; /* adjustesd to avoid bouncing text to inner pages */
	padding: 0;
	letter-spacing: normal;
	font-weight: normal;
}
.rc p {
	margin: 0 20px 20px 11px; /* adjustesd to avoid bouncing text to inner pages */
	padding: 0; 
}
.rc p a, .rc p a:link, .rc p a:visited {
	text-decoration: none;
	font-weight: bold;
}
.rc p a:hover, .rc p a:focus, .rc p a:active {
	text-decoration: underline;
	font-weight: bold;
}
/** Special Link/Hover behaviour for headings and links on home page**/
/** h2 headings made to look like h1's on home page **/
.mainHeading a, .mainHeading a:link, .mainHeading a:visited {
	height: 27px;
	padding: 0 30px 0 0;
	font-weight: normal;
	/*background: transparent url(../../static/images/cssImages/h2-arrow.png) no-repeat right 7px;*/
}
h1 a, h1 a:link, h1 a:visited, h1 a:hover, h1 a:focus, h1 a:active, 
h2.mainHeading a, h2.mainHeading a:link, h2.mainHeading a:visited{
	text-decoration: none;
	color: #f8a016;
	font-weight:normal;
}
.green h2 a, .green h2 a:link, .green h2 a:visited {
	text-decoration: none;
	color: #9dc65d;
}
/*.green h2 a:hover, .green h2 a:focus, .green h2 a:active  {
	background: transparent url(../../static/images/cssImages/h2-arrow.png) no-repeat right -67px;
}*/
.purple h2 a, .purple h2 a:link, .purple h2 a:visited{
	text-decoration: none;
	color: #441364;
}
/*.purple h2 a:hover, .purple h2 a:focus, .purple h2 a:active {
	background: transparent url(../../static/images/cssImages/h2-arrow.png) no-repeat right -104px;
}*/
h2.mainHeading {
	font-size: 35px;
} 
h1.mainHeading a:active, 
h1.mainHeading a:hover,
h1.mainHeading a:focus,  
h2.mainHeading a:active, 
h2.mainHeading a:hover, 
h2.mainHeading a:focus {
	/*background: transparent url(../../static/images/cssImages/h2-arrow.png) no-repeat right -30px;*/
	color: #666666;
}
.orange p a, .orange p a:link, .orange p a:visited, .orange p a:hover, .orange p a:focus, .orange p a:active {
	color: #f8a016;
}
.green p a, .green p a:link, .green p a:visited, .green p a:hover, .green p a:focus, .green p a:active {
	color: #9dc65d;
}
.purple p a, .purple p a:link, .purple p a:visited, .purple p a:hover, .purple p a:focus, .purple p a:active {
	color: #441364;
}


/**Special List styles**/
.sitemap, .photos {
	list-style-type: none;
}
.sitemap {
	padding-left: 0;
}
.sitemap li a,
.sitemap li a:link,
.sitemap li a:visited {
	font-size: 1.2em;
	line-height: 1.4em;
	font-weight: bold;
	color: #f8a016;
}
.sitemap li.sub a, 
.sitemap li.sub a:link,
.sitemap li.sub a:visited {
	font-size: 1.2em;
	line-height:1.4em;
	text-decoration: none;
	font-weight: normal;
	color: #441364; /*dark purple*/
	padding-left: 40px;
}
.sitemap a:hover,
.sitemap a:focus,
.sitemap a:active,
li.sub a:hover,
li.sub a:focus,
li.sub a:active {
	text-decoration: none;
	color: #9dc65d; /*Light green*/
}
.photos {
	padding: 0;
	margin-right: 0;
	margin-left: 20px;	
}
.photos a {
	padding: 0;
	margin:0;
}
.photos img {
	padding: 5px 10px;
	margin: 1px;
}
.photos li{
	display: inline;
	padding:0;
	margin:0;
}
.photos a:hover img{
	border: 1px #9dc65d solid;
	margin: 0;
}
/** Form Styles **/
fieldset {
	margin: 1em 20px;
	border: none;
	}
fieldset br {
	display: none;
	}
legend {
	font-weight: bold;
	color: #f8a016;
	text-align: left;
	}
form p {
	margin: 0.5em 0 0 0;
	}
#personalInfo div {
	margin: 0.5em 0;
	}
#personalInfo div label {
	float: left;
	border: none;
	display: block;
	width: 110px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
}
#personalInfo input {
	background-color: #e6fdc2;
	border: 1px #b1d17d solid;
	width: 200px;
	height: 20px;
	line-height: 20px;
	vertical-align: middle;
	margin-right: 10px;
}
#personalInfo input:focus{
	background-color: #fde5bf;
	border: 1px #fabe60 solid;
}
#buttons {
	margin-left: 20px;
}
#buttons .submit, #buttons .reset {
	width: 75px;
	height: 20px;
	font-size: 0.95em;
	margin-bottom: 2em;
}
#personalInfo em, p em  {
	/*color: #441364;
	font-size: 120%;
	font-weight: bold;*/
	
	}
/** Error Message styles **/
#em_friendName,
#em_friendEmail,
#em_yourName,
#em_yourEmail {
	text-align: left;
	color: #441364;
	font-weight: bold;
	display: none;
	margin-left: 110px;
	margin-bottom: 20px;
	width: 60%;
} 
/* Toggle Styles - for hikes (but could be generalized) div.time, h6 and p with an image all wrapped inside a div with the class toggle */
.toggle {
		margin-right: 15px;
		margin-bottom: 15px;
	}
.toggle h6 {
		cursor: pointer;
		margin-right: 0;
		border-bottom: 1px solid #cee2ad;
		color: #f8a016;
		font-size: 1em;
	}
.toggle div {
		display:none;
		margin-right: 0;
		/*margin-bottom:15px;*/
	}
.toggle div.time {
		float: right;
		clear: right;
		display:block;
	}
	
.toggle p{
	margin-right:0px;
}
#weather{
	margin-left:35px;
	margin-right:35px;
}
#translate{
	margin:10px 35px 0px 35px;
}

#contentContainer #content ul {
	margin-bottom:0;
	padding-bottom:0;
	
}