html, body
{width:100%; /*HTML5 shiv to be added*/
height:100%;} 
/*layout breaks at 800px!!!!*/
/*code needs to be validated*/

body
{background-image:url(../img/pattern8.png);
background-attachment:fixed;
font-family:Georgia, "Times New Roman", Times, serif;} /*font squirrel font to be added*/

.wrapper
{min-height:100%;}

#logo
{margin-top:24px;
margin-left:20px;} /*this is taking the top margin of nav. because it's inline? display:block dont work*/

.navMain
{position:absolute;
top:48px;
left:200px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size:24px;
z-index:150;}

.navMain li
{position:relative;
display:inline;
float:left;}

.navMain li a
{color:#0c4d89;
text-decoration:none;
padding:10px;
margin-right:20px;}

.navMain li a:hover, .navMain ul li a, .navMain li:hover > a 
{background:#e3e3e3; /* fallback for old browsers */
background:-moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(209,209,209,1) 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(209,209,209,1))); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%); /* IE10+ */
background:linear-gradient(top, rgba(255,255,255,1) 0%,rgba(209,209,209,1) 100%); /* W3C */}

.navMain li ul
{display:block;
height:0;
width:340px;
overflow:hidden;
opacity:0;
position:absolute;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 0.5s ease-in;
-o-transition: all 0.5s ease-in;}

.navMain li li
{display:list-item;
list-style:none;padding:12px 0; /*was originally 10 0*/
float:none;}

.navMain li:hover ul
{height:auto;
opacity:1;
margin:10px 0;
display:block;
width:340px;}

.navMain ul li a:hover
{color:#e3e3e3;
background:rgb(12,77,137); /* fallback for old browsers */
background:-moz-linear-gradient(top, rgba(12,77,137,1) 0%, rgba(84,117,54,1) 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,77,137,1)), color-stop(100%,rgba(84,117,54,1))); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* W3C */}
	
.clear
{clear:both;}
 
#columns
{width:86%;
margin:0 auto;
color:#547536;
margin-top:28px;
overflow:hidden;
/*overflow-y:auto; i had to do this for sticky footer to fix a damn FF bug that was showing horizontal scrollbar on footer, i hope its ok, i'mnot sure if IE 6 accepts overflow-x hidden, the question is, do we care*/
padding-bottom:120px;}

#col1
{width:65%;
position:relative;
/*background: rgb(12,77,137);*/
margin-right:10px;
float:left;
z-index:130;}

#col1 hgroup
{text-align:left;
margin-left:0px;}

#col1 hgroup h1
{font-size:72px;
background-color:rgba(254, 254, 254, 0.4);
padding-left:10px;
padding-right:10px;
display:inline-block;} /*is this ok*/

#col1 hgroup h2 
{font-size:24px;
line-height:28px;
border-left:10px solid rgba(254, 254, 254, 0.4);
} /*why doesn't padding work here? because it's inline?*/

#col1 hgroup h2 span
{background-color:rgba(254, 254, 254, 0.4);}

hgroup h3 
{font-size:24px;
background-color:rgba(254, 254, 254, 0.4);
margin-top:24px;
padding:6px;
display:inline-block;}

#basket
{margin-left:0px;
margin-top:20px;
position:relative;}

#basketBottom
{position:absolute;
top:130px;
z-index:50;}

#basketTop
{position:absolute;
top:236px;
left:10px;
z-index:100;}

#basketRecipe
{position:absolute;
top:80px;
left:340px;
z-index:60;
color:#b4131b;
cursor:pointer;} /*COMES FROM THE BACKEND, please change*/

#featuredRecipe
{font-size:12px;
position:absolute;
top:40px;
left:35px;
z-index:60;
padding-bottom:6px;
border-bottom:1px solid #b4131b;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);
transform: rotate(-6deg);}

#recipeName
{font-size:20px;
position:absolute;
top:68px;
left:68px;
z-index:60;
-webkit-transform: rotate(-6deg);
-moz-transform: rotate(-6deg);}

#vegLeft
{position:absolute;
top:160px;
left:70px;
z-index:80;} 

#vegCenter
{position:absolute;
top:150px;
left:200px;
z-index:70;} 

#vegRight
{position:absolute;
top:0px;
left:490px;
z-index:80;} 

#col2 
{width:300px; 
float:right;
/*background-color:#C09;*/
z-index:120;
margin-left:10px;}
 
#meetFarmer
{position:relative;
width:300px;
margin-bottom:14px;}

#meetFarmer figcaption
{position:absolute;
bottom:2px; /*WHY LIKE THIS?*/
right:0px;
font-size:24px;
background-color:rgba(254, 254, 254, 0.6);}

.sectionsRight
{width:280px;
background-color:rgba(254, 254, 254, 0.4);
margin-top:16px;
margin-bottom:16px;
padding:10px;}

.sectionsRight h1
{font-size:24px;
margin-bottom:10px;} /*line-heights need to be more*/

#eventsSection ul li
{font-size:18px;
margin-bottom:10px;}

.eventsTime
{font-size:14px;
color:#343434;}

.sectionsRightLink
{font-size:14px;
margin-top:10px;
cursor:pointer;}

.input
{width:180px;
-moz-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;  
-webkit-box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px;
box-shadow: rgba(0,0,0, 0.3) 0px 0px 8px 3px;
background-color:rgba(254, 254, 254, 0.1);
outline:none;} 
   
.submit
{border:none;
background:rgb(12,77,137); /* Old browsers */
background:-moz-linear-gradient(top, rgba(12,77,137,1) 0%, rgba(84,117,54,1) 100%); /* FF3.6+ */
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,77,137,1)), color-stop(100%,rgba(84,117,54,1))); /* Chrome,Safari4+ */
background:-webkit-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* Chrome10+,Safari5.1+ */
background:-o-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* Opera11.10+ */
background:-ms-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); /* W3C */
color:#e3e3e3;	
padding:3px 14px;
margin-left:4px;}	

.submit:hover
{-moz-box-shadow: 0px 0px 8px #000;  
-webkit-box-shadow:0px 0px 8px #000;
box-shadow: 0px 0px 8px #000;}

#blogSection article
{margin-top:10px;} /*are the time zones in the html accurate???? and the usage of time, datetime, pubdate, only done it for the first article*/

.titleText
{font-size:18px;
cursor:pointer;} /*want cursor pointer over the whole article????*/

.titleText:hover
{border-bottom:1px dotted #547536;}

.postText
{font-size:14px;
color:#343434;}

.postText:after /*SANJ, have used generated content, JS libraries shd take care of it for old IE versions, but it says ::after, so it should take care of the problem?*/
{content: "...";}

#blogSection article time
{font-size:10px;
color:#343434;}

footer
{width:84%;
margin:0 auto;
height:120px; /*change padding bottom in columns if u change this, for it's for the sticky footer*/
font-family:Georgia, "Times New Roman", Times, serif; /*to be changed*/
background-color:rgba(254, 254, 254, 0.4);
color:#0c4d89;
font-size:13px;
padding-top:16px;
padding-bottom:16px;
padding-left:1%;
padding-right:1%;
margin-top:-120px;
position:relative;}

footer h1
{font-size:24px;}

footer h2
{font-size:13px;
padding-bottom:20px;}

footer ul
{width:33%;
float:left;}

footer ul li a /*this will override default colors for active and visited links? appears to be working.*/ 
{color:#0c4d89;
font-size:13px;
line-height:20px;
text-decoration:none;
outline:none;
cursor:pointer;
border-bottom:1px solid transparent;}

footer ul li a:hover
{border-bottom:1px dotted #0c4d89;}
