@charset "UTF-8";
/* CSS Document */

/* General styles */
body {
  background: #ddd url('../images/dress_bkgrnd.gif');
  background-repeat: repeat;
  margin: 40px 0;
  padding: 0;
  width: 100%;
  min-width: 500px;
  text-align: center;
  font-size: 100%;
}

#photoholder {
	width:589px;
	height:700px;
	border:1px solid #732121;
	position: absolute;
    top: 25%;
    left: 50%;
    margin-left: -25%;
	background:#fff url('../images/loading.gif') 50% 50% no-repeat;
}

#thephoto {
	width:589px;
	height:700px;
}

/* 
   The main box contains everything and provides the overall left and right margins.
   Header, centerbox and footer are 100% wide relative to this box and stacked 
   vertically within it.
*/
div.mainbox {
position:relative;
width:80%;
margin:0 auto;
overflow:hidden;
background: #732121; /* Controls background color of left column */
border:solid 1px #CD7677;
}
	
/* Header style */
div.header {
  clear:both;
  float:left;
  background: #732121;
  width: 100%;
  padding-top: 1%;
  padding-bottom: 1%;
  font: 2em Vivaldi, "Edwardian Script ITC", "Apple Chancery", Arial, Verdana;
  color: #ffffff;
  text-align: center;
  /* border-bottom:solid 1px #CD7677; */
}

/* Footer Style */
div.footer {
  clear:both;
  width: 100%;
  padding-top: 1%;
  padding-bottom: 1%;
  color: #ffffff;
  background:#732121;
  text-align:center;
  /*border-top:solid 1px #CD7677;*/
}
div.footer-logo {
  clear:both;
  width: 99%;
  padding-top: 1%;
  padding-bottom: 1%;
  color: #CD7677;
  background:#732121;
  font: 0.7em Geneva, Arial, Helvetica, sans-serif;
  text-align:right;
  /*border-top:solid 1px #CD7677;*/
}
div.footer-logo a:link{
  color: #CD7677;
  text-decoration: underline;
}

div.footer-logo a:visited{
  color: #CD7677;
  text-decoration: underline;
}

div.footer-logo a:hover{
  color: #CD7677;
  text-decoration: underline overline;
}


/* column container */
.centerbox {
  position:relative;	/* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
  clear:both;			/* Make sure there is nothing to the left or right of this element */
  float:left;
  width:100%;			/* width of parent container (mainbox) */
  overflow:hidden;		/* Cut off any overhanging divs */
}

/* Magic to make this work */
.magic {
  background:#732121;  	/* Right column background colour (set to header background for uniform border around center content */
}

/*
  Why do we need so many containers?
  There is a bug in the Windows IE browser: if you specify a relative width (like "width:50%") 
  then the width will be based on the parent element instead of on the positioning element. (Violates CSS standards)
*/

/*
  The idea below is to creat a double-wide container. The relative position with rigt:100% means that the
  container will share a right boundary with its parent.  Then we left-margin at -200px, giving the width of
  the right column.
  
  Lastly, the background color for this container will end up being the background color of the center column.
*/
.magic .colmid {
  float:left;
  width:200%;
  margin-left:-150px; 	/* -200px Width of right column; includes padding on either side*/
  position:relative;
  right:100%;
  background:#CD7677;  	/* Centre column background colour */
}


.magic .colleft {
  float:left;
  width:100%;
  margin-left:-50%;
  position:relative;
  left:300px;         	/* 400px Left column width + right column width */
  background:#732121;  	/* Left column background colour */
}

.magic .centercolwrap {
  float:left;
  width:50%;
  position:relative;
  right:150px;        	/* 200px Width of left column */
  /*padding-bottom:1em;*/ 	/* Centre column bottom padding. Leave it out if it's zero */
}

.magic .centercol {
  margin:0 160px;     	/* Centre column side padding:  215px
                       	   Left padding = left column width + centre column left padding width
                           Right padding = right column width + centre column right padding width
						   Set equal to left/right column width for zero center column padding   */
  position:relative;
  left:200%;
  overflow:hidden;
  font: 1.1em/1.3em "Times New Roman", Georgia, Times, serif;
  color: #000000;
  text-align: left;
  padding: 5%;
}

.magic .leftcol {
  float:left;
  float:right;			/* This overrides the float:left above */
  width:140px;        	/* 170 px Width of left column content (left column width minus left and right padding) */
  position:relative;
  right:5px;         	/* 15px Width of the left-hand side padding on the left column */
}

.magic .rightcol {
  float:left;
  float:right;			/* This overrides the float:left above */
  width:140px;        	/* 170px Width of right column content (right column width minus left and right padding) */
  margin-right:15px;  	/* 45px Width of right column right-hand padding + left column left and right padding */
  position:relative;
  left:50%;
}

/* Make the first letter of each paragraph in the center
   section larger */
div.centercol > p:first-letter{
  font-size: 130%;
}

/* Unsorted list behavior for Visitor pages */
.ziaul{ 
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.ziali{
  background-image: url(../images/ziabullet.gif);
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 35px;
  margin-bottom: 0.4em;
}

div.centercol ul.circle {
  list-style-type: circle;
}

div.centercol hr {
border-top: 3px dotted #732121;
margin-top: 5px;
}

/* The hover effects for center content */
div.centercol a:link{
  color: #732121;;
  text-decoration: underline;
}

div.centercol a:visited{
  color: #732121;
  text-decoration: underline;
  margin: 0;
}

div.centercol a:hover{
  color: #FFCCFF;
  text-decoration: underline overline;
  margin: 0;
}

#smaller{
  font: 70% "Times New Roman", Georgia, Times;
  text-align: right;
  color: #732121;;
  text-decoration: underline;
}

div.centercol h1{
  width: 100%;
  font: 70% Geneva, Helvetica, Arial, sans-serif;
  font-style: italic;
  text-align: left;
}

div.centercol h2{
  width: 100%;
  font: 100% Geneva, Helvetica, Arial, sans-serif;
  font-style: bold;
  color: #732121;
  text-align: left;
}

div.centercol h3{
  background: #732121;
  color: #CD7677;
  font: 90% Geneva, Arial, Helvetica, sans-serif;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.5em;
  padding-left: .5em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}
/* h4 is thre 'reverse' of h3 */
div.centercol h4{
  background: #CD7677;
  color: #732121;
  font: 90% Geneva, Arial, Helvetica, sans-serif;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.5em;
  padding-left: .5em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

div.centercol h5{
  color: #732121;
  font: 90% Geneva, Arial, Helvetica, sans-serif;
  text-align: left;
  margin-top: 1em;
  margin-bottom: 0.5em;
}


.dashed { 
  border: #732121 dotted;
  background-color: #CD7677; 
  border-width: thin;
  margin-left: 15%;
  margin-right: 15%;
  margin-bottom: 20px;
  padding-top: 5px; 
  padding-right: 5px; 
  padding-bottom: 5px; 
  padding-left: 5px;
}

div.centercol blockquote{
  font: 85% Geneva, Helvetica, Arial, sans-serif;
}

* html div.centercol {
  height:1%;
  margin:0;
}

* html div.leftcol {
  margin-right:-3px;
}

* html div.rightcol {
  margin-left:-3px;
}

/* Form styles */
form {
	padding: 2%;
	font: 85% "Times New Roman", Georgia, Times, serif;
	background-color:#CD7677;
}
fieldset {
	margin: 0 0;
	padding: 15px 10px;
	background-color:#CD7677;
	border: 3px double #732121;	
}
legend {
	padding: 2px 5px;
	color: #732121;
	background-color: #CD7677;
	border: 1px solid #732121;
}
label.preField {
	display: block;
	padding: 2px;
	/*margin: 0.4em 4px 0 0;*/
	margin: 0.4em 4px 0 11%;
	font-weight: bold;
}

.button {
  margin-left: 62%;
}

/* Styles for restaurant reviews*/

div.centercol h1.reviews{
  /*width: 15em;*/
  font: 1.0em Geneva, Arial, Helvetica, sans-serif;
  font-style: normal;
  color: #732121;
  text-align: left;
  margin-bottom: 0;
  padding: 0;
}

div.centercol h2.reviews{
  color: #732121;
  font: 70% Geneva, Arial, Helvetica, sans-serif;
  font-style: italic;
  text-align: left;
  margin-top: 0;
  margin-bottom: 0.3em;
  padding: 0;
}


div.centercol p.reviews{
  color: black;
  font: 90% "Times New Roman", Georgia, Times, serif;
  margin-top: .2em;
  margin-bottom: .3em;
  margin-left: 0;
  margine-right: 0;
}

div.centercol li.reviews{
  color: black;
  font: 90% "Times New Roman", Georgia, Times, serif;
  margin-top: .2em;
  margin-bottom: .3em;
  margin-left: 0;
  margine-right: 0;
}

/* The hover effects for dark background h3 element */
div.centercol a.lighter:link{
  color: #CD7671;;
  text-decoration: underline;
}

div.centercol a.lighter:visited{
  color: #CD7677;
  text-decoration: underline;
  margin: 0;
}

div.centercol a.lighter:hover{
  color: #FFCCFF;
  text-decoration: underline overline;
  margin: 0;
}

div.centercol div.drive {
  position: relative;
  float: right;
}