/************************************************************************************
 This file css_style.css file contains all styling except those  for the elements in the #content div 
 which are imported from css_content.css
************************************************************************************/
@import url("css_content.css"); 

/* Universal selector '*' valid for ALL elements; no margins and no padding by default */
* { margin: 0; padding: 0; }

/* Body uses a background composed from horizontally tiled gradient image at the top
   and stll background color below that. The relative font-size here approaches a
   desired standard size without further css */

body {
    color: #000000;
    background-color: #333333;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 76%;
}

/* No border around hyperlinked images */

img {
    border: 0px;
}

/************************************************************************************
 The frame div surrounding all other content divs; central fixed width
 using vertically tiled 'faux-column' background image 
************************************************************************************/

#frame {	
    position: relative;
    margin: 10px auto 15px auto;
    background: #ffffff url(bg_pagemid.png) repeat-Y;
    color: #000000;
    width: 850px;
}

/************************************************************************************
 The banner div is a horizontal band at the top of the frame div
 Note: The banner is a background image applied through CSS, with the bannertext written over it
 The bannerlogo is made invisible trough CSS and is there for search engines only
 The banner is replaced by a flash through javascript, picking up and reproducing the  bannertext 
************************************************************************************/

#banner {
    background-image: url(bg_pagetop.png);
    height: 80px;
}

#bannerlogo {
    visibility: hidden;
    position: absolute;
    left: 3px;
    top: 18px;
}

#bannertext {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    font-size: 22px;
    text-align: center;
    color: #ffffff;
    background-color: inherit; 
    padding-top: 29px;
    margin: 0px;
}

/************************************************************************************
 The navigate div is a column at the left
************************************************************************************/

#navigate {
    width: 180px;
    float: left;
    padding: 27px 0px 20px 0px; 
} 

/* The search form is java scripted and has specialized style definitions */

#searchform {
    width: 155px;
    margin-left: 20px;
    margin-bottom: 20px;
    color: #000000; 
    background-color: inherit;
    font-size: 11px;
}

#searchcaption {	
    color: #777777;
    background-color: inherit;    
    font-weight: bold;
}

#searchform input {
    font-size: 11px;   
}
   
#searchterm {
    border: solid #56ba56 1px;
    padding: 1px;
    margin: 0px 0px 3px 0px;
    width: 100%;
}

#searchsite {
    width: 40px;    
    position: relative;
    left: 35px;
}

#searchweb {
    width: 40px;
    position: relative;
    left: 35px;
}

/* mainmenu and macromenu  styling */

.mnutopmnu, .mnumacmnu {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif; 
}

ul.mnumacmnu {
    list-style-type: none;
    list-style-image: none;    
    margin: 0px;
    padding: 0px 0px 8px 0px;
    border: solid #56ba56 1px;    
    width: 180px;
}

ul.mnutopmnu {
    list-style-type: none;
    list-style-image: none; 
    margin: 0px;
    padding: 0px 0px 10px 0px;
    border-right: solid #56ba56 1px;    
}

ul.mnusubmnu {
    list-style-type: none;
    list-style-image: none;
    margin: 0px 0px 0px 10px;
    padding: 0px; 
}

a.mnutopcat, span.mnutopcat {
    display: block;
    font-size: 12px; 
    font-weight: bold;
    color: #ffffff;    
    margin: 10px 0px 10px 0px;
    padding: 2px 5px 2px 20px;
    background-color: #40c040;
    border-bottom: 10px solid #2bab2b;     
    text-decoration: none;
}

a.mnutopcat:hover {
    color: #000000; 
    background-color: #40c040;
    text-decoration: none;
}

a.mnusubcat, span.mnusubcat {
    display: block; 
    font-size: 11px;
    margin: 2px 10px 4px 10px;
    padding: 0px 2px 1px 10px;
    color: #ffffff;
    background-color: #50d050;    
    text-decoration: none;
}

a.mnusubcat:hover {
    color: #000000; 
    background-color: #50d050;
    text-decoration: none;
}

a.mnuarticl, span.mnuarticl {
    display: block; 
    font-size: 11px; 
    color: #008000;
    background-color: #ffffff;           
    margin: 0px 10px 1px 10px;
    border-bottom: 1px solid #ffffff;   
    text-decoration: none;
}

a:hover.mnuarticl {    
    color: #cd6600; 
    background-color: #ffffff;
    border-bottom: 1px solid #56ba56;        
    text-decoration: none;
}

/* it seems that for IE6 I need to provide either a height or a width when having block display 
otherwise the items get an absurd vertical spacing. Choose heigth and overflow hide  as the least worst
but this prevents multi-line items */

a.mnusubcat, span.mnusubcat, a.mnuarticl, span.mnuarticl {
    height: 15px; overflow: hidden;
}


/* Additional strong style to mimick RSS symbol in the menu. Verdana is somewhat wider*/

strong.rssmark {
    display: inline;
    font-family: Verdana, Arial, Helvetica, sans-serif;    
    font-size: 10px; 
    font-weight: bold;  
    color: #ffffff;
    background-color: #40c040;
    padding: 0px 2px;
}

/* #tooltip is a single dynamically created <div>. Whithin it is a single table with class tooltiptable */

.tooltiptable {
    font-family: Arial, Helvetica, sans-serif;    
    font-size: 12px;
    color: #8b3a3a;
    background-color: #ffffe0;
    border: solid 2px #cd6600;
}

.tooltiptable th  {
    text-align: left;
    color: #ffffff;  
    background-color: #cd6600;
    padding: 1px 3px; 
}

.tooltiptable td {
    padding: 1px 3px;
}

/************************************************************************************
 The content div is the central column
************************************************************************************/

/* Content is 610px wide (including padding). There's no bottom padding
   since this is visually arranged for with the bottombar.  */

#content { 
    width: 555px; 
    float: left;
    padding: 40px 15px 0px 40px; 
    /* Overflow hidden: items that are too wide are clipped. Overflow Auto: show scrollbars when needed */
    overflow: hidden;    
}

/* All normal element styling for the #content div is specified in a separate (re-usable) file
 css_content.css.  The stylesheets there are NOT #id specific except for a possible font definition
 for the #content div itself.  The @import rule for css_content.css is at the top of this file.*/
 
/* Additional styling for 'admin content' */ 

#adminform input, #adminform select {
    font-size: 12px;
}

#adminform textarea {
    /* Default is:  font-family: "Courier New", Courier, monospace; */  
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;  
    width: 98%; /* ie */
}

/* Extra table styling for admin tables used with row drag & drop */ 

#TABLE_1 td {
    height: 25px;
}

#TABLE_1 th{
    height: 30px;
}

.draghandle {
    display: table-cell;
    width: 10px;
    font-size: 8px;   
    font-weight: bold;    
    color: #ffffff;
    background-color: #cdaa7d;
    cursor: move;
}

/* used in article edit */
/* Note: SCM also uses classes excerpt (in css_content) and wysiwyg (empty class for editor replacement) */

#adminform h4 {
    margin-top: 8px;
}

#adminform h4 a{
    color: #999999;
    background-color: inherit;
}

#adminform h4 a:hover{
    color: #ffffff;
    background-color: #999999;
}

#admin_eatb {    
	color: inherit;
    background-color: #e7e7e7;
	border: solid 1px #ccc;
}

/* Styles for the news aggregator output . Should be considered 'system'; 
therefore declared here and not in css_content.css. 
These styles are introduced in scm/configs/news_template_tab.html  */

.news_table_channel {
    clear: left;
    width: 100%;
    color: inherit;
    background-color: #1874cd;
    margin: 10px 0px;
}

.news_td_chantext {
    width: 100%;
    padding-left: 10px;
    padding-bottom: 8px;
}

.news_td_chantext a {
    color: #ffffff;
    background-color: inherit;
}

.news_td_chantext a:hover{
    color: #ffffff;    
    background-color: inherit;
    text-decoration: underline;
}

.news_td_chantext h4 {
    color: #b7b7ff;
    background-color: inherit;
}

.news_td_chanlogo { 
    vertical-align: middle;
    color: inherit;
    background-color: #ffffff;
    padding: 0px 2px;
}

.news_div_content {
    clear: left;
    width: 100%;  
    padding: 0px 0px 10px 0px;
}

/* Styles for Lightbox. Should be considered 'system'  */

#lightbox {
    color: #003300;
    background-color: #e0e0e0;
    padding: 10px;
    border-bottom: 2px solid #666;
    border-right: 2px solid #666;
}
#lightbox_details {
    font-size: 0.8em;
    padding-top: 0.4em;
}
#lightbox_caption { float: left; }
#lightbox_kbd_msg { float: right; }
#lightbox_close_btn{ top: 5px; right: 5px; }
#lightbox_overlay { background-image: url(bg_lightbox.png); }
#lightbox_overlay img{ border: none; }
#lightbox img{ border: none; clear: both;} 

/* Leaving out the non-validating hocus-pocus to get IE to do PNG Alpha */

/************************************************************************************
 The sidebar div is a small column at the right containing shortcut icons
************************************************************************************/

#sidebar {
    float: left;
    padding: 40px 0px 0px 0px;
    width: 60px;
}

#sidebar div {
    width: 38px;
    height: 38px;
    margin: 0px 0px 5px 10px;
}

/* Hover and link for sidebar icons arranged by script */

.icon {
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    color: #ffffff;
    background-color: inherit;
    border: solid 1px #ffffff;
}

.icon img {
    display: block;
    width: 22px;
    height: 22px;
    margin: 1px auto 0px auto;
}

/************************************************************************************
 The bottombar div is a row below 
************************************************************************************/

/* Total wdith including padding (top, right, bottom, left) is 850px. 
   This works best for the left & right aligned sub divs */
   
#bottombar{
    clear: left;
    height: 30px;
    width: 825px;
    padding: 0px 5px 0px 20px;
}

#validation {
    float: left;
    padding-top: 5px;
}

/* Validation hover arranged by script */

#validation a {
    font-size: 11px;
    font-weight: bold;
    color: #777777; 
    background-color: inherit;
    text-decoration: none;
    padding-right: 5px;
}

#ico_top {
    width: 38px;
    float: right;
    margin-right: 5px;
}

/************************************************************************************
 The footer div; below in the frame with small height and full frame width
 It is supposed to have two <address> lines
************************************************************************************/

#footer{
    clear: left;
    background: #ffffff url(bg_pagebtm.png);
    height: 20px;
    color: #666666;
}

#footer strong {
    color: #446644; 
    background-color: inherit;
    font-style: normal;
}

#footer a {
    color: inherit; 
    background-color: inherit;
    text-decoration: none;
}

#footer a:hover {
    color: #cd6611; 
    background-color: inherit;
}

#footer address {
    font-style: normal;
    font-size: 11px;
    display: block;
    padding-top: 3px;
}

.footeraddr1{
    float: left;
    padding-left: 20px;
}

.footeraddr2{
    float: right;
    padding-right: 10px;
}