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/farm-tile-finala2a-trans.jpg);
background-repeat:repeat-x;
}
/*background-attachment:fixed;/
font-family:Georgia, "Times New Roman", Times, serif;} /*font squirrel font to be added*/

#wrapper
{min-height:100%;
width:86%;
margin:0 auto;
max-width:1280px;
min-width:980px;}

header
{width:100%;
margin:0 auto;
height:80px;}

#logo
{position:absolute;
top:22px;
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: rgb(245,245,245); /* Old browsers */
background: -moz-linear-gradient(top, rgba(245,245,245,1) 0%, rgba(225,225,225,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(245,245,245,1)), color-stop(100%,rgba(225,225,225,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(225,225,225,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(225,225,225,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(245,245,245,1) 0%,rgba(225,225,225,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(245,245,245,1) 0%,rgba(225,225,225,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */}

.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); 
background:-moz-linear-gradient(top, rgba(12,77,137,1) 0%, rgba(84,117,54,1) 100%); 
background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(12,77,137,1)), color-stop(100%,rgba(84,117,54,1))); 
background:-webkit-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); 
background:-o-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%); background:-ms-linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%);
background: linear-gradient(top, rgba(12,77,137,1) 0%,rgba(84,117,54,1) 100%);
background: rgb(14,128,160); /* Old browsers */
background:rgb(12,77,137);
background: -moz-linear-gradient(top, rgba(14,128,160,1) 0%, rgba(84,117,54,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(14,128,160,1)), color-stop(100%,rgba(84,117,54,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(14,128,160,1) 0%,rgba(84,117,54,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(14,128,160,1) 0%,rgba(84,117,54,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(14,128,160,1) 0%,rgba(84,117,54,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(14,128,160,1) 0%,rgba(84,117,54,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e80a0', endColorstr='#547536',GradientType=0  );}
	
#search 
{width:300px;
border:none;
height:30px;	
/*position:absolute;
right:12px;
top:22px;*/
-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;
background-color:rgba(254, 254, 254, 0.4);
font-family:Arial, Helvetica, 'DejaVu Sans', sans-serif; 
font-size:14px;
text-align:center;
float:right;
margin-top:40px;
outline:none;
/*position:absolute;
top:38px;
right:20px;*/}  /*placeholder input text supported by html5 for FF3.7 and webkit, add a shiv? also*/

#search:hover, #search:focus
{-moz-box-shadow: rgba(0,0,0, 0.4) -1px -1px 12px; 
-webkit-box-shadow: rgba(0,0,0, 0.4) -1px -1px 12px;
box-shadow: rgba(0,0,0, 0.4) -1px -1px 12px;}
	
	
.clear
{clear:both;}
 
#columns
{width:100%;
margin:0 auto;
color:#547536;
margin-top:51px;
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;
margin-bottom:20px;}

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

#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:#f0f0f0;
background-color:rgba(254, 254, 254, 0.7);
cursor:pointer;}

.sectionsRight
{width:280px;
background-color:#f0f0f0;
background-color:rgba(254, 254, 254, 0.8);
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
{-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;
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, .submit:focus
{-moz-box-shadow: 0px 0px 3px #000;  
-webkit-box-shadow:0px 0px 3px #000;
box-shadow: 0px 0px 3px #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:#f0f0f0;
background-color:rgba(254, 254, 254, 0.7);
color:#0c4d89;
font-size:13px;
padding-top:16px;
padding-bottom:24px;
padding-left:1%;
padding-right:1%;
margin-top:-120px;
position:relative;}

footer h1
{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;}
