/* ---------------------------------------------------------------- **
** Generic
** ---------------------------------------------------------------- */
html, body { height: 100%; }
html { font-size: 76%; }
body {
	background: #fff;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 1.3em;
	line-height: 1.5em;
	color: #000;
	text-align: center;
	margin: 0;
	padding: 0;
	}

/* headers */
h2, h3, h4, h5, h6 { 
	color: #6F0511; 
	margin: 0; 
	font-weight: normal;
	font-family: Arial, Helvetica, sans-serif; letter-spacing: -1px;
	}
h2 {
	font-size: 1em;
	margin: 40px 0 20px;
}
h3 { font-size: 1.6em; margin: 30px 0 15px; }
h4 { font-size: 1.4em; margin: 20px 0 10px; }
h5 { font-size: 1.2em; margin: 20px 0 5px; }	
h6 { font-size: 1em; margin: 20px 0 0; }

/* text */
p { margin: 15px 0; height: 1%; }
p:after { content: "."; clear: both; display: block; height: 0; visibility: hidden; font-size: 0; }
acronym { cursor: help; }
pre, code, blockquote { 
	margin: 15px 0; 
	padding: 15px; 
	display: block; 
	background: #fff url(../img/grey_grad_.jpg) repeat-x 0 -130px; 
	color: #666;
	background-color: #eee; 
	}
blockquote { 
	font-family: Arial, Helvetica, sans-serif;
	padding: 1px 15px 1px 15px;
	background-color: #ff9;
	min-height: 60px; 
	font-style: italic;
	}
* html blockquote { height: 60px; }	

/* links */
a { text-decoration: underline; color: #268EB0; outline: none; }
a:hover { text-decoration: none; }

/* images */
img { border: 5px solid #fff; padding: 1px; background-color: #fff; margin-bottom: 15px; }	
a img { }
a:hover img { border-color: #ff9; }
span.right img,
img.right { margin-left: 30px; }
span.left img,
img.left { margin-right: 30px; }

/* lists */
ul, ol, dl { margin: 15px 0 15px 20px; padding: 0; }
ul { list-style-type: disc; }
ul ul, ol ol { margin-top: 0; margin-bottom: 0; }
ol { margin-left: 25px; }
li { color: #1D6983; }
li span { color: #666; }

/* tables */
table { margin: 15px 0; border: 1px solid #ddd; border-collapse: collapse; }
table th, 
table td { padding: 10px 15px; text-align: left; }
table thead th { 
	font-family: Arial, Helvetica, sans-serif; 
	background-color: #1D6983; 
	color: #fff; 
	font-weight: normal; 
	font-size: 1.1em;
	border: 1px solid #1D6983;
	}
table tbody th { background-color: #DCEFEA; }
table tbody th, 
table tbody td { border-top: 1px solid #ddd; }
table tfoot { display: none; }

/* forms */
form { background-color: #DCEFEA; padding: 0px;  margin: 25px 0; }
form fieldset { border: 0; padding: 10px 25px 25px 10px; margin: 0; margin-bottom: 10px; }
form fieldset legend { display: none; }
form p { height: 1%; }
form p:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
.lessbottom {padding-bottom: 0px;}
form p label {  
	font-size: 1em; 
	color: #000; 
	float: left; 
	display: block; 
	width: 30%; 
	margin-right: 20px; 
	font-family: Arial, Helvetica, sans-serif; }
form p input,
form p select,
form p textarea { 
	font-size: 1em; 
	color: #000; 
	border: 2px solid #fff; 
	padding: 8px; 
	background-color: #fff; 
	width: 55%; 
	font-family: Tahoma, Arial, Helvetica, sans-serif; 
	}
form p select { width: 57.5%; }
form ul.fieldlist { margin: -30px 0 10px 33%; padding: 0; list-style-type: none; }
form ul.fieldlist li { color: #666; padding: 0 30px 5px 0; white-space: nowrap; }
form input.btn,
a.btn { 
	width: auto; 
	overflow: visible;
	border: 0;
	background: #1D6983 url(../img/nav_on_.png) repeat-x; 
	padding: 8px 15px;
	cursor: pointer; 
	color: #fff;
	text-decoration: none;  
	font-weight: bold;
	white-space: nowrap;
	display: inline-block;
	}
a.btn {  }		
a.btn:hover { }	

/* horizontal rule */
hr { clear: both; border: 0; height: 1px; background-color: #ddd; color: #ddd; margin: 30px 0 0; }

/* classes */
.left { float: left; }
.right {float: right; }
.hide { display: none; }
small.caption { 
	padding-left: 15px; 
	background: url(../img/arrow_blue.png) no-repeat 0 5px; 
	color: #666;
	font-weight: bold;
	font-size: 0.75em;
	line-height: 1.5em;
	margin-top: -5px;
	display: block;
	}
.arrow-white {
	background: url(../img/arrow_white.png) no-repeat right center;
	padding-right: 25px;
	display: inline-block;
	}	

/* list of links */
ul.links { list-style-type: none; margin-left: 0; }
ul.links li { margin: 5px 0; }

/* list of images */
ul.images { margin-left: -29px; margin-bottom: -14px; padding: 15px 0 0; list-style-type: none; height: 1%; width: 104%; }
ul.images:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; }
ul.images li { float: left; margin: 0; padding: 0 0 29px 29px; }
ul.images li img { vertical-align: bottom; }

/* highligh box */
.highlight { 
	background-color: #fff;
	padding: 5px 10px;
	color: #1D6983;
	font-size: 1.2em;
	height: 1%;
	}
.highlight:after {	
	content: ".";
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	visibility: hidden;
	}
	
.highlight .btn { padding: 10px 20px; margin: 0; }
div.highlight { padding: 5px 20px; margin: 15px 0; }

/* columns */
ul.cols { margin: 15px 0 25px -40px; padding: 0; list-style-type: none; width: 105%; height: 1%; }
ul.cols:after { content: "."; clear: both; display: block; visibility: hidden; height: 0; }
ul.cols li { padding-left: 40px; float: left; color: #666; }
ul.two li { width: 43.5%; }
ul.three li { width: 28%; }

ul.cols li li { float: none; width: auto; padding-left: 0; color: #97BD1B; } 

/*------------------------------------------------------------*
**  Container
**------------------------------------------------------------*/
#container {
	min-height: 100%;
	height: auto !important;
	height: 100%;
	background: #fff /* #092C3C */;
	}

/*------------------------------------------------------------*
**  Header
**------------------------------------------------------------*/
#top {width: 100%; background-color: #fff; margin-top: 20px; margin-bottom: 10px;}
#header {width: 740px; height: 117px; margin: 0 auto; text-align: left; padding: 0; background-color:#fff; }
#header:after {
	content: ".";
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	font-size: 0;
	}

/* Logo */
/* #header h1 { 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 2.7em;
	font-weight: normal;
	color: #E7F5FA;
	margin: 0;
	letter-spacing: -1px;
	line-height: 1em;
	float: left;
	}
#header h1 a { text-decoration: none; color: #E7F5FA; }
#header h1 a:hover { text-decoration: none; }
#header h1 span { color: #2FA0C6; } */

/* if you would like to replace the logo with 
an image, comment out the above logo code and
uncomment the following */

#header h1 {
	background: url(../img/monte-alegre-logo360x117.jpg) no-repeat top left;
	width: 360px;
	height: 117px;	
	margin: 0;
	padding: 0;
	float: left;
	}	
#header h1 a {
	display: block;
	height: 100%;
	text-indent: -9999px;
	outline: none;
	}
	

#header p{
	font-family: Arial, Helvetica, sans-serif; 
	font-weight: normal;
	float: right;
	font-size: 15px;
	line-height: normal;
	color: #6F0511;
	width: 380px;
	text-align: right;
	margin: 0; padding: 0;
	margin-top: 95px;
	font-style: italic;
	}


/*------------------------------------------------------------*
**  Navigation
**------------------------------------------------------------*/
#nav { margin-top: 10px;width: 840px; background: #1d6983;/* url(../img/nav.png); */ }
#nav ul {
	margin: 0 auto;
	padding: 0 0 0 1px;
	list-style-type: none;
	width: 900px;
	}
#nav ul:after {	
	content: ".";
	clear: both;
	display: block;
	font-size: 0;
	height: 0;
	visibility: hidden;
	}
#nav ul li {	
	float: left;
	padding: 10px 0;
	margin: 0 0 0 -1px;
	}
#nav ul li a { 
	font-weight: bold; 
	text-decoration: none; 
	display: block;
	padding: 6px 0;
	}
* html ul li a { position: relative; width: 1%; white-space: nowrap; }
#nav ul li a span { 		
	color: #fff /* #6F0511 */;
	padding: 0 20px;
	display: block; 
	
	line-height: 1em;
	}
#nav ul li a:hover span { color: #666; }	
	
#nav ul li.on a { background: #1D6983 url(../img/nav_on_.png) repeat-x; }	
#nav ul li.on a span { border: 0; color: #fff; }
#nav ul li.on a:hover span { color: #fff; }

/*------------------------------------------------------------*
**  Body
**------------------------------------------------------------*/	
#body { 
	width: 100%; 
	margin: 0px auto 0 auto; 
	padding: 0em 0 9em; 
	text-align: left;
	background: url(../img/nav_bg_blue.png) top left repeat-x;
	}
img.mainfoto {
	background: #1D6983 /* url(../img/nav.png) repeat */;
	padding: 10px 20px 10px 20px;
	border: 1px solid #eee;
	margin: 0 auto;
}

/* #body a:hover img.mainfoto {background: #1D6983;} */
	
/*------------------------------------------------------------*
**  Footer
**------------------------------------------------------------*/
#footer { 
	background: url(../img/nav_bg_blue.png) bottom left repeat;
	clear: both;
	
 
	}
#footer div {
	width: 740px;
		margin: 0 auto;
	text-align: left;
	font-size: 0.8em;
	padding: 15px 0;
	line-height: 15px;
	}
#footer div:after {
	content: ".";
	clear: both;
	display: block;
	height: 0;
	font-size: 0;
	visibility: hidden;
	}		
	
#footer p { float: left; margin: 0; color: #fff; padding: 0; }
#footer ul {
	float: right;
	padding: 0;
	margin: 0;
	}	
#footer ul li, #footer ul li a { list-style-type: none;margin: 0; padding: 0; color: #fff; }
div#menu{width:550px;margin: 0 auto;
    font:"Trebuchet MS",Arial,sans-serif;text-align:left}
dl{width: 100%;margin: 10px;}
dt,dd.price{background: #FFF;margin: 0;}
dt{float: left;padding-right: 3px;margin: 0;}
dd{margin:0}
dd.price{float: right;color: #AAA}
dd.ingredients{float: left;width: 100%;padding:0;color: #555; font-style:italic; margin-bottom: 15px;}
	
#panels-holder {
	width: 960px;
	margin: 0 auto;
}

/*  Spry Assets */
@charset "UTF-8";

/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */

/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */

/* Horizontal Tabbed Panels
 *
 * The default style for a TabbedPanels widget places all tab buttons
 * (left aligned) above the content panel.
 */

/* This is the selector for the main TabbedPanels container. For our
 * default style, this container does not contribute anything visually,
 * but it is floated left to make sure that any floating or clearing done
 * with any of its child elements are contained completely within the
 * TabbedPanels container, to minimize any impact or undesireable
 * interaction with other floated elements on the page that may be used
 * for layout.
 *
 * If you want to constrain the width of the TabbedPanels widget, set a
 * width on the TabbedPanels container. By default, the TabbedPanels widget
 * expands horizontally to fill up available space.
 *
 * The name of the class ("TabbedPanels") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabbedPanels container.
 */


.TabbedPanels {
	margin: 0px;
	padding: 0px;
	float: left;
	clear: none;
	width: 100%; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
	/* background-color: #1d6983; */
}

/* This is the selector for the TabGroup. The TabGroup container houses
 * all of the tab buttons for each tabbed panel in the widget. This container
 * does not contribute anything visually to the look of the widget for our
 * default style.
 *
 * The name of the class ("TabbedPanelsTabGroup") used in this selector is not
 * necessary to make the widget function. You can use any class name you
 * want to style the TabGroup container.
 */
.TabbedPanelsTabGroup {
	margin: 0px;
	padding: 0px;
	width: 100%;
	background-color: #1d6983;
	
}

/* This is the selector for the TabbedPanelsTab. This container houses
 * the title for the panel. This is also the tab "button" that the user clicks
 * on to activate the corresponding content panel so that it appears on top
 * of the other tabbed panels contained in the widget.
 *
 * For our default style, each tab is positioned relatively 1 pixel down from
 * where it wold normally render. This allows each tab to overlap the content
 * panel that renders below it. Each tab is rendered with a 1 pixel bottom
 * border that has a color that matches the top border of the current content
 * panel. This gives the appearance that the tab is being drawn behind the
 * content panel.
 *
 * The name of the class ("TabbedPanelsTab") used in this selector is not
 * necessary to make the widget function. You can use any class name you want
 * to style this tab container.
 */
.TabbedPanelsTab {
	position: relative;
	top: 1px;
	float: left;
	list-style: none;
	-moz-user-select: none;
	-khtml-user-select: none;
	cursor: pointer;
	/*padding: 20px 20px;
	margin: 0px 1px 0px 0px;
	font: bold 0.7em sans-serif;
	background-color: #DDD;
	background-color: #1d6983; */
	
	/* border-left: solid 1px #CCC;
	border-bottom: solid 1px #999;
	border-top: solid 1px #999;
	border-right: solid 1px #999; */
	padding: 10px 0;
	margin: 0 0 0 -1px;
	color: #fff;
	text-decoration: none;
	font-weight: normal;
	font-size: 1em;
	
}
.TabbedPanelsTab span{
color: #fff /* #6F0511 */;
	padding: 0 20px;
	display: block; 
	border-right: 1px solid #fff;
	line-height: 1em;}
	

/* This selector is an example of how to change the appearnce of a tab button
 * container as the mouse enters it. The class "TabbedPanelsTabHover" is
 * programatically added and removed from the tab element as the mouse enters
 * and exits the container.
 */
.TabbedPanelsTabHover span {
	/* background-color: #CCC; */
	 /*background: #1D6983 url(../img/nav_on_.png) repeat-x;*/
	 /* background-color: #4DB4D7;
	 border-right: 1px solid #fff;
	 border-left: 1px solid #fff; */
}

/* This selector is an example of how to change the appearance of a tab button
 * container after the user has clicked on it to activate a content panel.
 * The class "TabbedPanelsTabSelected" is programatically added and removed
 * from the tab element as the user clicks on the tab button containers in
 * the widget.
 *
 * As mentioned above, for our default style, tab buttons are positioned
 * 1 pixel down from where it would normally render. When the tab button is
 * selected, we change its bottom border to match the background color of the
 * content panel so that it looks like the tab is part of the content panel.
 */
.TabbedPanelsTabSelected span {
	
	text-decoration: none;
	font-size: 1em;
	/* border-right: 1px solid #fff; */
	line-height: 1em;
	color: #6F0511;
	font-weight: normal;
	
	
	
	}

/* This selector is an example of how to make a link inside of a tab button
 * look like normal text. Users may want to use links inside of a tab button
 * so that when it gets focus, the text *inside* the tab button gets a focus
 * ring around it, instead of the focus ring around the entire tab.
 */
.TabbedPanelsTab a {
	color: #fff;
	text-decoration: none;
	
}

/* This is the selector for the ContentGroup. The ContentGroup container houses
 * all of the content panels for each tabbed panel in the widget. For our
 * default style, this container provides the background color and borders that
 * surround the content.
 *
 * The name of the class ("TabbedPanelsContentGroup") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the ContentGroup container.
 */
.TabbedPanelsContentGroup {
	clear: both;
	/*border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
	border-top: solid 1px #000;
	border-right: solid 1px #999;*/
	background-color: #fff;
	padding-top: 20px;
	padding-bottom: 10px;
	margin-top: 60px;
}

/* This is the selector for the Content panel. The Content panel holds the
 * content for a single tabbed panel. For our default style, this container
 * provides some padding, so that the content is not pushed up against the
 * widget borders.
 *
 * The name of the class ("TabbedPanelsContent") used in this selector is
 * not necessary to make the widget function. You can use any class name you
 * want to style the Content container.
 */
.TabbedPanelsContent {
	padding:0 40px 0 40px;
	font-size: 1em;
}
.TabbedPanelsContent h2 {font-size: 1.3em; margin: 0; padding: 0;}


/* This selector is an example of how to change the appearnce of the currently
 * active container panel. The class "TabbedPanelsContentVisible" is
 * programatically added and removed from the content element as the panel
 * is activated/deactivated.
 */
.TabbedPanelsContentVisible {
	
}

/* Vertical Tabbed Panels
 *
 * The following rules override some of the default rules above so that the
 * TabbedPanels widget renders with its tab buttons along the left side of
 * the currently active content panel.
 *
 * With the rules defined below, the only change that will have to be made
 * to switch a horizontal tabbed panels widget to a vertical tabbed panels
 * widget, is to use the "VTabbedPanels" class on the top-level widget
 * container element, instead of "TabbedPanels".
 */

/* This selector floats the TabGroup so that the tab buttons it contains
 * render to the left of the active content panel. A border is drawn around
 * the group container to make it look like a list container.
 */
.VTabbedPanels .TabbedPanelsTabGroup {
	float: left;
	width: 20em;
	height: 20em;
	background-color: #EEE;
	position: relative;
	border-top: solid 1px #999;
	border-right: solid 1px #999;
	border-left: solid 1px #CCC;
	border-bottom: solid 1px #CCC;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTab {
	float: none;
	margin: 0px;
	border-top: none;
	border-left: none;
	border-right: none;
}

/* This selector disables the float property that is placed on each tab button
 * by the default TabbedPanelsTab selector rule above. It also draws a bottom
 * border for the tab. The tab button will get its left and right border from
 * the TabGroup, and its top border from the TabGroup or tab button above it.
 */
.VTabbedPanels .TabbedPanelsTabSelected {
	background-color: #EEE;
	border-bottom: solid 1px #999;
}

/* This selector floats the content panels for the widget so that they
 * render to the right of the tabbed buttons.
 */
.VTabbedPanels .TabbedPanelsContentGroup {
	clear: none;
	float: left;
	padding: 0px;
	width: 30em;
	height: 20em;
}
#body #panels-holder #TabbedPanels1 .TabbedPanelsContentGroup .TabbedPanelsContent TabbedPanelsContentVisible .mainfoto {
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}