/* Yankee Inn Main CSS */
/*------- 12/9/09 4: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: #363644;
	font: 90% "Big Caslon", "Serif";
	padding-top: 1.5em;
}

a {
	text-decoration: none;
}

p, td, h1, h2, h3, h4, h5, ul {
	font-family: "Big Caslon", "Serif";
	color: #363644;
}

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

h1 {
	font-size: 1.8em;
}

h2 {
	font-size: 1.5em;
}

h3 {
	font-size: 1.2em;
}

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

/*- Grid Container Around Everything -*/

.container16 {
	width: 99%;
	max-width: 85em;
	margin: 0 auto;
	background: white;
}

/* ---- ID Selectors ---- */
#maincontent {
	height: 38em;
	background: url(../SiteAssets/Jpeg/yiBackgroundSpring3.jpg) no-repeat center top;
	overflow: auto;
	/*border: thin dashed fuchsia;*/
}

#maincontentcontact {
	background: url(../SiteAssets/Jpeg/yiBackgroundSpring3.jpg) no-repeat center top;
}

#maincontentlanding {
	background: none;
}

#subcontent {
	/*border: thin solid orange;*/
}

/* @end ID Selectors */
/*********************************/
/* @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 {
	padding: .5em 0;
	/*border: thin dotted lime;*/
}

.boxleft {
	padding: .5em 0 .5em 0;
}

/* paragraph styles for any main boxes */
.box p {
	margin: 0 0 .5em .5em;
}

.box h1 {
	font-size: 150%;
	color: #363644;
	margin: 0 auto 0 .5em;
	padding: .2em;
}

.box h2 {
	font-size: 120%;					
	font-weight: normal;
	text-transform: uppercase;
	/*border-left: medium outset #EED0DA;
	border-bottom: medium outset #EED0DA;*/
	margin-left: .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;
}

/*-- Used only on index page of each Inn --*/
.boxinns {
	width: 99%;
	padding: .5em 0;
	margin: 0 auto;
}

.boxinns h3 {
	font-size: 135%;
	text-align: left;
	margin: 0;
	padding: 0;
	font-weight: normal;
}

.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;	
}

.block {
	padding: 1em 0;
}

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

.boxcol {
	/*background: #EFF4CA;*/
	line-height: 120%;
	margin: 0 1em;
}



.plus1 {
	margin-top: 1em;
}

.plus2 {
	
	margin-top: 2em;
}

.grid_4 .box h2 a {
	background-position: 97% 50%;
}

.grid_5 .box h2 a {
	background-position: 98% 50%;
}

.grid_12 .box h2 a {
	background-position: 99% 50%;
}


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

.anyCol {
	width: 96%;
	padding: .5em 0;
	margin: -1em 0 0 1.7em;
	/*border: thin dotted maroon;*/
}

.thingstodo h2 {
	color: #FFF;
}

/* paragraph styles for anyCol main boxes */

.anyCol p, ul {
	color: #363644;
	padding: 0;
	margin: .5em .5em 0;
}

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

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

/* CSS for the box ends here */

/* @end Box Stuff */
/***************************/
/* @group Specials Stuff */
/*- Controls specials on Index.php -*/
.pusher { /*- used to push down images in index page on Yankee Inn -*/
	margin: 27em auto 0 2%;	
}
.specials {
	/*position: absolute;*/
	width: 95%;
	margin: 27em auto 0 2%;
}
.specialsita {
	/*position: absolute;*/
	width: 95%;
	margin: 0em auto 0 2%;
	border: thin inset navy;
}
.specialsbrdr {
	border-right: thin inset navy;
	border-bottom: thin inset navy;
	border-left: thin inset navy;
}

.specials h2 {
	color: whitesmoke;
	background-color: #424665;
	margin: 1em auto 0 0;
	letter-spacing: .2em;
	text-transform: none;
	padding: .2em .2em .2em .5em;
	font: 140% Zapfino;
}

.specials h3 {
	text-transform: none;
	font-size: 120%;
	margin: 1em 0 0;
	padding: 0;
	color: navy;
	font-weight: normal;
	font-style: normal;
}

.specials a {
	color: navy;
}

.specials p {
	text-align: center;
}

.specials ul {
	width: 96%;
	list-style-type: disc;
	margin: .8em auto 0;
}

.specials li {
	margin: .5em auto .5em .5em;
}

.specials li a {
	color: #363644;
}

.specials li a:hover {
	color: #827ea6;
}

.smallfont {
	font-variant: small-caps;
	font-size: 93%;
}
/* @end Specials 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;
	padding: 0;
	margin: -1em 0 0 .5em;
}

#contact .modules {
	clear: both;
	padding-top: 5px;
	text-align: center;
  }

#contact p, h3 {
	margin-left: 1.5em;
}
  
#contact h2 {
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: white;
	background-color: #807E59;
	border-bottom: medium groove #666666;
	text-align: center;
	margin: 1.5em 0 0;
}

#contact h4 {
	margin: 0 auto;
	text-align: center;
	margin-bottom: 0px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	color: white;
	background-color: #807E59;
	border-bottom: medium groove #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 */
/*-- used to scroll images on index page -*/

#pic {
	clear: both;
	position: relative;
	width: 90%;
	text-align: center;
	overflow: hidden;
	margin: 1em auto 1.2em;
}

#picscroll {
	/*left: -100px;*/
	border-top: medium groove #030;
	border-bottom: medium groove #030;
	padding: .2em 0;
}

/* @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;
	width: 90%;
	font-variant: small-caps;
	font-size: 110%;
	text-align: center;
	padding: 0;
	margin: 0 auto;
	border: medium inset #536386;
}

.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 ------*/
/*-- 12/9/09 --*/
/* @group Column Nav */
/* column nav links */

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

.colnav a {
	color: #363644;
	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 Clearing-Floats */
/*------ ClearFix ------*/
/*---- Used to push divs ----*/
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
	display: inline-block;
}

* html .clearfix {
	height: 1%;
}

.clearfix {
	display: block;
}

	/*--- End ClearFix ---*/

/* =Clear Floated Elements -----*/
/* http://sonspring.com/journal/clearing-floats */

html body * span.clear,
html body * div.clear,
html body * li.clear,
html body * dd.clear {
	background: none;
	border: 0;
	clear: both;
	display: block;
	float: none;
	font-size: 0;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	visibility: hidden;
	width: 0;
	height: 0;
}

/* @end Clearing-Floats */
/**************************/
/* @group Site Wide Classes */

/*-------- Classes --------*/
	
.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 */