/* Cascading Style Sheet for Frans Absil Website
   Author: F.G.J. Absil
   Date: April 2011
   Layout scheme: 1 or 2 columns on white page in darkblue frame.
     Page width: container, banner, navigation menu and footer (920px)
     Total content width: main (870px)
     Single column: widecontent (850px)
     Two columns: content (left, 566px), plus sidebar (right, 274px)
   Color scheme:
     Pantone Colors: (from light to dark)
     649 C = #DBDBE0; 650 C = #C7CFD9 (or 290 C = #C7D9E6;) 651 C = #A1ADC7;
     652 C = #788CB3; 653 C = #36578C; 654 C = #0F3063; 655 C = #0A214F;
*/

/* GLOBAL SETTINGS */
/* Document body style */
body {
   /* background: image[no]  repeat [yes] attachment [scroll with content]
      pos-x [0] pos-y [0] color [Pantone 655 C] */
   /* Pantone 655 C=#0A214F; was #D5F0F9; (dark blue background frame) */
   background: none repeat scroll 0 0 #0A214F;     
   /* Global text properties: color=grey-black, font=arial, size=13pt */
   color: #444444;
   font-family: arial, tahoma, sans-serif;
   font-size: 13px;
   /* Global box properties: no margin, no padding */
   margin: 0;
   padding: 0; 
}
/* Universal selector: applies to all elements */
* {
    margin: 0;
    padding: 0; 
}
/* Global paragraph properties */
p {
    line-height: 1.5em;
    margin-bottom: 20px;
    /* border: 1px solid #000; */
}

/* links (in text) */
a {
    color: #36578C; /* 653 C = #36578C #608E9D; */
    text-decoration: none;
}
a:hover {
    color: #000000;
}
/* this is infrequently used: no effect */
a:focus {
    outline: medium none;
}
a:visited {
    text-decoration: underline;
}

/* Internal page anchor definitions: color=black */
/* a[name], h3 a[name], h4 a[name] {color: #E00; text-decoration: none;} */
a[name], h1 a[name], h2 a[name], h3 a[name], h4 a[name] {
   text-decoration: none;
   color: #000;
}

/* headers */
/* h1 is used in top of page above banner */
h1 {
    color: #36578C; /* Pantone 653 C = #36578C #608E9D; */
    font-size: 40px;
    font-weight: normal;
}
/* h2 is the main title at the top of the content on each page */
h2 {
    color: #000000;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 24px;
    font-weight: normal;
    letter-spacing: 0.5px;
    margin: 0;
    padding: 0 0 5px;
}
h3 {
    color: #000000;
    font-size: 17px;
    font-weight: normal;
    margin-bottom: 10px;
}
h4 {
    color: #777777; /* was: #999999; */
    font-size: 15px;
    padding-bottom: 10px;
}
h5 {
    color: #777777;
    font-size: 13px;
    padding-bottom: 10px;
}

/* lists (in main content) */
ul, ol {
    margin: 0 0 6px 30px;
}
li {
    line-height: 1.4em;
    padding-bottom: 6px; /* was: 6px */
}
/* nested lists */
li ol, li ul {
    /* font-size: 1em; */
    margin-bottom: 0;
    padding-top: 5px;
}
/* FA: nested list items have reduced line-spacing */
li ol li, li ul li {
    /* border: #000 thin solid; */
    line-height: 1.4em;
    padding-bottom: 6px;
}

/* Page layout elements (ID-selectors) */
#container {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding: 0;
    width: 920px;
}
#container-inner {
    background: none repeat scroll 0 0 #FFFFFF;
    margin: 0 auto;
    padding: 0;
    width: 920px;
}
#header {
    height: 58px; /* was: 88px; */
    margin: 0 auto;
    padding: 0;
}
#header h1 {
    padding-left: 15px;
    padding-top: 15px;
}
#header h1 a {
    color: #36578C; /* 653 C = #36578C; #608E9D; */
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 48px;
    font-weight: normal;
    text-decoration: none;
}

/* FA logo in header */

#falogo {
    background-image: url("../fig/falogo.jpg");
    background-repeat: no-repeat;
    height: 60px; /* 192px; */
    margin: 0px 5px 5px 0px;
    width: 55px;
}

#header img.logo {
    width: 40px; /* was: 55px; */
    margin: 10px; /* was: 15px; */
    /* vertical-align: bottom; */
    float: left; 
}

#header p {
    color: #999999;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    font-weight: bold;
    line-height: 14px;
    margin-left: 12px;
    margin-top: 0;
    padding-left: 8px;
    /* border-style: solid;
    border-color: #000;
    border-width: 1px; */
}

/* List of navigation links in page header and footer section */
#header ul {
   position: relative;
   top: -20px;
   height: 14px;
   color: #36578C; /* Pantone 653 C = #36578C;  (medium blue) */
   text-align: right;
   list-style: none outside none;
   margin: 0px;
   padding: 3px 10px;
   /* border-style: solid;
   border-color: #0000FF;
   border-width: 1px; */
}

#header li {
   display: inline;
}  

#header span.rlinks {
    height: auto;
    font-size: 12px;
    /* text-align: right; */
    padding: 0px 12px 2px 0px;
    /* float: right; */
    /* border-style: solid;
    border-color: #000;
    border-width: 1px; */
}

/* PAGE HEADER */
/* navigation menu */
#nav {
    height: 30px; /* was: 26px */
    margin-top: 0;
    width: 920px;
    background-color: #36578C; /* 653 C = #36578C #36578C; */
}
#nav ul {
    height: auto;
    list-style: none outside none;
    margin: 0;
    padding: 0 10px;
}
#nav ul li {
    display: block;
    float: left;
    padding: 0;
}

/* navigation menu links */
#nav ul li a {
    color: #D5F0F9;
    background-color: #36578C; /* medium blue for magnified view */
    display: block;
    font-size: 12px; /* was: 12px */
    padding: 6px 10px;
    text-decoration: none;
    text-transform: uppercase;
}
#nav ul li a:hover {
    color: #FFFFFF;
}

/* banner graphics and slogan */
#banner {
    background-image: url("../fig/bannerfig.jpg");
    background-repeat: no-repeat;
    height: 172px; /* 192px; */
    margin: 20px 0 0;
    width: 920px;
}
#slogan {
    /* padding: 32px 0 0 248px; */
    padding: 115px 20px 0 20px;
}
#slogan p {
    /* color: #FFFFFF;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-size: 30px; */
    color: #DBDBE0; /* Pantone 650 C = #C7CFD9; */
    font-family: arial, helvetica, sans-serif;
    font-size: 40px;
    text-align: right;
    margin: 0;
}

/* PAGE CONTENTS */
/* main = left column */
#main {
    margin: 0 auto;
    padding: 0;
    width: 850px; /* was 890px; */
}
#content {
    float: left;
    margin: 15px 0;
    padding-right: 6px;
    width: 560px; /* was 582px; */
}

/* FA: pagewide single column */
#widecontent {
    /* float: left; */
    margin: 15px 0;
    padding-right: 6px;
    width: 850px; /* was 890px; */
}

/* sidebar = right column (class-selector) */
.sidebar {
    float: right;
    padding: 15px 0 0;
    width: 275px; /* was 274px; */
}
.sidebar-inner {
    background-color: #EFEFEC; /* Pantone 649 C = #DBDBE0;  #EBF8FC; */
    margin-bottom: 6px;
    padding: 15px;
}
.sidebar ul {
    margin: 10px 0 0 25px; /* was: 10 0 0 35 */
    padding: 0;
}
/* FA: sidebar linespacing set to 1.3em */
.sidebar ul li{
    line-height: 1.4em;
}

/* nested lists in sidebar */
.sidebar li ul li {
    border-top: medium none;
    color: #555555;
    display: block;
    font-size: 13px;
    line-height: 1.2em; /* was: 1.5em */
    margin: 0;
    padding: 6px 7px;
}
.sidebar li ul li a {
    color: #555555;
    font-weight: normal;
}
.sidebar li ul li a:hover {
    color: #36578C; /* 653 C = #36578C #608E9D; */
}
/* sidebar header: white, 15px, uppercase font on blue blackground */
.sidebar h4 {
    background-color: #36578C; /* 653 C = #36578C #608E9D; */
    color: #FFFFFF;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0;
    margin: 0;
    padding: 10px;
}
/* FA: Text paragraph in sidebar */
.sidebar p {
    line-height: 1.4em;
    padding-bottom: 6px;
    padding-top: 6px;
    margin-bottom: 0px; 
}
/* News items in sidebar */
.news-item {
    /* border: #000 thin solid; */
    padding-bottom: 10px;
    padding-top: 10px;
}
.latest-news a {
    font-weight: bold;
}
.date {
    color: #000000;
    font-weight: bold;
}
/* images in sidebar */
.sidebar img {
	clear: both;
	/* float: right; */
        /* border: #000 thin solid; */
	margin: 3px 20px;
	}
.sidebar img.filler {
	/* clear: both; */
	float: right;
	margin: 1px 10px;
	}

/* PAGE FOOTER */
#footer {
    background-color: #36578C; /* 653 C = #36578C #608E9D; */
    margin: 0 auto;
    padding: 20px 0;
    text-align: right;
    width: 920px;
}
#footer p {
    color: #FFFFFF;
    display: block;
    font-family: Arial,Helvetica,sans-serif;
    font-size: 12px;
    margin: 0 auto;
    padding: 0 10px;
}
#footer p a {
    color: #FFFFFF;
}

/* page bottom links, right aligned */
#bottom-links ul {
    color: #444444; /* #D5F0F9; */
    height: auto;
    text-align: right;
    list-style: none outside none;
    margin: 0;
    padding: 2px 0;
    /* border-style: solid;
    border-color: #FFF;
    border-width: 1px; */
}
#bottom-links ul li {
    display: inline;
    /* float: left; */
    padding: 0;
}

/* copyright note on homepage */ 
#footer p.copyright {
   text-align: left;
}

/* TABLES */
table {
    text-align: left;
    vertical-align: top;
    width: 100%;
}
th, td {
    padding: 6px; /* was: 10px */
}
th {
    /* background: none repeat-x scroll left top #1FAABE; */
    background-color: #36578C; /* 653 C = #36578C #608E9D; */
    color: #FFFFFF;
}
td {
    /* background: none repeat scroll 0 0 #FFFFFF; */
    border-bottom: 1px solid #CCCCCC; 
}

tr.noborder td, td.noborder{
   border-bottom: 0px solid #CCCCCC;
}

/* right align table elements with numbers */
td.num, table.gui td.num {
   text-align: right;
   padding-right: 12px;
}

/* table caption (capitalized blue font on white blackground) */
caption {
    /* background: none repeat-x scroll left top #1FAABE; */
    background-color: #FFF; 
    color: #36578C; /* 653 C = #36578C #608E9D; */
    font-size: 15px;
    text-transform: capitalize;
    padding: 6px;
}

/* table with vertically aligned columns */
table.valign td {
   vertical-align: baseline;
   border-bottom: 0px solid #CCCCCC; 
}

/* small figures in table header fields */
th img.thfig {
    width: 40px;
    float: right;
    vertical-align: middle;
    margin: 0;
    padding: 0;
} 

/* Table for music data sheet */
table.mdata th.datalabel {
    width: 130px;
}
table.mdata td {
	padding: 6px 10px 6px 10px;
	/* font-weight: normal; */
	color: #222;
	background-color: #FAFAFA;
        border-width: 1px;
	border-style: solid;
	border-color: #888888;
}

/* Table with vibrating strings */
table.string {
    width: 625px;
    background-repeat: no-repeat; 
    background-position: 0 0;
    padding: 0;
    margin: 5px 0px;
}

table.string input {
    border: thin solid #36578C;
    color: #222; 
    font-family: Arial,Helvetica,sans-serif;
    font-size: 14px;
    width: auto;
    padding: 6px;
    margin: 0;
}

table.string th, table.string td {
    padding: 15px 0px 2px 0px;
    margin: 0px 0px;
}

table.string caption {
    background-color: #FFF; /*#C7D9E6;*/
    color: #222;
    font-size: 14px;
    text-transform: none;
    text-align: right;
    padding: 10px 0 2px 0;
    margin: 0;
}  

/* GUI layout table */
table.gui {
	clear: both;
	/* width: 100%; */
	margin: 3px 0px 3px 0px;
	border-width: 0px;
	border-style: solid;
	border-color: #F00;
	background-color: #FFFFFF;
        background-repeat: no-repeat;
	}
/* Prevent lower line on td-elements of GUI and string table */
table.gui td, table.string td {
  border-bottom: 0px solid #CCCCCC;  
}
/* Shaded background in output rows of GUI table */
table.gui tr.output {
    background-color: #EFEFEC;
}


/* blockquote */
blockquote {
    border-left: 5px solid #36578C; /* 653 C = #36578C #608E9D; */
    display: block;
    margin-bottom: 20px;
    padding: 10px;
}
blockquote p {
    color: #555555;
    font-family: Georgia,"Times New Roman",Times,serif;
    font-style: italic;
    height: 1%;
    margin: 0;
}

/* fieldset */
fieldset {
    /* border-color: #CCCCCC -moz-use-text-color -moz-use-text-color; */
    border-color: #A1ADC7; /* Pantone 651 C = #A1ADC7; */
    border-style: solid none none; 
    border-width: 6px medium medium;
    display: block;
    padding: 10px 0 0 0;
}
fieldset legend {
    color: #555555;
    font-size: 15px;
    font-weight: bold;
    padding-right: 10px;
}
fieldset form {
    padding-top: 15px;
}
fieldset p label {
    float: left;
    width: 150px;
}

/* form */
form input, form textarea {
    border-color: #CCCCCC #DDDDDD #DDDDDD #CCCCCC;
    border-style: solid;
    border-width: 1px;
    color: #222222; 
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    padding: 5px;
}

/* Pull-down select menu */
form select {
    border-color: #CCCCCC #DDDDDD #DDDDDD #CCCCCC;
    border-style: solid;
    border-width: 1px;
    border: thin solid #36578C;
    color: #222222; 
    font-family: Arial,Helvetica,sans-serif;
    font-size: 13px;
    width: auto;
    /* min-width: 60px; */
    padding: 0px; 
}

form input.formbutton {
    /* background: none repeat scroll 0 0 #1FAABE; */
    border: thin outset #36578C;
    color: #444;
    font-family: Arial,Tahoma,Geneva,sans-serif;
    font-size: 13px;
    font-weight: bold;
    /* letter-spacing: 1px; */
    /* overflow: visible; /*
    padding: 5px 6px;
    margin: 0 0px;
    /* width: auto; */
}
form.searchform p {
    margin: 5px 0;
}

/* Table with list and guilayout*/

table.list th, table.list td.head, table.gui th, table.gui td.head {
     background-color: #36578C; /* 653 C = #36578C; was #176DC5; */
}

table.list th, table.list td.head, table.gui th, table.gui td.head {
    padding: 4px 6px 4px 6px;
    color: #FEFEFE;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
}

table.list td {
	padding: 4px 6px 4px 6px;
	font-weight: normal;
	color: #333;
	background-color: #EBEBE0; /* Pantone 649 C = #DBDBE0; was #F0F0E9; */
	}

table.gui td {
    padding: 4px 3px 4px 6px;
    font-weight: normal;
    color: #333;
    /* background-color: #EBEBE0; *//* Pantone 649 C = #DBDBE0; was #F0F0E9; */
} 

/* Table for tonedisc representation */
table.tonedisc {
    width: 130px;
    background-color: #E0EAEA;
    /* font-size: 1.2em; */
}
table.tonedisc td {
    background-color: #E0EAEA;
    border: 0px;
    margin: 2px;
    padding: 1px 2px;
}

/* IMAGES */

/* images (at right margin) */
img.rfig {
   /* width: 120 px; */
   /* clear: both; */
   float: right;
   margin: 1em 1em; 
}

/* images, centered 240 px wide (in sidebar) */
img.sfig {
   width: 240px;
   /* clear: both; */
   /* float: right; */
   /* margin: 1em 1em; */
}

/* images (right margin) */
img.filler {
   /* width: 120 px; */
   /* clear: both; */
   float: right;
   padding: 0em 0em;
   margin: 0em 0em; 
}
/* film strip figure */
img.filmfig {
	clear: both; 
        /* float: right; */
        vertical-align: middle;
        width: 25px;
        border: 0;
	margin: 2px 5px;
	}

/* G-clef and loudspeaker images in tables */
td img.gclef, td img.speaker {
    width: 25px;
    border: #00F 1px solid;
}

/* PARAGRAPHS */

/* Page navigation: right-aligned link */
p.pagenav {
    text-align: right;
    padding: 0px 0px 10px 0px;
    margin: 0;
}

/* Small navigation links at top of page body */
p.smallprint {
	font-size: 12px;
	}

/* span */
span.warning {
    color: #FF0000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
}

span.label {
    color: #000;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-weight: bold;
}

/* clear floating elements */
.clear {
    clear: both;
	}