/* Start of CMSMS style sheet 'fivespice-common' */
/* COLOR KEY
------------------ */
/* color: #413231; /*BROWN*/	 
/* color: #6b5959; /*MUAVE*/	 
/* color: #b5aea0; /*GREY*/ 	 		 
/* color: #a74b33; /*ORANGE*/		 
 

/* ##########################################
		                HTML ELEMENTS
   ########################################## */
   

/* IE PNG Fix
------------------- */
BODY, H1, DIV { behavior: url(http://www.fivespicerestaurant.com/images/layout/iepngfix.htc) }
   

BODY{
	text-align:center; 
	background-color: #000;	
	font-family:Arial,Helvetica,sans-serif; 
} 
H2{ 
	font-size: 35px; 
	margin: 20px 0 10px 0;
	padding: 0; 
	font-family: "trebuchet MS", verdana;
	letter-spacing: 0.07em;
	font-weight: 100;
} 
H3{ 
	font-size: 30px; 
	font-family: "trebuchet MS", verdana;
	font-variant:small-caps;
	color: #a74b33;   
}  

IMG {border: 0px;}


/* #########################################
		                PAGE STRUCTURE
   ######################################### */
   

/* WRAP
----------------------- */

#Pg-Wrap{
	/*border: 1px solid red; /*SWITCH*/ 
	background: url(http://fivespicerestaurant.com/images/layout/pg-bg-wine.jpg) top left no-repeat; 
    background-color: #000;
	text-align: left;
	/*width: 780px;*/
	width: 950px;
	margin: 0 auto; 
	border: 1px solid #6b5959; /*MUAVE*/
	background-color: #000;
}


/* HEADER
----------------------- */
#Pg-Header{
	/*border: 1px solid red; /*SWITCH*/ 
	background: url(http://fivespicerestaurant.com/images/layout/leftcol-bg-transparency.png) repeat-y; 
	position: relative; 
	height: 173px;
}
/* The H1 is the absolutely positioned main-logo with the text hidden */
#Pg-Header H1{ 
	background: url(http://fivespicerestaurant.com/images/layout/fivespice-restaraunt-wine-bar.png) top right no-repeat;
	position: absolute;
	top: 12px;
	left: 84px;
	width: 174px;
	height: 188px;  
	font-size: 1px;
	line-height: 1px; 
}  
#Pg-Header H1 SPAN{  
	margin-left: -3000000px; 
}
 

/* NAV BAR
----------------------- */
#Pg-NavBar{
	/*border: 1px solid red; /*SWITCH*/ 
	background-color: #413231; /*BROWN*/
	text-align:right;	
	height: 32px; 
        padding-left: 282px;
} 


/* COLS WRAP 
(holds the faux cols bg)
----------------------- */
DIV#Pg-ColsWrap{
	/*border: 1px solid red; /*SWITCH*/ 
	background: url(http://fivespicerestaurant.com/images/layout/bg-faux-cols-dark.png)  repeat-y; 
	height: 100%;
}
BODY#Home DIV#Pg-ColsWrap{
	/*border: 1px solid red; /*SWITCH*/ 
	background: url(http://fivespicerestaurant.com/images/layout/bg-faux-cols-light.png)  repeat-y; 
}


/* LEFT COLUMN
----------------------- */
#Pg-LeftCol{
	/*border: 1px solid red; /*SWITCH*/ 
	width: 188px;
	padding: 5px 17px 10px 78px;
	float: left;
	color: #6b5959; /*MUAVE*/	
	font-size: 13px;
	letter-spacing: .07em; 
	line-height: 1.5em; 
	min-height: 479px;
	overflow: hidden; 
} 
#Pg-LeftCol STRONG{
	color: #a74b33;
}
#Pg-LeftCol IMG#HappyHour{
	margin: 15px 0 15px 2px;
} 

#Pg-LeftCol A{ 
	color: #a74b33; /*ORANGE*/
}


/* MAIN COLUMN
----------------------- */
#Pg-MainCol{  
	/*border: 1px solid red; /*SWITCH*/    
	width: 580px;
	margin: 0 30px 0 30px;
	padding: 10px; 
	float: right;
	position: relative;
	color: #fff;  
} 
#Pg-MainCol A{
	color: #fff;  
}


/* Footer
------------------------------ */
#Pg-Footer{ 
	/*border: 1px solid red; /*SWITCH*/ 
	color: #6b5959; /*MUAVE*/
	font-size: 11px; 
	text-align: left; 
	width: 950px;
	margin: 0 auto;  
	height: 100px;
}
#Pg-Footer STRONG{
	color: #a74b33; /*ORANGE*/	
}  
#Pg-Footer P{
	float:left; 
}
#Pg-Footer A{
	color: #6b5959; /*MUAVE*/
}
#Pg-Footer A:HOVER{
	color: #999; 
}	
#Pg-Footer P#Footer-Address{
	/*border: 1px solid red; /*SWITCH*/ 
	width: 316px;
} 
#Pg-Footer P#Footer-Hours{
	/*border: 1px solid red; /*SWITCH*/ 
       width: 316px; 
} 
#Pg-Footer P#Footer-Join{
	/*border: 1px solid red; /*SWITCH*/
	background-repeat:repeat-y;
    width: 316px; 
} 
#Pg-Footer P#Footer-Fish{
	/*border: 1px solid red; /*SWITCH*/ 
	clear:both;
	width: 948px;
	text-align: right;
    font-size:smaller;
    margin-top:10px;
}  
#Pg-Footer P#Footer-Fish A{
     color: #333;
     text-decoration: none;
}
#Pg-Footer P#Footer-Fish A:HOVER{
     color: #999;
}
.hreview{
       color: #333333;
       font-size:smaller;
       margin-top:10px;
} 

/* Badges
------------------------------ */

div.badges { 
	/*border: 1px solid #333; /*SWITCH*/ 
	text-align: center; 
	width: 950px;
	margin: 20px auto 100px;  
	padding-left: 100px;
}

/* ##########################################
		            THE TWO LAYOUTS
    ########################################## */


/* 1. SINGLE COL LAYOUT
-----------------------*/
BODY.layout-singleCol DIV#Pg-MainCol{ 
	width: 820px;
	margin: 0 20px 0 0;
	padding: 0 20px 10px 20px; 
	float: right;
	position: relative;
	color: #6b5959; /*MUAVE*/ 
} 
BODY.layout-singleCol DIV#Pg-ColsWrap { 
	/*border: 1px solid red; /*SWITCH*/ 
	background: url(http://fivespicerestaurant.com/images/layout/bg-faux-cols-light-single-col.png); 
} 

BODY.layout-singleCol IMG#RandomMast{
	border: 1px solid #bbb; 
	width: 818px; 
	xheight: 297px; /* to ratio */
	xheight: 250px; /* to squish */
}


/* 2. DUAL COL LAYOUT
----------------------*/

BODY.layout-dualCol H2{ 
	/*color: #a74b33; ORANGE*/	
	color: #b5aea0; /*GREY*/ 
} 
BODY.layout-dualCol #Pg-MainCol P{  	
	color: #eee; 
} 
BODY.layout-dualCol IMG#RandomMast{
	border: 1px solid #bbb;
	width: 590px; 
}


/* ##########################################
		                   PAGE SPECIFIC
   ########################################## */
   
/* PG PORTLAND-PICKS
----------------------- */

BODY#portland-picks #Pg-MainCol h2:first-child{ 
  display:none
}

/* PG KXL VISITORS */

BODY#kxl-visitors #Pg-MainCol h2:first-child{ 
  display:none
}


/* PG HOME
 ---------- */
BODY#home H2{ 
	display: none;
} 
/* ...the movie */
BODY#home #MovieWrap{
	/*border: 1px solid red; /*SWITCH*/ 
	padding: 10px;
	background-color: #999;
	background: url(http://fivespicerestaurant.com/images/layout/any-bg-halfblack.png);  
	width: 400px;
}
BODY#home #MovieWrap IMG{
	border: 4px solid #413231; /*BROWN*/ 
} 
BODY#home H3{  
	color: #eee;
	   
} 
BODY#home DIV#FlashWrap{
	border: 10px solid #413231;
        margin-top: 40px;
	width: 552px; 
	height: 353px;
}

 
/* FOOD
------------- */ 

P.food{ 
  /*border: 1px solid red; /*SWITCH*/ 
  margin: 30px 10px 30px 50px;
  color: #888;
  position: relative; 
  font-size: 20px;
}
P.food SPAN.food-name{
  display: block; 
  font-weight: bold;
  color: #3a3015;
  margin: 0 0 5px 0;
}
P.food SPAN.food-name A{
  color: #3a3015 !important;
  text-decoration: none;
}
P.food SPAN.food-about{
	color: #6c573b;
	display:block;
	margin:  0 70px 0 0;
}
P.food SPAN.food-price{
  display: block;
  text-align: right; 
  position: absolute;
  top: 0;
  right: 0;
}


/* ###############################################
		                               MISC
   ############################################### */

STRONG.perfectPairing{
	/*border: 1px solid red; /*SWITCH*/ 
	display: block; 
	margin: -20px 100px 30px 25px;
	/*color: #a74b33;*/
	font-size: 25px;
}


IMG#Map{
	width: 590px; 
}


/* SIDELINES 
------------------------------- 
An attempt at making a reusable 
line-through look for headers.
The code looks like this:
	
		<h1 class='sideLines'> 
			<hr class='leftLine'/> 
			<span>MyHeaderText</span>
			<hr class='leftLine'/>
		</h1>

Note: JM Downsized these while working on page page titles.  Will restore once they are fleshed out.
------------------------------- */
.sideLines{  
		/*border: 1px solid red; /*SWITCH*/ 
		position: relative;
		text-align: center;  
} 
.sideLines SPAN{     
		/*border: 1px solid red; /*SWITCH*/    
} 
.sideLines HR.leftLine { 
	position: absolute; 
	top: 50%; 
	left: 0; 
	width: 10%; 
	margin-top: -1px	
}
.sideLines HR.rightLine {
	position: absolute; 
	top: 50%; 
	right: 0; 
	width: 10%; 
	margin-top: -1px
}

/* WHATS NEW */

BODY.layout-dualCol DIV#WhatsNewWrap, 
BODY.layout-dualCol DIV#WhatsNewWrap P {
  color:#6B5959;
  background-color: #c9c9c9;
} 
 

/* ##############################################
		               HACKS & WORKAROUNDS
################################################ */
   


/*  Read about this clear fix:  http://www.positioniseverything.net/easyclearing.html  */
.cf:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
} 
<!--[if IE]> 
  .cf {
	zoom: 1;     /* triggers hasLayout */
	}  /* Only IE can see inside the conditional comment
	and read this CSS rule. Don't ever use a normal HTML
	comment inside the CC or it will close prematurely. */ 
<![endif]-->
/* End of 'fivespice-common' */