﻿/*############################################################################################################*/
/*############################################## GENERAL RULES ###############################################*/
/*############################################################################################################*/
*{
margin: 0;
padding: 0;
font-family: "Helvetica Neue", Helvetica,Arial;
line-height: 1.4em;
}
p {
    margin: 0em 0em 1em 0em;
}
ul {
    margin: 0em 0em 1em 2.5em;
}
html {
    background-color: #fbfdfa;
}
.left_float {
    float: left;
    margin-right: 1em;
}
hr.break {
    width: 85%;
    margin: auto;
    clear: both;
}

/*############################################################################################################*/
/*################################################## HEAD ####################################################*/
/*############################################################################################################*/
header#template_header {
/* background:#D3F1F1 url(http://img.happyherbivore.com/header_layout.jpg) repeat-x scroll left bottom; */
float:left;
height: 101px;

width:100%;
}

header#template_header .header_menu{
float:right;
margin-right:25px;
margin-top:15px;
}

header#template_header .header_menu ul li{
display:block;
float:left;
color:#575757;
}

header#template_header .header_menu ul li a{
color:#575757;
float:left;
font-family:tahoma;
font-size:12px;
margin-top:4px;
padding-left:5px;
padding-right:5px;
}

header#template_header .header_menu ul li a:hover{
text-decoration:none;
}
/* */
header#template_header .logo{
width:367px;
}

header#template_header .logo h1 a{
height: 101px;
overflow: visible;    
background: #fff url(http://img.happyherbivore.com/herbisport/herbisport-logo.png) no-repeat scroll left top; 
display:block;
margin-top: 0px;
padding-left: 5px;
float:left;
clear: none;
text-indent:-9999em;
width:367px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-box-shadow: 0px 2px 5px #333;
    -webkit-box-shadow: rgb(51, 51, 51) 0px 2px 5px;
    box-shadow: 0px 2px 5px #333;
}


/*############################################################################################################*/
/*############################################## NAVIGATOR BAR ###############################################*/
/*############################################################################################################*/
/* Herbisport Blue #2554C7 and HH Green #55a91d, Dark Green from Boots 005F00*/
nav#main{
float:left;
height:41px;
width:100%;
background: #55a91d;

}

nav#main .navigator_content{
margin:auto;
width:960px;

}

nav#main .navigator_content ul{
float:left;
margin-top:0px;

}

nav#main .navigator_content ul li{
display:block;
float:left;

}

nav#main .navigator_content ul li .sub_menu{
    background:#55a91d none repeat scroll 0 0;
    position:absolute;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
 
nav#main .navigator_content ul li .sub_menu ul li{
float:none;

}
 
nav#main .navigator_content ul li .sub_menu ul li a{

}

nav#main .navigator_content ul li a{
color:#FFFFFF;
background: #55a91d;
display:block;
font-size:14pt;
height:32px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
text-decoration:none;
position: relative;
-moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

nav#main .navigator_content ul li a:hover{
    background: #005F00;
    -moz-box-shadow: 0px 2px 15px #333;
    -webkit-box-shadow: rgb(51, 51, 51) 0px 2px 5px;
    box-shadow: 0px 2px 15px #333;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

nav#main .navigator_content ul li a.active{

}

nav#main .navigator_content .search_content{
float:right;
margin-right:14px;
margin-top:14px;
background: #55a91d;
}

/*############################################################################################################*/
/*################################################## BODY ####################################################*/
/*############################################################################################################*/
/* Divine Proportion 593px + 367px = 960px */

/* Common design elements */
.box_shadow {
    -moz-box-shadow: 0px 2px 15px #333;
    -webkit-box-shadow: rgb(51, 51, 51) 0px 2px 5px;
    box-shadow: 0px 2px 15px #333;
}
.round_all_corners {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
time, .headline {
    font-size: .8em;
    line-height: 1.8em;
    color: #888888;
    font-style: italic;    
}
.pad1em {
    padding: 1em 1em;
}
.clear-both {
    clear:both;
}
.dingbat {
    text-align: center;
    font-size: 1.5em;
    clear: none;
}
.magicbuttons {
font-size: 1.5em;
padding: 8px 14px 9px;
background: #2daebf;
display: inline-block;
color: #fff;
text-decoration: none;
font-weight: bold;
line-height: 1;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 3px #999;
-webkit-box-shadow: 0 1px 3px #999;
box-shadow: 0 1px 3px #999;
text-shadow: 0 -1px 1px #222;
border-bottom: 1px solid #222;
position: relative;
cursor: pointer;
}

.float-left {
    float:left;
}
.float-right {
    float:right;
    display: block;
}
#flash_slideshow {
    padding: 6px 0px;
    height: 317px;
}

/* End Common design elements */

div#body_content{
float:left;
width: 100%;
/*  background: #f2f2f2;*/
}

div#body_content .box_body{
margin:auto;
width:960px;
}
div.box_content {
    min-height: 600px;
}

div#body_content .box_body .left_colum{
float:left;
width:578px;
background:#FFFFFF none repeat scroll 0 0;
margin:15px auto auto;
}

div#body_content .box_body .left_colum .blogblurb{
    margin: 2em 0em;
}

div#body_content .box_body .left_colum section{

}

div#body_content .box_body .left_colum h1{
    font-size: 2em;
    margin-bottom: .5em;
    color: #4C4646;
}
div#body_content .box_body .left_colum h2{
    font-size: 1.5em;
    clear: left;
}
div#body_content .box_body .left_colum .icon{
    float: left;
    margin-right: 1em;
}
div#body_content .box_body .left_colum img{

}

div#body_content .box_body .left_colum time{

}

div#body_content .box_body .left_colum p{

}

/* ---------Right Colum CSS--------------------------- */

div#body_content .box_body .right_colum{
float:right;
margin-left:10px;
width:352px;
background:#FFFFFF none repeat scroll 0 0;
margin-top:1em;
}

div#body_content .box_body .right_colum section#ecookbook {
    margin: 1em;
    background: #F0F0F0;
    padding: 1em;
}

div#body_content .box_body .right_colum div#ecookbook h1{
    font-size: 1em;
    text-shadow: 1px 1px 1px #B2CCCC;
}
div#body_content .box_body .right_colum div#ecookbook ul{
    
}
div#body_content .box_body .right_colum div#ecookbook span{
    padding: 2em 0em 0em 0.8em;
    margin: 1em 0em .2em 0em;
}



/* ---------END Right Colum CSS--------------------------- */



/* HH Customizations */

/* links */ 
.headline_area a, .headline_area a:visited{
    font-weight: bold;
    color: #6B6BB3;
    text-decoration:none;
}
.headline_area a:hover {
    font-weight: bold;
}
.faq_area a, .faq_area a:visited,.recipe_area a, .recipe_area a:visited{

}
a, a:active, a:visited {
	font-weight:normal;
	color: #2361A1;
	text-decoration:none;
}
a:hover {
	font-weight:normal;
	color: #2361A1;
	text-decoration:underline;
}
.random  a, .random a:hover{
	color: #000000;
	font-weight:normal;
	line-height: 1.5em;
}
div.twit{
  margin: 2px;
  height: auto;
  width: auto;
  color: #ACA6A6;
  background-color: #EDEDED;
  padding: .6em .6em;
}
div.twit h1 {
  font-size: 1.3em;
  padding-bottom: 0.5em;
}	
div.twit img{
  float: left;
  display: inline;
  margin: 3px;
  border: 1px solid #ffffff;
}
div.twit p.post {
  clear:both;
  font-size: 1em;
}
div.twit p.count {
  font-size: 0.7em;
  color: #4D4D4D;
}
/* end links */
/* Disqus comments */
.disqus_margin {
	margin-bottom:2.5em;
}
/* end Disqus comments */

.menu_content {
    margin: 1em;
    padding-bottom: 1em;
}

.article-block {

  /*  border-width: 1px;
    border-style: solid;
    border-color: #f0f0f0; */
}

.article-block article, .menu_content article{
    margin: 1em 1em 0em 1em;
    background: #ffffff;
    
  /*  border-width: 1px;
    border-style: solid;
    border-color: #f0f0f0; */
}
.article-block article header {
    background: #fff;
    margin-bottom: 1em;
}
.article-block article {
    
}
.title {
    color: #FFFFFF;
    font-size: 2.5em;
    background: #484848; /* #D3EDE5; */
    height: 50px;
    width: 608px;
    position: relative;
    left:-15px;
    top: 10px;
    float: left;
    -moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    -webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
    z-index: 100; /* the stack order: foreground */
}
.title span {
    margin-left: 1em;
}
.triangle-l {
	border-color: transparent #484848 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 45px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-color: transparent transparent transparent #484848;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 578px;
	top: 15px;
	z-index: -1; /* displayed under bubble */


.post-item, .faq-item {
	border-bottom: 1px dotted #BBBBBB;
	margin-bottom: 1.5em;
	padding-bottom: 1em;
}
.headline_area {
}
.post-title {
	font-size:2em;
	line-height:1.364em;
        text-shadow: 2px 2px 2px #B2CCCC;
}


.recipe_name, .faq_name {
	font-size: 1.6em;
	margin: 0px 0px 10px 0px;
}
article.recipe header h1 {
	font-size: 1.5em !important;
	margin: 0px 0px 10px 0px;
}
article.recipe header h2 {
    color: ;
    font-size: .8em;
    margin: 1em 0em;
}
.description_title {
	text-decoration: underline ;
}

.description {
	margin-bottom: 10px;
}

.instructions {
	text-indent:10px;
	margin: 10px;
}
div.faq_area {
    margin-left: 25px;
}
.recipe ul, .faqlinks {
	margin: 0px 0px 0px 25px;	
	padding: 0px 0px 10px 0px;
}
.recipe li, recipe ul {
    margin-left: 10px !important;
    padding-left: 10px !important;
}
.ingredients {
    margin-left: 20px;
    padding: 10px;
}

.comment_rule_header {
	margin: 10px;
	padding: 3px;
}
.comment_rules {
	margin: 10px;
	border: 1px dotted rgb(0, 0, 0); 
	padding: 3px;
}
.crtitle {
	color: #55A91D;
	font-weight: bold;
}
.a404 {
	color: Red;
	font-weight: Bold;
	margin: 20px;
}
.videonow {
	font-size: 1.5em;
	background-color:#FFD700;
	padding: .4em;
}

/*############################################################################################################*/
/*################################################## FOOTER ##################################################*/
/*############################################################################################################*/

footer{
background:#D3F1F1;
float:left;
padding-bottom:30px;
text-align:center;
width:100%;
}

footer p{
color:#575757;
font-family:tahoma;
font-size:12px;
margin-top:50px;
}

footer ul{
margin-top:13px;
}

footer ul li{
color:#575757;
display:inline;
}

footer ul li a{
color:#575757;
font-family:tahoma;
font-size:12px;
padding-left:5px;
padding-right:5px;
}

footer ul li a:hover{
text-decoration: none;
}

/**
 * Default theme for GOOGLE SEARCH ALL below.
 *
 */
/* Slight reset to make the preview have ample padding. */
.cse .gsc-control-cse,
.gsc-control-cse {
  padding: 2%;
  width: 96%;
}
.cse .gsc-branding,
.gsc-branding {
  display: none;
}
.cse .gsc-control-cse div,
.gsc-control-cse div {
  position: normal;
}
/* Selector for entire element. */
.cse .gsc-control-cse,
.gsc-control-cse {
  background-color: #ffffff;
  border: 1px solid;
  border-color: #ffffff;
}
.cse .gsc-control-cse:after,
.gsc-control-cse:after {
  content:".";
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
}
.cse .gsc-resultsHeader,
.gsc-resultsHeader {
  border:none;
}
/* Search button */
.cse input.gsc-search-button,
input.gsc-search-button {
  font-family: inherit;
  color: #000000;
  text-shadow: 0 1px 2px #FFFFFF;
  background-color: #CECECE;
  border: 1px outset;
  border-color: #666666;
  border-radius: 2px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
}
/* Inactive tab */
.cse .gsc-tabHeader.gsc-tabhInactive,
.gsc-tabHeader.gsc-tabhInactive {
  border-bottom: none;
  color: #666666;
  background-color: #e9e9e9;
  border: 1px solid;
  border-color: #e9e9e9;
  border-bottom: none;
}
/* Active tab */
.cse .gsc-tabHeader.gsc-tabhActive,
.gsc-tabHeader.gsc-tabhActive {
  background-color: #FFFFFF;
  border: 1px solid;
  border-top: 2px solid;
  border-color: #e9e9e9;
  border-top-color: #FF9900;
  border-bottom: none;
}
/* This is the tab bar bottom border. */
.cse .gsc-tabsArea,
.gsc-tabsArea {
  margin-top: 1em;
  border-bottom: 1px solid #e9e9e9;
}
/* Inner wrapper for a result */
.cse .gsc-webResult.gsc-result,
.gsc-webResult.gsc-result {
  padding: .25em;
  border: 1px solid;
  border-color: #ffffff;
  margin-bottom: 1em;
}
/* Result hover event styling */
.cse .gsc-webResult.gsc-result:hover,
.gsc-webResult.gsc-result:hover {
  border: 1px solid;
  border-color: #FFFFFF;
}
/*Promotion Settings*/
/* The entire promo */
.cse .gs-promotion.gs-result,
.gs-promotion.gs-result {
  background-color: #FFFFFF;
  border: 1px solid;
  border-color: #336699;
}
/* Promotion image */
.cse .gs-promotion.gs-result .gs-promotion-image,
.gs-promotion.gs-result .gs-promotion-image {}
/* Promotion title */
.cse .gs-promotion.gs-result a.gs-title:link,
.gs-promotion.gs-result a.gs-title:link {
  color: #0000CC;
}
.cse .gs-promotion.gs-result a.gs-title:visited,
.gs-promotion.gs-result a.gs-title:visited {
  color: #0000CC;
}
.cse .gs-promotion.gs-result a.gs-title:hover,
.gs-promotion.gs-result a.gs-title:hover {
  color: #0000CC;
}
.cse .gs-promotion.gs-result a.gs-title:active,
.gs-promotion.gs-result a.gs-title:active {
  color: #0000CC;
}
/* Promotion snippet */
.cse .gs-promotion.gs-result .gs-snippet,
.gs-promotion.gs-result .gs-snippet {
  color: #000000;
}
/* Promotion url */
.cse .gs-promotion.gs-result ..gs-visibleUrl,
.gs-promotion.gs-result .gs-visibleUrl {
  color: #008000;
}

