/* Filename: main.css
 * Website: FMNN
 * Author: Nishanka Rupasinghe
 * Date Created: 11/03/2013
 * Media: Screen
 *
 * Description
 * -----------
 * Colours:
 * Background       - #xxxxxx
 * Link             - #xxxxxx  
 * Link Hover       - #xxxxxx 
 * Link Active      - #xxxxxx 
 *
 *=====================================================================*/ 

/* Layout styles    
    index ->    
                CSS reset
				default
				navigation
				header
				content
				sidebar
*/

/* = css reset     
--------------------- */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: inherit; font-family: inherit; vertical-align: baseline; list-style-type:none; text-decoration: none; }
article,aside,figure,figure img,figcaption,hgroup,footer,header,nav,section,video,object{display:block}
     
/* = default     
--------------------- */
html { font: 14px/15px 'verdana','arial'; color: #585852; }
h1 { font: 30px/30px 'verdana','arial'; color: #ffffff; }   
.mainContent h1 { font: 20px/30px 'verdana','arial'; color: #585852; margin-bottom: 20px; }   
h2 { font: 18px/20px 'verdana','arial'; color: #585852; } 
h3 { font: 14px/15px 'verdana','arial'; font-weight: bold; color: #585852; margin-bottom: 20px; }  
h4 { font: 13px/15px 'verdana','arial'; font-weight: bold; color: #585852; }
h5 { font: 12px/15px 'verdana','arial'; color: #585852; }                                           
h6 { font: 11px/14px 'verdana','arial'; color: #585852;  }
ul, ol { padding: 0 0 20px 17px; } 
ul li, ol li { list-style-type: none; margin: 0 0 7px 0; padding: 0 0 0 9px; background: url('../images/bg-li.png') no-repeat 0 7px; }   
strong, b { font-weight: bold; }   
i,em { font-style: italic; } 
u { text-decoration: underline; } 
p { font: 14px/22px 'verdana','arial'; color: #585852; margin-bottom: 22px; }
a { color: #8e995b; }	
a:hover { color: #ffec38; }
	
/* = commonStyles   
--------------------- */
	
body { font: 14px/15px 'verdana','arial'; }
                 
.holder { background: #ffffff; width: 935px; margin: 0 auto; }      

/* = Header Styles
--------------------- */
.header { position: relative; } 
.logo { background: url('../images/bg-logo1.jpg') repeat 0 0; height: 106px; padding: 28px 0 0 37px; }  
.logo h1 { width: 520px; height: 65px; background: url('../images/logo.png') no-repeat 0 0; margin-top: 16px; }  
.logo a { display: block; width: 100%; height: 100%; color: #ffffff; text-indent: -9999px; white-space: nowrap; overflow: hidden; }   

/* = Main Navigation Styles
----------------------------- */  
.navigation { background: url('../images/bg-nav.jpg') repeat-x 0 0; padding-top: 2px; } 
.navigation ul { overflow: hidden; height: 42px; width: 695px; padding:0; }
.navigation ul li { float: left; padding: 9px 18px 11px 19px; margin: 0; list-style-type: none; background: none; }  
.navigation ul li a { color: #84914e; text-transform: uppercase; }   
.navigation ul li a:hover, .navigation ul li.active a { color: #ffec38; }       
.navigation ul li.active { background-color: #84914e; -webkit-box-shadow: -5px 10px 5px 1px rgba(0, 0, 0, .03); box-shadow: -5px 10px 5px 1px rgba(0, 0, 0, .03); } 
.leaf { position: absolute; right: 19px; bottom: 6px; }     

/* = Image Slider Styles
-------------------------- */  
#MainImage { width: 935px; height: 380px; overflow: hidden; }
.div.orbit-wrapper { }
.orbit-wrapper .orbit-caption { background-color: #6f7941!important; opacity: 0.8!important; position: absolute; left: 0; top: 138px; width: auto!important; max-width: 520px!important; height: 75px!important; padding: 19px 25px 15px 28px!important; font: 24px/34px 'verdana','arial'!important; font-weight: bold!important; text-align: left!important; filter: alpha(opacity=80); }  
.orbit-bullets { position: absolute; left: 76px!important; bottom: 24px!important; } 
.orbit-bullets li { padding: 0; background: #afb486!important; width: 12px; height: 12px; margin: 0 15px 0 0!important; border: 1px solid #ffffff; list-style-type: none; }   
.orbit-bullets li.hover { background: #fffbcc!important; }
.orbit-bullets li.active { background: #84914e!important; }    
 
/* = Main Content Styles
-------------------------- */
.mainContent { margin: 17px 0 20px 0; }
           
.mainContent .subSection { overflow: hidden; }          
.mainContent .sideBar { width: 253px; margin-right: 55px; float: left; }
.mainContent .sideBar .sideBarItem { background: url('../images/bg-sideBarTitle.png') no-repeat 0 0; padding: 4px 10px 25px 0; }  
 .mainContent .sideBar .sideIntro.sideBarItem { background: url('../images/bg-sideIntroTitle.png') no-repeat 0 0; }   
.mainContent .sideBar .sideBarItem h3.itemTitle { margin: 0 0 14px 7px; font: 9px/10px 'verdana','arial'; width: auto; max-width: 75px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #FFFACC; }
.mainContent .sideBar .sideBarItem p { margin-bottom: 0px; font: 12px/20px 'verdana','arial'; }
.mainContent .sideBar .sideIntro a { font: 12px/20px 'verdana','arial'; }
.mainContent .sideBar .sideBarItem ul { margin: 0px 0 20px; padding: 0; }       
.mainContent .sideBar .sideBarItem ul li { margin: 0 0 30px 0; padding: 0; color: #585852; list-style-type: none; background: none; }  
.mainContent .sideBar .sideBarItem ul li a{ color: #585852; } 
.mainContent .sideBar .sideBarItem ul li h3 { font: 14px/15px 'verdana','arial'; font-weight: bold; text-transform: uppercase; margin-bottom: 7px; } 
.mainContent .sideBar .sideBarItem ul li ul { margin: 0 0 20px; }
.mainContent .sideBar .sideBarItem ul li ul li { margin: 0 0 8px 1px; } 
.mainContent .sideBar .sideBarItem ul li ul li a { padding-left: 6px; }  
.mainContent .sideBar .subMenu.sideBarItem { margin-bottom: 21px; }
.mainContent .sideBar .subMenu { background: transparent!important; }

.mainContent .subContent { width: 627px; float: left; } 
.mainContent .subContent h3 { margin-bottom: 7px; }           
.mainContent .subContent span.showHide { background: url('../images/arrows.png') no-repeat -218px -2px; width: 36px; height: 33px; margin-bottom: 9px; display: block; cursor: pointer; }
.mainContent .subContent span.showHide:hover { background: url('../images/arrows.png') no-repeat -327px -2px; } 
.mainContent .subContent span.showHide.expandedContent { background: url('../images/arrows.png') no-repeat -436px -2px; }
.mainContent .subContent span.showHide.expandedContent:hover { background: url('../images/arrows.png') no-repeat -545px -2px; }    
/* = Footer Styles
-------------------------- */ 
.bottomContent { background-color: #84914e; } 
.bottomContent ul { overflow: hidden; padding: 0; }  
.bottomContent ul li { width: 309px;  float: left; background: url('../images/divider.jpg') no-repeat right 0; padding: 0 4px 0 0; margin: 0; list-style-type: none; }   
.bottomContent ul li.last { background: none; padding-right: 0; }
.bottomContent ul li .colWrapper { background: url('../images/bg-footer-li.jpg') no-repeat 0 0; min-height: 219px; padding: 6px 0 0 9px; }                                                           
.bottomContent ul li a.topLink { font: 9px/10px 'verdana','arial'; width: 47px; height: 15px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bottomContent ul li a.topLink:hover { color: #ffec38; }        
.bottomContent ul li h3 { margin: 24px 58px 0 21px; font: 20px/26px 'verdana','arial'; font-weight: bold; letter-spacing: 0.02em; text-align: center; color: #ffffff; word-spacing: 0px; }
.bottomContent ul li h3 p { margin: 24px 58px 0 21px; font: 20px/26px 'verdana','arial'; font-weight: bold; letter-spacing: 0.08em; text-align: center; color: #ffffff; }
.bottomContent ul li a { color: #fffacc; }             
.bottomContent ul li a.bottomLink { margin: 16px 4px 0 0; background: url('../images/arrows.png') no-repeat 2px -2px; display: block; width: 36px; height: 36px; float: right; } 
.bottomContent ul li a.bottomLink:hover { background: url('../images/arrows.png') no-repeat -107px -2px; }  
     
.footer { background-color: #84914e; overflow: hidden; padding: 22px 20px 22px 23px; }   
.footer a.homeLink, .footer p{ float: left; color: #bbbe93; }      
.footer p { font: 13px/16px 'verdana','arial'; margin-top: 14px; }
.footer p a { color: #bbbe93; } 
.footer p a:hover { color: #ffec38; } 
.footer a.homeLink { background: url('../images/bg-homelink.png') no-repeat 0 0; width: 64px; height: 44px; margin-right: 15px; display: inline-block; }
.footer a.homeLink:hover { background: url('../images/bg-homelink-hover.png') no-repeat 0 0; }

/* = Third Page Styles
-------------------------- */  
.mainContent .subContent.projects ul { padding: 0; }
.mainContent .subContent.projects ul li { list-style-type: none; background: #fffacc; overflow: hidden; padding: 13px 15px 0 10px; margin: 0 0 16px 0; }
.mainContent .subContent.projects ul li span.showHide { float: right; }
.mainContent .subContent.projects ul li h3 { font: 16px/18px 'verdana','arial'; font-weight: bold; color: #8e995b; margin: 0 0 3px 0;} 
.mainContent .subContent.projects .showHide { margin: -20px -12px 0 0; }  
.mainContent .subContent.projects .showHideContent { margin: 43px 0 0 0; }

/* =forms
--------- */
form div.field, p.field { display: block; padding-bottom: 20px; }
div.field { overflow: hidden; }
div.field label { float: left; width: 150px; margin-right: 20px; }
div.field .middleColumn { float: left; width: 300px; } 
div.field input, div.field textarea { width: 300px; border: 1px solid #ccc; }
div.field input { height: 25px; }
div.field select { border: 1px solid #ccc; width: 305px; }
div.field .optionset { list-style: none; list-style-type: none; }
div.field .optionset li { overflow: hidden; list-style: none; list-style-type: none; }
div.field .optionset li input { float: left; width: 15px; height: 15px; border: 0px; }
div.field .optionset li label { margin-right: 0px; width: 255px; margin-top: 2px; }
div.middleColumn label.required { color: #CC0000;}
input.action { background-color: #84914e; color: #ffffff;}
input.action:hover { color: #ffec38; border-color: #ffec38; }