/* 3D8579 Green */

html {overflow-y: scroll;} /* always display scrollbar to avoid centralized content from jumping */

body {
	margin: 0;
	padding: 0;
	color: #666666;
	background: #EBEBEB;
	font: 12px "Lucida Grande", "Trebuchet MS", Arial, sans-serif;
   
}


    p {  
    font-family      : arial, sans-serif;
    font-size        : 12px;
    text-align       : justify;
    padding-left     : 5px;
    padding-right    : 30px; /*fix for smaller body area leading to cut off right edge */
    }

    
    .staticcontentspace { margin-top: 3px; }    /* this is to use as a spacer div around breadcrumb on static pages */

    
    td {  
    font-family      : arial, sans-serif;
    text-align       : left;
    font-size        : 12px;} 
     
    tr {  
    font-family      : arial, sans-serif;
    font-size        : 12px;} 

    
    /* the following section works together to create bulleted lists with slight spacing and the ability to have different bullets in the same ul list depending on whether or not it is a hyperlink */
    
    ul {  
    font-family      : arial, sans-serif;
    font-size        : 12px;
    } 
    
    li {
    margin           : 0 0 5px 0;
    }

    ul.links { 
    list-style-image : url(/en/templates/neep_0.9/images/arrow.png);
    }

    ul.blank { 
    list-style : none;
    text-indent: -1.5em; margin-left: 1.5em; padding-left: 15px; /* hanging indent works with a.nolinks and a.links  */
    }
    
    a.links {
    background           : url(http://www.neep.org.sa/en/templates/neep_0.9/images/arrow.png);
    background-repeat    : no-repeat;
    padding-left         : 17px;
    }
    
    a.nolinks { 
    background           : url(http://www.neep.org.sa/en/images/noarrow.png);
    background-repeat    : no-repeat;
    padding-left         : 17px;
    color                : #666666;
    }
    
    a.nolinks:visited  {    
    color                : #666666;
    }

    a.nolinks:link  {    
    color                : #666666;
    }
    
    a.nolinks:hover  {    
    color                : #666666;
    }

    a.weblinks {
    background           : url(http://www.neep.org.sa/en/images/M_images/weblink.png);
    background-repeat    : no-repeat;
    padding              : 0px 0 0 25px;
    margin               : 10px 0 0 20px;
    }
    
    a.weblinks2 {
    background           : url(http://www.neep.org.sa/en/images/M_images/weblink2.png);
    background-repeat    : no-repeat;
    padding              : 0px 0 0 25px;
    margin               : 10px 0 0 20px;
    }

    a.mainlevelmensfx {
    background           : url(/en/templates/neep_0.9/images/arrow.png);
    background-repeat    : no-repeat;
    padding-left         : 17px;
    }

    
    
/* standard definitions for links */
    
    a:link {  
    font-size        : 12px;
    color			 : #006666;
    text-decoration   	 : none;
    } 

    a:visited {  
    color			 : #006666;
    text-decoration   	 : none;
    }
/* removed hover #000000 to prevent non linking 'a' tags from changing with hover */
    a:hover {  
    color			 : #666666;
    text-decoration   	 : none;
    }


    .pdflink {
    background           : url(/en/images/M_images/pdficon.gif); 
    background-repeat    : no-repeat;
    padding-left         : 22px;
    height               : 19px;
    }
    
    hr {} /* horizontal line */
    hr.separator {}

    .maintitle { text-transform: none; color: #666666; font-size: 16px;  text-align: left; } 
    .subtitle { font-style: italic; font-weight: bold; color: #666666; font-size: 14px;  text-align: left;}

    ul.downloadlist { list-style-image: url(templates/neep_0.9/images/arrow.png); padding-left: 0px; text-indent: 0px; margin-left: 0px; }

    .article_seperator {
    border-bottom: 0px grey solid;    
    }
    
    
    
    
    /* CSS for Border-Change / Back Colour Change Mouseover effects */
      
    div.bgchange     
          { border: none;
            font-size: 12pt;
    	color: black;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	}

    .bgchange a { display: block;
    	text-decoration: none;
    	color: #336666; background: inherit;
    	border: 2px solid white;
    	width: 100%;
    	}
    .bgchange a:hover {
    	color: #000;
    	width: 100%;
            border: 2px solid #336666;
            text-decoration: none;
    	} 


    div.colorchange     
          { border: none;
            font-size: 12pt;
    	color: black;
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	width: 90%;
            margin: 5px;
            padding: 10px;
    	}

    .colorchange a { display: block;
    	text-decoration: none;
    	color: #336666;
            background: #FFFFFF;
    	}
    .colorchange a:hover {
    	color: #000;
            text-decoration: none;
            background: #F3FFFD;
    	} 
     
    /* FORMS SETTINGS */ 
    .button {
      color            : #666666;
      border           : 1px solid #999999;
      background-color : #ffffff;
      margin-top       : 0px;
      font-family      : arial, helvetica, sans-serif;
      font-size        : 9px;
      height           : 10px;
      width            : 140px;

    }
    .inputbox {
    font-size: 9px;
    	font-family: verdana, helvetica, sans-serif;
    	text-align: left;
    	color: #333333;
    background-image: url(../images/back_main.jpg);
    border: 1px solid #999999;
    width: 100%;
    }
    .search {} /*formatting the <div> which holds search items: inputbox, search button...*/
     
     
    /* NAVIGATION/MENU SETTINGS */
     
    a.mainlevel{  
        font-family          : Verdana, Arial, sans-serif;
        font-size            : 10px;
        font-weight          : 400;
        text-transform       : none;
        color                : #000000;
        width                : 90%;
        text-indent          : 6px;
        text-decoration      : none;
        display              : block;
        background           : url(http://www.neep.org.sa/en/templates/neep_0.9/images/arrow.png);
        background-repeat    : no-repeat;
        border-style         : solid;
        border-color         : #999999;
        border-width         : 0px;
        border-bottom-width  : 1px;
        padding-left         : 5px;
        padding-bottom       : 3px;
        margin-left          : 3px;
        margin-bottom        : 3px;
        margin-top           : 3px;
        
      } /* this styling is for the MAIN items in the menu */
      
    a.mainlevel:link {  
        font-size            : 10px; 
        color                : #000000;
    }
      
    a.mainlevel:visited {
        font-size            : 10px;      /* Need to keep this font-size hard-coded - despite being set in the generic a.mainlevel above, it cascades the font-size from body font-size */
        color                : #000000;
    }
    
    a.mainlevel:hover {  
        font-size            : 10px;
        color                : #3e857a;
        background           : url(http://www.neep.org.sa/en/templates/neep_0.9/images/indent1.png);
        background-repeat    : no-repeat;
    }
     
    #active_menu { 

    font-size            : 10px;
  

      } 
      /* this styling is for the menu item when it is active, even in main/sub position*/
     
    ul#mainlevel-nav {}
    ul#mainlevel-nav li{}
    #mainlevel-nav a:link {}
    #mainlevel-nav a:visited{}
    #mainlevel-nav a:hover {}
     
    a.sublevel{} /* this styling is for menu items that HAS A PARENT */
    a.sublevel:link { text-decoration  : none; }
    a.sublevel:visited { text-decoration  : none; }
    a.sublevel:hover { text-decoration  : none; }
     
    .pagenavbar {} /*Sets the style for the footer navigation ("<< Start < Prev Next > End >>") when they do not appear as hyperlinks (when only a few articles exist).*/
    .pagenavbar:link {} /*Style for the footer navigation ("<< Start < Prev Next > End >>") when they become hyper links*/
    .pagenavbar:visited {}
     
    .pagenav { text-decoration  : none; } /* as the name implies, this is for formatting texts for those "<< Start < Previous 1 Next > End >>" links */
    a.pagenav:visited { text-decoration  : none; }
    a.pagenav:hover { text-decoration  : none; }
     
    a.readon:link { text-decoration  : underline; } /*Style for the "Read More" link that is displayed for large content items*/
    a.readon:hover { text-decoration  : underline; }
    a.readon:visited { text-decoration  : underline; }
     
    .back_button {} /*Style for the "BACK" button*/
    .pagenav_prev {} /*Style for the PRE button*/
    .pagenav_next {} /*Style for the NEXT button*/
     
    .latestnews ul {} /*Style for latest news list - by default, latest news is user1 module*/
    .latestnews li {}
     
    .mostread ul{} /*Style for most popular list - by default, most popular is user2 module*/
    .mostread li{}
     

    /* LINKS ON THUMBNAIL PAGES */
    /* NOTE: Had to use override in-line style in component file jbook.html.php */

    /* CONTENT PAGE SETTINGS */
    a.category:link { text-decoration  : none; }
    a.category:hover { text-decoration  : none; }
    a.category:visited { text-decoration  : none; }
     
    .blogsection {} /* Formatting the links in Blog section */
    .blog_more {} /*The "More" text in blog section*/
    a.blogsection:link { text-decoration  : none; } /* set the link format */
    a.blogsection:visited {text-decoration  : none; } /* same as above, but to set the visited link format */
    a.blogsection:hover { text-decoration  : none; } /* same as above, but for links with mouse pointer over it */
     

/* Definitions of coloured stripe MAINheadings called componentheadings with name of section */
     
     .componentheading {
    text-transform: uppercase; 
    color: #993300; 
    font-size: 14px;
    padding-top: 10px;
    }

    .componentheading2 {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #ff9900;
    width: 509px;
    
    }

        .componentheadingnews {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #3DC06C;
    width: 509px;
        margin: 10px 5px 0 17px;
    
    }
    
    .componentheadinginfo {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #EE5F5F;
    width: 509px;
    marginxx: 8px 5px 0 15px;
    }
    
    .componentheadingfront {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #3D8579;
    width: 509px;
    marginxx: 8px 5px 0 15px;
    }

    .componentheadingdownload {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #B95FD0;
    width: 509px;
    marginxx: 8px 5px 0 15px;
    }  

    .componentheadingtopbar {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #00ccff;
    width: 509px;
    marginxx: 8px 5px 0 15px;
    }     
 
    .componentheadingsearch {
    text-transform: lowercase; 
    color: #ffffff; 
    font-size: 18px;
    padding-top: 30px;
    padding-bottom: 15px;
    padding-left: 15px;
    border-color: #993300;
    border-width: 0px;
    border-style: solid;
    background: #9a9a9a;
    width: 509px;
    marginxx: 8px 5px 0 15px;
    } 
 
.temp {    background: url(http://www.neep.org.sa/en/templates/neep_0.9/images/title_bg.jpg);
    background-repeat: repeat-y;}
    
    div.componentheading_border {
    background-image: url(templates/neep_0.9/images/dot.gif); 
    background-repeat: repeat-x; 
    height: 10px;
    width: 500px;
    }


    /* Definition of coloured stripe SUBtitles called contentheadings with name of section .*/


    .contentheading {
    text-align: left;
    color: #000000; 
    font-size: 12px;
    padding:  5px 0 5px 15px;
    background: #ffffff;
    width: 100%;
    text-transform: lowercase;
    margin-top: 20px;
    }
    
    .contentheadingnews {
    text-align: left;
    color: #3DC06C; 
    font-size: 21px;
    padding:  15px 0 0px 0px;
    background: #FFFFFF;
    width: 100%;
    text-transform: lowercase;
    margin-top: 20px;
    border-top: 1px grey dotted;
    }
    
    .contentheadinginfo {
    text-align: left;
    color: #666666; 
    font-size: 12px;
    padding:  5px 0 5px 15px;
    background: #FFCBCB;
    width: 509px;
    text-transform: lowercase;
    margin-top: 20px;
    }

    .contentheadingdownload {
    text-align: left;
    color: #666666; 
    font-size: 12px;
    padding:  5px 0 5px 15px;
    background: #f1c1fd;
    width: 509px;
    text-transform: lowercase;
    margin-top: 20px;
    }
 
 .contentheadingtopbar {
    text-align: left;
    color: #666666; 
    font-size: 12px;
    padding:  5px 0 5px 15px;
    background: #c1f3ff;
    width: 509px;
    text-transform: lowercase;
    margin-top: 20px;
    }
     
 .contentheadingsearch {  
    text-align: left;
    color: #666666; 
    font-size: 12px;
    padding:  5px 0 5px 15px;
    background: #d8d8d8;
    width: 509px;
    text-transform: lowercase;
    margin-top: 20px;
    }
 
 .contentheadingneep {  
    text-align: left;
    color: #666666; 
    font-size: 12px;
    padding:  5px 0 5px 15px;
    background: #FFDBA5;
    width: 509px;
    text-transform: lowercase;
    margin-top: 20px;
    } 
    
    
    table.contentpaneopen {
    	width: 100%;
         margin: 8px 15px 0 15px;   	
    }
    
        
    table.contentpaneopenneep {
    	width: 100%;
         margin: 8px 15px 0 15px;   	
    }
    
        table.contentpaneopennews {
    	width: 95%;
        margin: 8px 15px 0 15px;   
    }

	       .blogfix {                      /* fixes margins on category linked generated */
        padding: 10px 14px 0 20px;        /* pages with page class suffix 'fix' */
    }

	       .bloglink {                      /* fixes margins on category linked generated */
        padding: 10px 14px 0 20px;        /* pages with page class suffix 'link' to be used in conjunction with linked contentheading */
    }


   	       .blogsimplefix {                /* fixes margins on simplemeasures generated */
        padding: 12px 14px 0 20px;        /* pages with page class suffix 'simplefix' */
    }

	
    .contentpanejbook { margin: 8px 15px 0 15px;  }

    table.contentpaneopen td {
    	padding:0px;
    }

        table.contentpaneopen td {
    	padding:0px;
    }
    
    table.contentpane {
    	width: 100%;
    	margin: 0px;
    	padding: 0px;
    }

    td.contentheading_old {
    font-size        : 11px;
    background-image:url(../images/bck_line.gif);
    font-weight      : normal;
    width            : 100%;
    height: 20px;
    margin-bottom: 3px;
    margin-top: 3px;  
    color: #000000;
    text-decoration  : none;
    text-transform   : uppercase;
    text-indent: 25px;
    }

    td.contentheading {
    color: #993300; 
    font-size: 16px;
    margin-bottom: 3px;
    margin-top: 3px; 
    text-decoration  : none;
    font-weight      : normal;
    }

     /* Title of the content, article, etc. being displayed.*/
    .contentpane {} /* Table that holds all non-article information (components, category lists, contact forms, etc).*/
    .contentpaneopen {} /* Table that holds the actual text for an article.*/
    .contentpagetitle {} /*Title of articles*/

    .contentpagetitlelink { 
               background           : url(/en/templates/neep_0.9/images/arrow.png);
               background-repeat    : no-repeat;
               padding-left         : 17px; 
     }                                   /*For linked Title of articles such as report titles*/
     
    a.contentpagetitle:hover { text-decoration  : none; } /*Title of articles when appearing as links */
    a.contentpagetitle:link { text-decoration  : none; }
    a.contentpagetitle:visited { text-decoration  : none; }
     
    .contentdescription {} /* Formating the "DESCRIPTION" of sections, categories (News/Weblinks/Latest news...) */
    table.contenttoc {} /* Formating the table of the Tables of Contents for multiple pages content or article */
    table.contenttoc td {} /* same as above, used to format the td and able cells */
    table.contenttoc th {} /* same as above, used to format the th of "Tables of Content" ( normally Article Index)*/
    table.contenttoc td.toclink {} /* same as above, used to format toc link texts*/
    a.toclink:link { text-decoration  : none; } /* same as above, used to format toc link text status*/
    a.toclink:visited { text-decoration  : none; } 
    a.toclink:hover { text-decoration  : none; } 
     

    /* JOOMLA SECTIONS LISTINGS */
    .sectiontableheader {} /* This is for styling the section table headers on a SECTION's page.
      Example: table header of "Date", "Item Title", "Author" and "Hits"? */
    .sectiontableentry1 { } /* now hard-coded with inline css in component file jbook.html.php in order to implement more conditional formatting */
    .sectiontableentry2 {}
     
     
    /* JOOMLA MODULES FORMATTING */
    table.moduletable {
      width			   : 150px;
      table-layout	   : auto;
      margin		   : 25px 0 0 7px;  /* top spacing to align with orange component heading  bar */
      text-align: center;
    } /* Formatting the module table */

 /* Formatting the module header, and the module titles */

    table.moduletable th {
    font-family: "Verdana", Arial, sans-serif;
	padding: 5px 0 5px 0;
	margin: 0 -2px 5px -2px!important;
	color: #ffffff;
	font-size: 0.9em;
    background-color: #3D8579;
}

    table.moduletable td { } /* Formatting the table cells of the module table */
    
        table.moduletablehome {
      width			   : 525px;
      table-layout	   : auto;
      margin		   : 10px 5px 0 0px;
      text-align: center;
    }
     
     table.moduletablehome td { text-align: center; padding: 0px; width: 525px;} /* Formatting for frontpage body modules */   
    
    
    table.moduletablehome2 td { } /* Formatting for frontpage body modules */
    
    
        table.moduletablehome2 {
      margin		   : 20px 5px 0 0px;
    }
    
   
     
    /* MISCELLANEOUS */
     
    /* Dates , Authors*/
    .createdate {
    color: #000000;
    } /* For styling the date the content/articles are created under contents title */
    .modifydate {
    color: #000000;
    } /* Formating "Last updated on" text at the end of articles/contents */
    .small {
    color: #000000;
    } /* Formating "Written by:...." text */
    .smalldark {}/*Found in poll result page, for " Number of Voters".. text */
     
    /* Polls */
    .poll {} /* format the td of poll table */
    .pollstableborder {} /* set the border properties of the polls voting table */
     
     
    /* Weblinks */
    .weblinks{} /* well.. to format the link's titles under the "Weblinks" 
      section on the frontend */
    a.weblinks:hover {} /* same as above, but for link with mouseover */
     
    /* Newsfeeds */
    .newsfeedheading {} /* The newsfeed title. NOTE: This will not affect the newsfeed's news title! */
    .newsfeeddate {} /* yeah.. the date on the newsfeed */
    .fase4rdf {} /* this is the body text of the newsfeed */
     
    /* Search page */
    table.searchintro {} /* This is for formatting the box with "Search Keyword: test returned 4 matches" box
      that appears after you have entered a search value. It appears on the mainbody
      with the search results */
     
     
    /* JOOMLA TABBED FRONTEND ADMIN INTERFACE */
    /* The CSS below efines how the frontend admin interface when logged in */
     
    .ontab {}/* For styling of the "Tab" buttons when editing contents through the frontend as admin. 
    This .ontab is the styling for the tab when it is active or after its "clicked" */
    .offtab {} /* Same as above, used for styling of the "Tab" buttons when editing contents through the frontend. 
    This the styling for the tab when it is NOT active or when it is NOT "clicked" */
    .tabpadding {} /* this style is used set the size of the tab in the above */ 
    .tabheading {} /* Not too sure what this is used for. Couldn't find anything related to it yet at the moment */
    .pagetext {} /* this style is used to style the content of the editing form contents (where HTMLArea sits and all its forms + contents) in
    the frontend Administration interface */

    .pathway {
      font-size        : 10px;
      color            : #666666;
      padding-left     : 8px;
    padding-bottom: 0px;
    VERTICAL-ALIGN: top;
    }
    a.pathway:link, a.pathway:visited {
    color            : #666666;  
    font-size        : 10px;
      padding-left     : 0px;
    text-decoration  : none;
    }
    a.pathway:hover {
      font-size        : 10px;
      padding-left     : 0px;
    color: #000000;
    text-decoration  : none;
    }

    .copyright {
      font-size        : 10px;
      padding-left     : 0px;
    color: #ffffff;
    }
	
	
	
	.Stil2 
            {
                color: #333333
            }
            .box
            {
                background-image:url(templates/neep_0.9/images/blank.gif);
                background-repeat:no-repeat;
                background-position:right bottom;
            }
            .banner
            {
                color: white;
                height: 115px;
                background-image: url(http://www.neep.org.sa/en/templates/neep_0.9/images/new_top_banner.jpg);
            }
            .mainbg
            { 
                background-image: url(http://www.neep.org.sa/en/templates/neep_0.9/images/main.png);
            }