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

/**********************************************************************************************/
/*======================   BASIC STYLES FOR EVERY PAGE   =====================================*/
/**********************************************************************************************/
html{
	margin:0;
    padding:0;
	background-color:#000000;
}
p {
	font-family:Verdana, Geneva, sans-serif;
	font-size:14px;
	}
	
.Quote{
	font-size:12px;
	font-style:italic;
	}
.bold {
	font-weight:bold;
	}
/* -----------------------------MAIN BACKGROUND DIV ----------------------------*/


#MainDiv {
	width:1023px;
	background-image:url(images/agged-seamless-paper-texture-pattern.jpg);
	margin:0;
	
	}
	
/* -----------------------------Page Class Marker ----------------------------*/
	
#Home1 #NAVIGATION #home {background-position:0px -37px;}       /*   active   */

#Resturant1 #NAVIGATION #theRestaurant {background-position:0px -37px;}       /*   active   */

#Menu1 #NAVIGATION #menu {background-position:0px -37px;}       /*   active   */
	
#Hours1 #NAVIGATION #hours {background-position:0px -37px;}       /*   active   */
	
#Page4_1 .page{background-position:0px -37px;}/*   active   */
	
#History1 .history{background-position:0px -37px;}/*   active   */
	
#Charity1 .charity{background-position:0px -37px;}/*   active   */
		
#Hours2 .hours{background-position:0px -37px;}/*   active   */
#Hours2  .map{background-position:0px -37px;}/*   active   */		

#Menu1 .history{background-position:0px -37px;}/*   active   */

#Gourmet2 .GourmetToGo {background-position:0px -37px;}       /*   active   */
	


/* -----------------------------Header Container DIV ----------------------------*/
#Header{
	background-color:#000;
	text-align:center;
	margin-left:270px;
	background-repeat:no-repeat;
	margin:0px auto;
	width:1023px;
	height:118px;
	} 

.HeaderContainer{
	}
/* -----------------------------logo Container DIV ----------------------------*/	
#Logo {
	height:118px;
	width:270px;
	position:relative;
	z-index:5;
	float:left;
	background-color:#000;
	background-image:url(images/HEADER_logo_270x118.png);
	}

/* -----------------------------logo and phone ul  ----------------------------*/	
#RestAndPhone{
	float: right;
	list-style-type: none;
	display: block;
	display: inline;
	vertical-align:top;
	margin-top:0px;
	}
	
#RestAndPhone li	{
	display:inline;
}

#GioScript  {
	margin-right:100px;
	}
	
/* -----------------------------NAVIGATION UL ----------------------------
___________________________________________________________________________*/
#NAVIGATION{
	text-align:left;
	text-indent:none;
		margin-top:-58px;
		margin-left:135px;
		display:inline-block;
	/*margin:-10px 0 0 178px;*/
	
	
		}
	
	

#NAVIGATION li	{
	
	float: left;
	display:inline; 
	overflow: hidden;
	
	padding: 0;
    list-style-type: none;
	border:0;
	/*margin-top:-58px;*/
	
	/*background-color:#0e1d0c;*/	
	}
/*  ----------------this piece is what makes anchors clickable.--------------------*/	
#NAVIGATION a {
	/*width: 327px;*/
	height: 36px;	
  	display: block;
  	text-indent: -900%;
  	outline: none;
}	


#home{
	height:36px;
	width:327px;
	display: block;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/NAV_Main_home_327x73.jpg);
	text-indent:-900%;
	

	}
#theRestaurant{
	height:36px;
	width:221px;
	display: block;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/NAV_Main_REST_221x73.jpg);
	text-indent:-999999px;
	

	}
	
#menu{
	height:36px;
	width:124px;
	display: block;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/NAV_Main_menu_124x73.jpg);
	text-indent:-999999px;
	
	}
	

	
#hours{
	height:36px;
	width:176px;
	display: block;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/NAV_Main_Hours_176x73.jpg);
	text-indent:-999999px;

	}
/*===============================================  Hover states*/	
#home:hover{
	background-position:0px -37px;
	
	}
#theRestaurant:hover{
	background-position:0px -37px;
	
	}	
#menu:hover{
	background-position:0px -37px;
	
	}
#hours:hover{
	background-position:0px -37px;
	
	}
	
/* ----------------END--------NAVIGATION UL --------------END------------
___________________________________________________________________________*/
	
/*Sub navigation classes for page Templates*/
/*_____________________________________________*/		
	
.subNav{
	
	text-align:left;
	text-indent:none;
	margin:-20px 0 0 -40px;
	background-color:#0D1C0A;
	}
		
	
.subNav	ul li{
	float: left;
	display: inline;
	display:block; 
	overflow: hidden;
	margin:0px;
	padding: 0;
    list-style-type: none;
	background-color:#0D1C0A;	
	}
	
	
/*  ----------------this piece is what makes anchors clickable.--------------------*/	
.subNav a {
	/*width: 327px;*/
	height: 37px;	
  	display: block;
  	text-indent: -900%;
  	outline: none;
}	
	
.hours{
	height:37px;
	width:274px;
	display:block;
	overflow: hidden;
	background-position: 0px 0px;
	background:url(images/hours_subNav.jpg);
	text-indent:-999999px;
	}	
.map{
	height:37px;
	width:103px;
	overflow: hidden;
	background-position: 0px 0px;
	background:url(images/map_subNav.jpg);
	text-indent:-999999px;
	}	
.page{
	height:37px;
	width:139px;
	overflow: hidden;
	background-position: 0px 0px;
	background:url(images/page_subNav.jpg);
	text-indent:-999999px;
	}
.history{
	height:37px;
	width:149px;
	overflow: hidden;
	background-position: 0px 0px;
	background:url(images/history_subNav.jpg);
	text-indent:-999999px;
	}
.charity{
	height:37px;
	width:357px;
	overflow: hidden;
	background-position: 0px 0px;
	background:url(images/charity_subNav.jpg);
	text-indent:-999999px;
	}
	
/*___________________________________________________________________________*/
	
/*Sub navigation 2 classes for page Templates*/
/*_____________________________________________*/		
	
.subNav2{
	text-align:left;
	text-indent:none;
	margin:-16px 0 0 -40px;
	background-color:#0D1C0A;
	}
		
	
.subNav2	ul li{
	float: left;
	display: inline;
	display:block; 
	overflow: hidden;
	margin:0px;
	padding: 0;
    list-style-type: none;
	background-color:#0D1C0A;	
	}
	
	
/*  ----------------this piece is what makes anchors clickable.--------------------*/	


	
.subNav2 a {
	/*width: 327px;*/
	height: 36px;	
  	display: block;
  	text-indent: -900%;
  	outline: none;
}	
	
.PdfMenu{
	height:36px;
	width:361px;
	display:block;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/SUBNAV_MENU2_PDF_361x72.png);
	text-indent:-999999px;
	}	
.GourmetToGo{
	height:36px;
	width:274px;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/SUBNAV_MENU_gormToGo_274x72.png);
	text-indent:-999999px;
	}	
.BlankMenu{
	height:36px;
	width:388px;
	overflow: hidden;
	background-position: 0px 0px;
	background: url(images/SUBNAV_MENU_Blank_389x72.png)
	text-indent:-999999px;
	}		
	
.hours:hover{
	background-position:0px -37px;
	}	
.map:hover{
	background-position:0px -37px;
	}	
.page:hover{
	background-position:0px -37px;
	}	
.history:hover{
	background-position:0px -37px;
	}	
.charity:hover{
	background-position:0px -37px;
	}
				
.PdfMenu:hover{background-position:0px -37px;
	}
.GourmetToGo:hover{background-position:0px -37px;
	}
		
/*Sub navigation classes for page Templates*/	













/* -----------------------------header wood trim DIV ----------------------------*/		
#WoodTop{
	height:34px;
	margin-top:-22px;
	background-image: url(images/HEADER_wood_grapevine.jpg);
	background-repeat:repeat-x;
	position:relative;
	z-index:4;
	}
	
	
/*Container class for page Templates */
.containerDiv{
	
	max-width:1023px;
	height:700px;
	text-align:left;
	margin: 0px auto;
	background-color:#ffffff;
	background:url(images/agged-seamless-paper-texture-pattern.jpg);	
	}
	
/*Container class for page Templates*/	

/*Left and Right Coulmns for page Templates */	
	
.leftColumn{
	float:left;
	background:url(images/BACKGROUND_SideGraphicsTop_153x140.png);
	width:511px;
	/*height:700px;*/
	background-repeat:no-repeat;
	background-position:left top;
	margin-top:0px;
	position:relative;
	z-index:100;
	}
.LeftColumnBody{
	margin-left:115px;
	margin-top:-30px;
	}
	
.colHead_L{
	margin-left:60px;
	margin-top:-602px;
	}
.colHead_LR{
	margin-left:60px;
	margin-top:20px;
	}
	

	
.leftColumnPics{
	margin-right:70px;
	}
	
.LeftColumnImageTop{
	margin-top:-95px;
	margin-left: 125px;
	}
		
.rightColumn{
	float:right;
	background:url(images/BACKGROUND_SideGraphicsTop_R_153x140.png);
	width:511px;
	/*height:800px;*/
	background-repeat:no-repeat;
	background-position:right top;
	margin-top:5px;
	position:relative;
	}
	
.rightcolumnBody{
	margin-left:25px;
	margin-right:25px;	
	}	
	
.colHead_R{
	/*margin-left:60px;*/
	margin-top:10px;
	}
	
/*_______________specific columns per page___________*/
	
#HomeLeft	{
	width:672px;
	margin-top:10px;
	}
	

#HomeRight	{
	width:341px;
	margin-top:17px;
	}

#HomeImageTop {
	margin-top:100px;
	text-align:center;
	}
	
#gioV{
	height:480px;
	width:168px;
	background: url(images/Giovanni_168x480.png);
	background-repeat:no-repeat;
	margin-left:0px;
	margin-top:150px;
	position:relative;
	z-index:-10;
	}
/*===============================
   restaurant
_______________________________	*/

#restaurantContainer{
	height:800px;
	}


#RestaurantLeft{
	
	}

#Family{
	margin-left:450px;
	}
#RestaurantImageTop{
	}
	
#francisSubHead{
	margin-bottom:5px;
	}
	
#famiglia_Body{
	margin-left:60px;
	
	}
	
#RestaurantImageTopR{
	margin-top:10px;
	text-align:center;
	}
		
.clearFix{
	clear:both;
	}

/*===============================
   Hours and Map
_______________________________	*/

#HoursContainer{
	height:1000px;
	}

#attireSubHead{
	margin-bottom:5px;
	margin-left:50px;
	}

#amenitiesSubHead{
	margin-bottom:0px;
	margin-left:150px;
	}

.RoomDescription{
	list-style:none; display:inline-block; float:left; margin-bottom:0px;
	}
.RoomImage{
	float:left;
	margin-right:10px;
	}
.RoomText{
	margin-top:0px;
	}
	
/*===============================
   History
_______________________________	*/	
	
#HistoryContainer{
	height:750px;
	}

/*#HistoryLeft{
	margin-left:0px;
	}*/


#storia_Body{
	margin-top:-20px;
	margin-left:20px;
	}	
	
#HistoryContainer p{
	font-size:12px;
	}	
#HistoryImageTop{
	margin-top:-105px;
	margin-bottom:-10px;
	margin-left:20px;
	}
	
#HistoryRightColumnBody{
	margin-top:100px;
	}	
/*===============================
   Charity
_______________________________	*/	
	
#CharityContainer{
	height:720px;
	}	
#Charity{
	margin-left:450px;
	}
	
#CharityLeft {}

#CharityImageTop{
	margin-top:-110px;
	}
	
#Charity_Body{
	margin-left:60px;
	
	}	
#CharityP{
	margin-top:-10px;
	}	

/*===============================
   Page4
_______________________________	*/	

#Page4Container{
	height:1380px;
	}
#Page4{
	margin-left:450px;
	}

#Page4ImageTop{
	margin-top:-110px;
	}
	
#rightTopPage4{
	margin-top:125px;
	}
	
#Page4_Body{
	margin-left:60px;
}
#Page4_RightImage1{
	text-align:center;
	}
	
#Page4SubHead{
	margin-left:225px;
	
	}
#Page4_celebSeatingChart{
	margin-left:-20px;
	}
#Page4_Right_CelebChart{
	margin-top:175px;
	margin-left:-50px;
	}
.RedHead{
	font-size:16px;
	color:#F00;
	}
	
/*===============================
   Menu
_______________________________	*/
		
#MenuContainer{
	height:975px;
	}		
		
		
/*large div container for the hand made pasta section*/
#Menu_HandMade{  
	margin-top:0px;
	margin-bottom:-10px;
	margin-left:0px;
	
	}	
#mangiare{
	margin-left:25px;
	
	}
#mangiare_Body{
	margin-top:0px;
	margin-left:20px;
	}
.Menu_p1{
	width:550px;
	margin-left:80px;
	margin-top:-20px;
	}

.Menu_p2{
	width:550px;
	margin-left:-120px;
	margin-top:20px;
	}


	
#MenuRightColumnBody{
	margin-top:240px;
	}	
	
	
.food1{
	margin-left:20px;
	margin-top:60px;
	}		
	
.food2{
	margin-left:75px;
	margin-top:20px;
	}
	
.food3{
	margin-left:150px;
	margin-top:30px;
	}	
.food4{
	margin-left:-165px;
	margin-top:-40px;
	}
	
.food5{
	margin-left:170px;
	margin-top:-135px;
	}
	
/*===============================
   Menu
_______________________________	*/


#GourmetContainer{
	height:750px;
	}	

.Gourmet_p1{
	width:800px;
	margin-left:100px;
	margin-top:-20px;
	}
	
#GourmetRightColumnBody{
	margin-top:340px;
	}	



.Gourmet_p2{
	width:550px;
	margin-left:-120px;
	margin-top:100px;
	}
/* -----------------------------Empty DIV ----------------------------*/
.emptyDiv {
	height:100px;
	padding:0 0 20 0;
	width::1023px;
	
	display:block;
	}

													
/* -----------------------------Footer DIV ----------------------------*/		
	
#Footer{
	height:54px;
	background-color:#0e1d0c;
	
	}
/* -----------------------------Footer wood trim DIV ----------------------------*/		
#FooterWoodTrim{
	height:34px;
	margin-top:-40px;
	background-image: url(images/FOOTER__wood_rail.jpg);
	background-repeat:repeat-x;
	position:relative;
	z-index:4;
	}
#footerContent{
	display:inline-block;
	width:1023px;
	}

	
#address{
	margin: 0px auto;
	text-align:center;
	margin-top:-17px;
	/*margin-top:-10px;*/
	
	}

/*================================================
		Social icons
----------------------------------------------------*/

#socialIcons{
	float:right;
	margin-left:25px;
	margin-top:-50px;
	margin-right:30px;
	margin-bottom:0px;
	}
	#social-test {
		display: table-cell;
		
		vertical-align: middle;
		text-align: center;
		font-size: 25px;
	}
	.center {
		display: table;
		float:right;
		margin-top:-60px;
		width: 200px;
		/*height: 100vh;*/
	  }
	.social {
		padding-left: 10px;
	
	  }	
	  .social li {
		
		list-style-type: none;
		display: inline-block;
		width: 25px;
		height: 25px;
		line-height: 30px;
		padding: 1%;
		border: 1px solid rgba(167, 146, 129, 0.4);
		cursor: pointer;
		margin-left: 10px;
		margin-bottom: 20px;
		transition: ease .3s;

		/* cm -  won't work - you're not using sass here */

		&:hover {
		  color: rgba(167, 146, 129, 1);
		  border: 1px solid rgba(167, 146, 129, 1);
		}
		/* end won't work */
	  }
	}
	/* cm - won't work because you dont' have a class in the html ".scoLI" */
	.socLI:hover {
		opacity: 0.5;
		}
	/* end won't work */
		
	
	  /*.social:hover > .social li:hover {
		opacity: 1;
	  }	*/
	/*Notes
	
	<a href="tel:1-847-555-5555">1-847-555-5555</a>
	
	*/

	/* cm - fix */
	ul.social li a i,
	ul.social li a:visited i
	{
		/* moved the color here */
		color: rgba(167, 146, 129, 0.6);
	}

	ul.social li a:hover i
	{
		opacity: 0.5;
	}