/* CSS Document */

/*	Less Framework 4
	http://lessframework.com
	by Joni Korpi
	License: http://opensource.org/licenses/mit-license.php	*/


/*	Resets
	------	*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, 
p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, 
img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, hr, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, 
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figure, figcaption, hgroup, 
menu, footer, header, nav, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

article, aside, canvas, figure, figure img, figcaption, hgroup,
footer, header, nav, section, audio, video {
	display: block;
}

a img {border: 0;}
.clear {clear: both;}

a:link, a:visited {color: #3a5c90;}
a:hover, a:active {color: #2a5caa;}

h1, h2, h3, h4, h5, h6, p {margin: 6px 0; padding: 6px 0;}

h1 {color: #cd4b48; font-size: 13px; font-variant: italic;}

h1 {text-align: center;}
h2 {}
aside h2 { margin: 10px 0; line-height: 1.3em;}
aside h3, aside h4, aside p {margin: 10px 0; padding: 6px 0;}
h3 {font-size: 1.2em; color: #9e474d;}
h4 {font-size: 1em;  color: #823d45;}
p {font-size: 1em;}
.small {font-size: .9em; color: #284364;}


ul li,  ol li {margin: 4px; padding: 4px; font-size: 12px;}
ol li h3 {margin: 0; padding: 0;}

#content ul,  #content ol {margin: 20px 10px 10px 20px; padding-left: 6px;}
#content aside ul {margin: 20px 0 10px 20px; padding-left: 6px;}
#content ul ul {margin: 20px 0 10px 10px; padding-left: 0;}
#content ol ul {margin-left: 10px;}
#content a {font-weight: bold;}

img {width: auto; max-width: 100%; height: auto;}

body {background: #31415a; margin: 0; padding: 0; font-family: verdana, sans-serif;}

#main {margin: 0 auto; width: 900px; border-top: 1px solid #3f5678;}

#header {position: relative; width: 100%; border-top: 1px solid #31415a;}
#headerLeft {width: 50%; float: left; margin-left: 70px;}
#headerRight {width: 30%; float: right; margin: 10px 50px 10px 0; text-align: center;}
#headerRight p {margin: 0 0 3px; padding: 0;}
#headerRight p.icons {background: #3f5678 url(../bg-images/bg-blue1.jpg) repeat-y;
-webkit-box-shadow: 2px 2px 2px #333;
-moz-box-shadow: 2px 2px 2px #333;
box-shadow: 2px 2px 2px #333;}

#contentWrap {position: relative; width: 100%; margin: 0; border-top: 1px solid #3f5678;  background: #fff;
-webkit-box-shadow: 2px 2px 2px #222;
-moz-box-shadow: 2px 2px 2px #222;
box-shadow: 2px 2px 2px #222;}

#info {background: #3f5678 url(../bg-images/bg-blue2.jpg); text-align: center;}

#content { margin: 25px 15px 10px; padding-top: 10px;}

#lighthouseWrap { background: url(../bg-images/lake-sunapee-lighthouse.jpg) bottom right no-repeat;}

#contentLeft {width: 62%; float: left;}
aside {width: 34%; float: right; padding-top: 50px;}
aside h3 {border-top: 1px dotted #000; border-bottom: 1px dotted #000;}
h3.separate {border-top: 1px dotted #000; border-bottom: 1px dotted #000;}
#contentPadding {padding: 30px 50px;}

#contentCenter {width: 70%; margin: auto; min-width: 300px;}

footer {position: relative; margin: 30px auto 10px;  min-width: 420px; background: #3f5678 url(../bg-images/bg-blue2.jpg);}
#footerLeft {width: 62%; float: left; margin-left: 5px;}
#footerRight {width: 32%; float: right; margin: 0 10px; padding: 0 10px;
}

footer h3 {color: #fff; margin-top: 0;}
#main footer a {color: #eee;}
#copyright p {font-size: 11px; text-align: center;}

#copyright a:link, #copyright a:visited {color: #000;}

#logo {margin: 10px 0 0;
-webkit-box-shadow: 2px 2px 2px #222;
-moz-box-shadow: 2px 2px 2px #222;
box-shadow: 2px 2px 2px #222;}

#footerLogo {float: right;  width: 150px;}


/*	Typography presets
	------------------	*/

.gigantic {
	font-size: 110px;
	line-height: 120px;
	letter-spacing: -2px;
}

.huge, h1 {
	font-size: 18px;
	line-height: 24px;}


.large, h2 {color: #8f3e39;
	font-size: 18px;
	line-height: 22px;}

.bigger, h3 {
	font-size: 14px;
	line-height: 18px;
}

.big, h4 {
		font-size: 13px;
	line-height: 18px;
	
}

p {font-size: 13px;
line-height: 18px;}

.small, small {
	font-size: 12px;
	line-height: 14px;
}

/* Selection colours (easy to forget) */

::selection 	 	{background: rgb(255,255,158);}
::-moz-selection 	{background: rgb(255,255,158);}
img::selection 		{background: transparent;}
img::-moz-selection	{background: transparent;}
body {-webkit-tap-highlight-color: rgb(255,255,158);}



/*		Default Layout: 992px. 
		Gutters: 24px.
		Outer margins: 48px.
		Leftover space for scrollbars @1024px: 32px.
-------------------------------------------------------------------------------
cols    1     2      3      4      5      6      7      8      9      10
px      68    160    252    344    436    528    620    712    804    896    */

#main {
	width: 896px;
	padding: 0 20px;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}



/*		Tablet Layout: 768px.
		Gutters: 24px.
		Outer margins: 28px.
		Inherits styles from: Default Layout.
-----------------------------------------------------------------
cols    1     2      3      4      5      6      7      8
px      68    160    252    344    436    528    620    712    */

@media only screen and (min-width: 768px) and (max-width: 991px) {
	
#main {
	width: 760px;
	padding: 0 20px;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

#slideshow {margin: 0 60px;}
#lighthouseWrap {background: url(../bg-images/lake-sunapee-lighthouse2.jpg) bottom right no-repeat;}

}


@media only screen and (min-width: 480px) and (max-width: 767px) {
	
	#main {
	width: 480px;
	padding: 0 20px;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}

#slideshow {margin: 0 25px;}	
#headerLeft {float: none; width: 80%; margin: 0 auto;}
#headerRight {display: none;}
#contentLeft {float: none; width: 100%;}
aside {float: none; width: 100%;}
#footerLeft {float: none; width: 100%; margin: 0 auto;}
#footerRight {float: none; width: 100%;}
#lighthouseWrap {background: none;}

}

/*		Wide Mobile Layout: 480px.
		Gutters: 24px.
		Outer margins: 22px.
		Inherits styles from: Default Layout, Mobile Layout.
------------------------------------------------------------
cols    1     2      3      4      5
px      68    160    252    344    436    */

@media only screen and (max-width: 479px) {
	
		#main {
	width: 400px;
	padding: 0 20px;
	-webkit-text-size-adjust: 100%; /* Stops Mobile Safari from auto-adjusting font-sizes */
}
	
	
#slideshow {margin: 0 60px;}	
#headerLeft {float: none; width: 100%; margin: 0 auto;}
#headerRight {display: none;}
#contentLeft {float: none; width: 100%;}
aside {float: none; width: 100%;}
#footerLeft {float: none; width: 100%; margin: 0 auto;}
#footerRight {float: none; width: 100%;}		
#lighthouseWrap {background: none;}
}



aside h3 {text-align: center;}

aside p.centerAlign2 {margin: 0; text-align: center;}
h3 span {border-bottom: 1px dashed #457438;}


footer p {color: #ccc;}


/* miscellaneous */

table.services {border-collapse: collapse;}
table.services td {vertical-align: top; width: 50%;}

.author {text-align: right; font-weight: bold;}

.highlight  {color: #833d45; font-weight: bold}
.highlight2  { font-weight: bold; color: #457438;}

.alignRight {float: right; margin: 0 0 10px 20px;}
.alignLeft {float: left; margin: 0 20px 10px 0;}
.centerAlign {text-align: center;}

img.featured {-moz-box-shadow: 0 0 3px 3px #c7c1a0;
-webkit-box-shadow: 0 0 3px 3px #c7c1a0;
 box-shadow: 0 0 6px 3px #c7c1a0;}

img.spaceTop {margin-top: 50px;}
img.spaceTop2 {margin-top: 40px;}

.author {text-align: right; font-weight: bold;}