/* Yankee Inn Main CSS */
/*------- 7/22/09 2:15PM -------*/
/*   
Theme Name: biMainMU
Theme URI: www.yankeeinn.com
Description: Theme for Yankee Inn
Author: Allan Douglas, DDGraphics WebMedia
Author: URI: www.ddgwebmedia.com
 */

/**********************************/

/* @group HTML Elements */

/*-------- HTML Elements --------*/

body {
	color: #08083E;
	font: 90% Optima, "Sans Serif";
	margin: 0;
	padding: 4em;
}

a {
	text-decoration: none;
}

p, td, h1, h2, h3, h4, h5, ul {
	font-family: Optima, "Sans Serif";
	color: #333;
}

p {
	font-size: .95em;
	margin: 0;
	padding: 0;
}

h1 {
	color: #333;
	font-size: 1.8em;
}

h2 {
	font-size: 1.5em;
	color: #333333;
}

h3 {
	font-size: 1.2em;
	color: #333333;
}

blockquote {
	width: 90%;
	padding: 0;
	margin: 1em auto 0;
}

/* @end HTML Elements */
/**************************/
/* @group ID Selectors */

/* ---- ID Selectors ---- */
/*- Container Around Everything -*/

#container {
	min-width: 750px;
	max-width: 1440px;
	margin: 0 auto;
	/*border: thin dashed navy;*/
}
/* @end ID Selectors */
/*********************************/
/* the appropriate background class will be applied based on ID attached to the body */

/* @group propcolumns */

#propcolumns {
	background: white;
}

#propcolumns #wrapper {
	float: right;
	width: 83%;
	margin: 0;
	padding: 0;
	/*border: thin dashed fuchsia;*/
}

#propcolumns #maincontent {
	float: left;
	width: 73%;
	height: 38em;
	margin: 0 auto;
	padding: 0;
	background: url(../SiteAssets/Jpeg/IMG_1970A.jpg) no-repeat center top;
	/*border: medium dashed #00ff23;*/
	overflow: auto;
}

#propcolumns #maincontentcontact {
	float: left;
	width: 73%;
	margin: 0 auto;
	padding: 0;
	background: url(../SiteAssets/Jpeg/IMG_1970A.jpg) no-repeat center top;
}

table.anyCol {
	border-bottom: medium groove navy;
}

/* @group Sub Content */

#subcontent {
	float: right;
	width: 26%;
	margin: 0;
	padding: 0;
	/*border: thin solid maroon;*/
}

/* @end Sub Content */

/* @group Left Content */

#leftcontent {
	/*clear: both;*/
	float: left;
	width: 16%;
	margin: 0;
	padding: 0;
}

/* leftCol controls non-rounded boxes in the thinner left column, known as leftContent */
 
.leftCol {
	width: 95%;
	padding: .5em 0;
	background: #FFF;
	margin: .5em 0 0 .5em;
}

.leftCol p {
	margin: 0;
	font-size: 90%;
	color: #666;
	padding: 0 .5em .3em;
}


/* @end Left Content */

/* @end propcolumns */
/************************/
/* @group Box Stuff */

/* box is the shaded area that holds a rounded corner box or flat box, fitting the given width of the column it is in. Usually combined with another class to control inner elements, eg box default */

.box {
	margin: 1.5em auto 0;
	padding: .5em 0 .5em 0;
}

.boxinns {
	width: 99%;
	padding: .5em 0;
	margin: 0 auto;
}

.boxinns h3 {
	font-family: "Monotype Corsiva", sans-serif;
	font-size: 135%;
	text-align: center;
	margin: 0;
	padding: 0;
}

.boxfull {
	clear: both;
	width: 99%;
	margin: 0 auto;
	padding: .5em 0 .5em 0;
}

.boxfull h4 {
	clear: both;
	text-transform: uppercase;
	font-size: 92%;
	padding: .2em;
	margin: 1em 0 0;	
}

/* Styling of the boxes if there is no JavaScript support */

.anyCol {
	width: 97%;
	padding: .5em 0;
	margin: 0 auto;
}

.thingstodo h2 {
	color: #FFF;
}

/* paragraph styles for any main boxes */

.anyCol p, .col p {
	color: #333;
	padding: 0;
	margin: .5em .5em 0;
}

/* and then these h1 h3 statements, unique to whichever section has been attached above, will give the headers the appropriate background color */ 

.box h1 {
	font-size: 160%;
	background: white;
	padding: .2em;
	margin: 0 .5em;
}

/*-h2 {
	font: 130% "Imprint MT Shadow";
	color: #08083E;
	background: #6767B0;
	padding: .2em;
	margin: 0 .5em;
}-*/

.box h3 {
	text-transform: uppercase;
	font-size: 92%;
	margin: 1em .5em 0;
	padding: .2em;
}

h4{
	text-transform: uppercase;
	font-size: 92%;
	padding: 2px;
	margin: 1em 0 0 .5em;
}

/********************************/


.about p {
	margin: 0;
	padding: 0 .5em .5em .8em;
}


/* CSS for the box ends here */

/* @end Box Stuff */

/* date and posted control the small text info in article blurbs */

.date {
	font-size: 85%;
	font-weight: bold;
	color: #666;
	padding: 0 0 .5em .5em;
}

.posted {
	display: block;
	margin: 0 0 0 5em;
	padding: 0 0 1em 0;
	font-weight: bold;
	color: #666;
}

.postedUnderline {
	display: block;
	margin: 0 5px .5em 5em;
	padding: 0 0 .5em 0;
	font-weight: bold;
	color: #666;
	border-bottom: 1px solid #999;
}

address {
	margin-left: 5em;
}
/**************************/

/* @group Reservation Stuff */ 

.resies {
	font-variant: small-caps;
	text-align: center;
}

.reziesdropdowns {
	text-align: center;
	margin: .5em 0 0;
	padding: 0;
}

/* @end Town Stuff */
/***********************/
/* @group Contacts Page Stuff */

/*--- Contacts Page Stuff ---*/
/*-- Needed in every site that uses our DB for contact information --*/

#contact {
	float: left;
	width: 98%;
	position: relative;
	margin: 0 .5em;
	padding: 0;
	/*z-index: -6;*/
}

#contact .modules {
	clear: both;
	padding-top: 5px;
	text-align: center;
  }
  
#contact h2 {
	margin-bottom: 0px;
	-moz-border-radius: 10px;
	color: white;
	background-color: #807E59;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #666666;
	text-align: center;
	margin-top: 15px;
}

#contact h4 {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 0px;
	-moz-border-radius: 10px;
	color: white;
	background-color: #807E59;
	border-bottom-width: medium;
	border-bottom-style: groove;
	border-bottom-color: #666666;
}

#contact h5 {
	text-align: center;
	font-weight: normal;
	color: #333;
}

#contact .contact {
	text-align: center;
	float: left;
	display: block;
	font-size: small;
	width: 33%;
}
#rightcolcntct {
	float: right;
	width: 20%;
	margin: 0;
	z-index: 0;
	position: fixed;
	left: 78%;
}
.rowcccntct {
	clear: both;
	width: 100%;
}
.imagerc {
	width: 100%;
	border: thick ridge white;
}
.imagecc {
	width: 31%;
	border: thick ridge white;
}
/****************************/
/*---- Form Stuff ----*/
#frmcontainer {
	/*background-color: #CCCCCC;*/
	width: 90%;
	/*border: thin dashed #660099;*/
	margin: 0 auto;
	/*clear: both;*/
}
#frmcontainer h2 {
	font-size: 1.1em;
	margin: .5em 0em;
}

div.row {
	clear: both;
	padding-top: 5px;
	text-align: center;
  }
div.row1 {
	clear: both;
	padding-top: .5em;
	text-align: center;
}
div.row span.label {
	float: left;
	width: 35%;
	text-align: right;
  }

div.row span.formw {
	float: right;
	width: 45%;
	text-align: left;
}

span.formw input, textarea {
	border: thin inset silver;
	background-color: white;
}


div.row span.labelcr {
	float: left;
	width: 30%;
	text-align: right;
}

div.row span.labelbg {
	float: left;
	width: 15%;
	text-align: right;
}

div.row span.formcr {
	float: right;
	width: 70%;
	text-align: left;
	color: #000066;
}

div.row span.formbg {
	float: right;
	width: 10%;
	text-align: left;
}

div.rowbttns {
	clear: both;
	padding-top: .5em;
	text-align: center;
}
 
/*------ Form Button ------*/
.formbttn {
	cursor: pointer;
	background-color: #807E59;
	color: white;
	border: outset 1px #ccc;
	padding: 1px 2px;
}

.formbttnoff {
	background-color: #666699;
	color: #CCCCCC;
	border: outset 1px #ccc;
	padding: 1px 2px;
}

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

.sbmtbutton a:link, .sbmtbutton a:visited {
	width: 7em;
	display: block;
	border-top: medium solid #CCCCCC;
	border-right: medium solid #666;
	border-bottom: medium solid #666;
	border-left: medium solid #CCCCCC;
	color: navy;
	background-color: #FF7745;
	text-align: center;
	font-size: 1em;
	padding-top: 3px;
	padding-bottom: 3px;
	float: left;
}

.sbmtbutton a:hover, .sbmtbutton a:active {
	color: #FF7745;
	background-color: navy;
	text-align: center;
	border-top-color: #666;
	border-right-color: #CCC;
	border-bottom-color: #CCC;
	border-left-color: #666;
}
 /*---- End Form CSS ----*/

/* @end Contacts Page Stuff */
/***************************/
/* @group Form Stuff */

/* form styling - not much though kids */

form {
	margin: 0;
	padding: 0;
	/* font-size: 100%; */
}

fieldset {
	width: 146px;
	border: 0;
	margin: 0 0 10px 0;
	padding: 5px;
}

.default fieldset {
	width: auto;
	border: 0;
	margin: 10px 0 10px 50px;
	padding: 0;
}

legend {
	text-transform: uppercase;
	font-size: 99%;
	font-weight: bold;
	background: #D72E2E;
	color: #FFF;
	margin: 1em 0 .2em;
	padding: .2em;
}

.default legend {
	display: none;
}

label {
	display: none;
}


.default label {
	display: block;
	font-weight: bold;
}

input {
	margin-top: 0;
	padding: .2em;
	border: 0;
	background: #CABA8A;
	color: navy;
}

textarea {
	margin-top: 0;
	padding: .2em;
	border: 0;
	background: #CABA8A;
	color: navy;
}

.default input {
	display: block;
}

input.submit {
	border: 0;
	margin-bottom: -6px;
	padding: 2px;
	background: transparent;
	font-size: 1em;
}
/*-- rezies form stuff --*/

.rowrc {
	/*clear: both;*/
	margin: .5em 0 0;
	text-align: center;
}

.labelrc1 {
	float: left;
	width: 49%;
	text-align: center;
}

.labeldd {
	float: left;
	width: 49%;
	text-align: right;
	font-weight: bold;
}

.formrc1 {
	float: left;
	width: 49%;
	text-align: center;
}

.formdd {
	float: right;
	width: 50%;
	text-align: left;
}

/* @end Form Stuff */
/***********************/
/* @group Image Stuff */

/* @group Portfolio Stuff */

#imgthmbswrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
}	

.thmbsrow {
	clear: both;
	width: 90%;
	margin: 0 auto;
	border: medium inset #807E59;
}

.thmbsfloat {
	float: left;
	/*width: 28%;*/
	text-align: center;
	margin: .2em .1em;
}

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

.photoCol {
	margin: 0 1em;
	padding: .5em 0;
	background: #FFF;
}

.photoCol img {
	display: block;
	text-align: center;
	margin-top: .4em;
	border: .3em solid #C5BDBD;
}

.phototitle {
	clear: both;
	font-size: 1.2em;
	font-variant: small-caps;
	text-align: center;
	margin: .5em 0;
}

.pfgalleryrow {
	clear: both;
	width: 70%;
	margin: 0 auto;

}

.pfgalleryprev, .pfgallerynext {
	font-size: 1em;
	font-weight: bold;
	text-transform: uppercase;
	color: #B7A07F;
}

.pfgalleryprev {
	float: left;
	text-align: left;
	width: 34%;
	/*border: .2em solid #C5BDBD;*/
	line-height: 120%;
}

.pfgallerynext {
	float: right;
	text-align: right;
	width: 34%;
	/*border: .2em solid #C5BDBD;*/
	line-height: 120%;
}

.pfpiclargepic {
	display: block;
	text-align: center;
	margin: 0 auto;
	padding: 0;
}
/*--- End Portfolio CSS ---*/

/* @end Portfolio Stuff */
/* For these larger images, I don't want them to float, for that causes the h3 above to be pushed to the right. I also declare a top margin to space the header and image apart, and also increase the border width slightly.  We also set it to display:block so that if body id is twoColLayout, the image will force the header and other bits to wrap around it */

.mainImage {
	display: block;
	text-align: center;
	float: none;
	margin-top: .4em;
	border: .3em solid #C5BDBD;
}

.imgaligncntr {
	display: block;
	text-align: center;
}

.imgindexadd {
	display: block;
	text-align: center;
	margin: 18em auto 0;
	padding: 0;
}

.imgcntrnegmargin {
	display: block;
	text-align: center;
}

/* drop shadow effect for the gallery thumbnails. Sadly this requires a div to be wrapped around the image markup, which is a shame */

.img-wrapper {
	margin: 20px 40px 0 0;
	background: url(shadow.gif) no-repeat bottom right;
	float: left;
	line-height: 0;
}

.img-wrapper img {
	float: none;
	margin: 0;
	background: #fff;
	padding: 4px;
	border: 1px solid #C5BDBD;
	position: relative;
	left: -5px;
	top: -5px;
}

/* used to ensure all our floated thumbnails stay the right width away from the left side of the box */

.thumbnails {
	margin: 0 0 20px 50px;
}

/* spacer used immediately after the floated gallery thumbnails to ensure the box expands to hold them all */

.spacer {
	clear: both;
}

/* @end Image Classes*/
/************************/
/* @group Navigation */
/*------ Navigation ------*/
/*-- 11/9/09 --*/

/* @group Top Nav */

#navigation {
	float: right;
	width: 100%;
	height: 2.3em;
	background: #181860;
}

#ournav, #ournav ul {
	float: right;
	width: 100%;
	list-style: none;
	line-height: 1.5em;
	background: #181860;
	font-weight: bold;
	padding: 0;
	margin: 0;
	border-top: thin solid #00440f;
	/*border-bottom: thin solid #00440f;*/
}

#ournav a {
	display: block;
	/*width: 10em;
	w\idth: 6em;*/
	text-decoration: none;
	color: white;
	padding: 0.2em .7em;
}

#ournav a:hover, #ournav a:active {
	color: navy;
}

#ournav li {
	float: left;
	padding: .3em 0; 
	/*width: 10em;*/
}

#ournav li a:before {
	content: ":: ";
}

#ournav li a:after {
	content: " : ";
}

#ournav li.wide8 {
	width: 8em;
}

#ournav li ul {
	position: absolute;
	left: -999em;
	height: auto;
	width: 12em;
	font-weight: normal;
	margin: 0;
	border: thin solid #00440f;
}

#ournav li ul.iehalf {  /*second-level lists*/
	width: 6em;
}

#ournav li ul.iehalf li {  
	width: 6em;
	padding-right: 0;
}

#ournav li ul.iehalf li ul {  
	margin: -2em 0 0 6em;
	width: 6em;
}

#ournav li li {
	padding-right: .5em;
	width: 11.5em
}

#ournav li ul a {
	width: 10em;
	/*w\idth: 9em;*/
}

#ournav li ul ul {
	margin: -2.1em 0 0 12em;
}

#ournav li:hover ul ul, #ournav li:hover ul ul ul, #ournav li.sfhover ul ul, #ournav li.sfhover ul ul ul {
	left: -999em;
	z-index: 1;
}

#ournav li:hover ul, #ournav li li:hover ul, #ournav li li li:hover ul, #ournav li.sfhover ul, #ournav li li.sfhover ul, #ournav li li li.sfhover ul {
	left: auto;
	z-index: 1;
}

#ournav li:hover, #ournav li.sfhover {
	background: #6767B0;
	color: #181860;
}

/* Highlighting the current page */

body.home #ournav a#home, body.about #ournav a#about, body.towngov #ournav a#towngov, body.bylaws #ournav a#bylaws, body.permits #ournav a#permits, body.events #ournav a#events, body.history #ournav a#history, body.gallery #ournav a#gallery, body.contact #ournav a#contactc {
	color: gray;
	text-decoration: underline;
}

body.home #ournav a:hover#home,
body.about #ournav a:hover#about, body.bylaws #ournav a:hover#bylaws, body.towngov #ournav a:hover#towngov,
body.permits #ournav a:hover#permits, body.events #ournav a:hover#events, body.history #ournav a:hover#history, body.gallery #ournav a:hover#gallery, body.contact #ournav a:hover#contactc {
	color: black;
}

/* @end Top Nav */
/***********************/
/* @group Column Nav */
/* column nav links */

.colnav, .colnav ul {
	padding: 0;
	list-style: none;
	float: left;
	width: 99%;
	text-align: right;
	margin: 1em .5em 0 0;
}

.colnav a {
	color: #666;
	line-height: 150%;
	text-decoration: none;
	display: block;
}

.colnav a:hover, .colnav a:active {
	color: maroon;
}

.colnav li {   
	position: relative;
	float: left;
	line-height: 150%;
	width: 100%; 
}

.colnav li ul li {  
	margin-left: .5em;
}
/*-- end column nav links --*/
/* @end Column Nav */
/*************************/
/* @group Footer Nav */
/*---- Footer ----*/

#footer {
	clear: both;
	width: 90%;
	margin: 1em auto 0;
	text-align: center;
	font-size: .9em;
	padding: 0;
	border-top: 1px solid #2D356A;
}

#footer p {
	font-size: .9em;
}

#footer a:link, #footer a:visited {
	color: #181860;
}

#footer a:hover, #footer a:active {
	background: #181860;
	color: silver;
}

/*--- End Footer ---*/
/* @end Footer Nav */
/* @end Navigation */
/**************************/
/* @group Site Wide Classes */

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

/*---- Used to push divs ----*/

.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

.clearfix {
	display: inline-block;
}

/* Hides from IE-mac \*/

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

/* End hide from IE-mac */

/*--- End ClearFix ---*/
	
.banner h1 {
	font-variant: small-caps;
	text-align: center;
	color: silver;
	background-color: #8507ad;
	font-style: italic;
	letter-spacing: .5em;
}

.row {
	clear: both;
}

.bdrbottom {
	border-bottom: medium ridge #800;
}

.tagline {
	text-align: center;
	border-bottom: medium ridge #800;
	color: #800;
	width: 90%;
	margin: 1em auto 1.5em;
	padding: 0;
}

/* @group Opacity */

.transblack {
	clear: both;
	background: url(../SiteAssets/Jpeg/transblack45.png) repeat left top;
}

.opac7 {
	background: #FFF;
	opacity: 0.7;
}

.opac8 {
	background: #FFF;
	opacity: 0.8;
}

.opac9 {
	background: #FFF;
	opacity: 0.9;
}

.transwhite {
	background: url(../SiteAssets/Jpeg/transwhite85.jpg) repeat left top;
}

/* @end Opacity */

.zlayer1 {
	position: relative;
	z-index: 10;
	border: thin groove green;
}

.zlayer2 {
	/*display: none;*/
	z-index: -1;
	position: relative;
}

.ddGraphics {
	font-family: "Comic Sans MS";
	font-size: .85em;
	font-weight: bold;
	color: #666666;
	text-decoration: none;
}
.WebMedia {
	font-family: "Comic Sans MS";
	font-size: .85em;
	font-weight: bold;
	color: #990000;
	text-decoration: none;
}

/* @end Site Wide Classes */