/* ===============================
Randy Caruso
12.30.09
FRAMEWORK August 1 2009 
REVISED November 5 2009
written for - www.domain.com

swatch colors
===========

#D2612C - orange
#231514 - dark brown (background)
#606060 - dark gray (general text)
================================= */

.orange { color: #F4874C; font-size: 1.4em; }
.brown { color: #D2612C; }
.gray { color: #606060; }

.note {
	color: red;
	font-weight: bold;
	font-size: 1.6em;
	font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
	border: 1px solid red;
	padding:10px;
	xdisplay:none;
}



html { overflow-y: scroll; }
	
	
	html { min-height: 100%; margin-bottom: 1px; }

* { margin: 0; padding: 0; }

html, body { height: 100%; }


body {
	height: 100%;
	font-size: 62.5%;
	xfont-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-family: Arial, Verdana, Geneva, Helvetica, sans-serif;
	xfont-family: “lucida sans”, verdana, arial, helvetica, sans-serif;
	xfont-family: “Myriad Pro”, Arial, Helvetica, Tahoma, sans-serif;
	xfont-family: Tahoma, Geneva, sans-serif;
	xfont-family: Helvetica, Arial, sans-serif;
	xfont-family: georgia, times, helvetica, sans-serif;
	xfont-family: Helvetica, Arial,Tahoma, sans-serif;
	xfont-family: Georgia, "Times New Roman", Times, serif;
	xfont-family: Frutiger, "Myriad Web", "Trebuchet MS", Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	background-color: #231514;
}

/* -----------------------  LINKS  ---------------------- */

a { color: #606060; outline: none; }
a:hover { color: black; }
a:focus { color: #EC3B0F; }
a:visited { color: #606060; }
a:active { outline: 0; position: relative; xtop: 1px; }
nav a:active { outline: 0; position: relative; xtop:0px; }
img { border: none; }






/*  fancy images   http://inspectelement.com/demos/css3/realism/polaroids.html
img {
	border: 15px solid #fff;
	border-bottom: 65px solid #fff;
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg);
	-moz-transform: rotate(1deg);
}

img:hover {
	-webkit-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 6px 6px 8px rgba(0, 0, 0, 0.1);
	-webkit-transform: rotate(1deg) scale(1.05);
	-moz-transform: rotate(1deg) scale(1.05);
}
*/


/* ronded corners

background-color: #ccc;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border: 1px solid #000;
padding: 10px;

*/



/*  Dotted Link Underline  */
x-a { font-weight: bold; text-decoration: none; border-bottom: 1px dotted #b3322d; !important: ; }



/* -----------------------  Headers  ---------------------- */

p {
	font-size: 1.2em;
	xline-height: 1.8em;
	margin: 0 0 .7em 0;
	color: #606060;
}





h1 { font-size: 2.4em;  margin: 0 0 .3em 0; color:#606060 }
h2 { font-size: 2.2em;  margin: 0 0 .4em 0;  color:#606060 }
h3 { font-size: 2em;  margin: 0 0 .4em 0; color:#606060 }
h4 { font-size: 1.7em;  margin: 0 0 .4em 0; color:#606060 }
h5 { font-size: 1.5em;  margin: 0 0 .4em 0; color:#606060 }
h6 { font-size: 1.3em;  margin: 0 0 .6em 0;  color:#606060 }








/* -------------------  Blockquotes  (Pick One) ----------------- */
blockquote { xmargin: 2em; color: #666; font-style: italic; padding: 5px 0 0 0; }

/*  puts a line above and below*/
x-blockquote { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; color: #666; }

/* Can put quotes in the text */
x-blockquote *:first-child:before { content: "\201C"; }
x-blockquote *:first-child:after { content: "\201D"; }








/* -------------------  Lists   ----------------- */

ul { xmargin: 8px 0 8px 0; }
ul li {
	xcolor: #62625E;
	xfont-size: 1.2em;
	xmargin: 2px 0 3px 16px;
	xlist-style-type: none;
	xpadding: 0 0 1px 14px;
	xbackground: url(../images/bullet.gif) no-repeat 0 4px;
	xline-height: 1.5em;
}


ol { margin: 0 30px 18px 0; }
ol li {
	font-size: 1.2em;
	margin: 2px 0 8px 32px;
	color: #62625E;
	line-height: 1.5em;
}















/* ----------------------------------------------------  Page Architecure -------------------------------------------------------- */	

#column {
	margin: 0 auto;
	text-align: left;
	width: 960px;
	background: #FDF0DD url(../images/paper.jpg) repeat-y 770px 0;
}







/* -----------------------------------------------  Header ------------------------- ------------- */	
#header {
	width: 960px;
	height: 212px;
	margin: 0 auto;
	background: #DDA146 url(../images/nav/piggy-bank-header.jpg) no-repeat top right;
}

#header h1  { position: absolute; left: -9999px; }
.dressing { width: 960px; height: 30px; background: url(../images/nav/subhead.jpg) no-repeat top; }






/* -----------------------------------------------  NAV ------------------------------------------ */	
#nav { width: 808px; height: 38px; margin: 174px 0 0 0; float: right; padding: 0; }

#nav ul  { position: absolute; left: -9999px; }





















/* -----------------------------------------------  Wrapper OR Container-------------------------------------- */	
#wrapper { width: 960px; margin: 0 auto; xborder: 1px solid blue; }



/* ------------  Full Height Container -------------- */	
#container {
	min-height: 100%;
	background-color: #631E0F;
	width: 960px;
	margin: 0 auto;
}
* html #container { height: 100%; }




/* -----------------------------------------------  Content -------------------------------------- */	
#content {
	float: left;
	width: 766px;
	xpadding: 30px 30px 30px 30px;
}

.general-content {
	xpadding: 30px;
	xwidth: 770px;
	xbackground-color: red;
}
.menu-content { padding: 15px 50px 30px 50px; }

.review-content { padding: 25px 50px 30px 50px; }
.review-content p {
	margin: 0 0 20px 0;
}
.review-content h1{
	xposition: absolute; left: -9999px; 
}

.menu-content p {
	border-bottom: 1px solid #E6CDB7;
	padding: 0 0 10px 0;
}






#main {
	float: left;
	width: 767px;
	padding: 30px 0 30px 0;
	xborder: 1px solid blue;
}
.home-background {
	background: #EECD70 url(../images/home-background.jpg) repeat;
	xbackground-color: #DF9D42;
}
#celebrating {
	float: right;
	text-align: right;
}
#celebrating a {
	color:white;
}




/* -------------- SIDEBAR  ----------------- */

#sidebar {
	width: 190px;
	float: right;
	padding: 0 0 0 3px;
	text-align: right;
}
#sidebar-content {
	padding: 15px 0 0 0;
}

#sidebar h2 {
	margin: 20px 15px 0 0;
	font-size: 1.6em;
	color: #D2612C;
}
#sidebar p {
	padding: 0px 15px 0 15px;
	font-size: 1.2em;
	xcolor: #D2612C;
}
.join-button {
	xmargin: 0 0 10px 0;
	xfont-size: 1.6em;
	xcolor: #D2612C;
}

#sidebar ul { margin: 8px 0 18px 0; }
#sidebar ul li {
	color: #62625E;
	font-size: 1.2em;
	list-style-type: none;
	padding: 3px 15px 3px 0px;
	xline-height: 1.0em;
	width: 175px;
	xmargin: 0px 0 0px 0px;
	xbackground: none;

}

#sidebar a {
	color: #606060;
	text-decoration: none;
	font-weight: bold;
}
#sidebar a:hover{
	color: black;
	text-decoration: none;
	font-weight: bold;
	text-shadow: 0px 0px 4px #D2612C; 
}



.on {
	padding: 10px 0 0 15px;
	margin:0;
	background-image: url(../images/paperrepeater.jpg);
	xlist-style-type: none;
	xbackground: none;
	xbackground-color: red;
	xwidth: 190px;
	xheight: 20px;
}


















/* -------------- HOME  PAGE  ----------------- */
#player1 { margin: 0 0 0 35px; width: 700px; height: 470px; background-color: #555555; }

/* -----------------------------------------------  Footer ---------------------------------------- */	
#footer { width: 960px; height: 60px; margin: 0 auto; background-color: #631E0F; border-top: 3px solid White; }
#footer p { padding: 15px 30px 0 30px; color: white; }
#footer a { color: white; }
#footer a:hover { color: #F4E1B9; }
#copyright { float: left; width: 300px; }
#connect { float: right; width: 300px; text-align: right; }


/* -------------- CONTACT PAGE  ----------------- */

#contactform {
	width: 165px;
	xfloat: right;
	margin: 20px 12px 0 10px;
	color: white;
	font-size: 1.1em;
	isplay: inline;
	xbackground-color: gray;
}
.contact { text-indent: -100em; overflow: hidden; width: 367px; height: 38px; background: url(../images/contact-us.gif) no-repeat 0 7px; }
#contactinfo { float: left; width: 230px; height: 300px; border-right: 1px solid #BDD9EA; margin: 0 0 10px 0; }


/* ------------------  Contact Form V2 -------------------- */	

#contactform {
	xmargin: 0px 15px 60px 0;
	xwidth: 160px;
	xfloat: left;
}

#contactform p {
	padding: 0 0 2px 0;
	margin: 0;
}

.mailformfield{
	background-color: #EDEDED;
	border: 1px solid #9E9E9E;
	height: 18px;
	padding: 0 0 0 5px;
	margin: 0px 0 15px 0;
	width: 160px;
	color: #506569;
	font-family: Arial, Helvetica, sans-serif;
}

.messageformfield{
	background-color: #EDEDED;
	border: 1px solid #9E9E9E;
	height: 85px;
	margin: 2px 0 8px 0;
	padding: 3px 0 0 5px;
	width: 160px;
	color: #506569;
	font-family: Arial, Helvetica, sans-serif;
}





















textarea: focus { border: 1px solid red; }

.field { color: #506569; background-color: #E5E5E5; border: 0px solid #9E9E9E; font-size: 1.1em; font-family: arial, helvetica, sans-serif; }
.single { height: 18px; width: 162px; margin: 0; padding: 3px; }
.comment { height: 85px; width: 363px; padding: 3px 0 0 3px; overflow: hidden; !important: ; }

/* -------------------- submit button with rollover -------------------- */	
.submit { background: url(../images/send.gif) no-repeat; height: 17px; width: 82px; border: none; padding-top: 17px; float: right; cursor: pointer; margin: 0 3px 0 0; }
.submit:hover { background: url(../images/send.gif) no-repeat 0 -17px; }













/* -----------------------------------------------  Fancy Bits ---------------------------------------- */	

/* -------------------- stupid table tricks -------------------- */	
table { margin: 0 0 16px 0; }
.cell { padding: 0px 0 12px 0; }
.wide { width: 370px; }
.one { width: 200px; padding: 0  30px 10px 0; }




/* ------------------------  hr fixes ------------------------*/

*+html hr { xmargin: 0em 0 -7px 0; /*IE 7 bugfix*/ }
* html hr { xmargin: 0em 0 -7px 0; /*IE 6 bugfix*/ }

hr { background: #6A6A6A; margin: 25px 0  20px 0; clear: both; float: none; width: 100%; height: 2px; border: none; }

*hr { background: #6A6A6A; background: #6A6A6A; clear: both; float: none; width: 100%; height: 2px; margin: 1.45em 0 1.45em 0; border: none; }








caption { background:#eee;padding: 10px;}
.small { font-size: .9em; margin-bottom: 1.875em; line-height: 1.875em; }
.xsmall { xfont-size: 85%; }
.large { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; }
.hide { display: none; }

.quiet { color: #666; }
.loud { color: #000; }
address { font-size: 1.3em; margin: 0 0 1.5em 1em; font-style: italic; }
abbr, acronym { xborder-bottom: 1px dotted #666; }
sup, sub { line-height: 0; }
/* to create serif italic dramatic text, use this class */
.fancy { color: #666; font-family: "Warnock Pro", "Goudy Old Style","Palatino","Book Antiqua", Georgia, serif; font-style: italic; font-weight: normal; font-size: 1.2em; }  

/* creates small caps */
.caps { font-variant: small-caps; letter-spacing: 1px; text-transform: lowercase; font-size: 1.2em; font-weight: bold; padding: 0 2px; }

.box { padding: 1.5em; margin-bottom: 1.5em; background: #E5ECF9; }
cite { text-decoration: none; }
.floatleft { float: left; }
.floatright { float: right; }

.center { text-align: center; }

.picleft { float: left; padding: 4px 8px 8px 0; }
.picright { float: right; padding: 4px 0 8px 8px; }
#clear { clear: both; }
.clear {clear: both;}

/*Opacity?? http://arbent.net/blog/css-tips-that-every-beginning-developer-should-know-about
.class {
opacity: 0.7;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity:0.5;
}
*/



#mc_embed_signup {
	width: 300px;
}

.contact-map {
	float: right;
	margin: 0 0 30px 20px;
	border: 1px solid #9E9E9E;
}
.directions-map {
	border: 1px solid #9E9E9E;
	width:630px;
	height:400px;
}