/* 

	Stylesheet by Mediabyrån at Karolinska Institutet University Library 

	Features: Scalable text, scalable width, Dreamweaver templates and Contribute support, menus styled as lists 

	Ulf.Kronman@kib.ki.se. 2005-08-06 -- 2006-02 /UK 



   ToDo:

 * Include directives for neat printing

 * Clean up - put menu directives together

 

*/



/* General styling for all areas */

/* ---------------------------------------------------------------------------- */



/* Don't set font size in body. Set it in content area. Otherwise everything else will be relative to this */

body {

   margin: 0px 0px 0px 0px;

   padding: 0px 0px 0px 0px;

   font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;

}



/* Set Internet Explorer to inherit fontsize in tables from surrounding element */

table {

    font-size: 100%;

}



/* Set browsers with proper CSS2 support (Mozilla, Opera) to inherit fontsize in tables from surrounding element */

* > table {

	font-size: inherit;

}



/* Set no cellpadding and align top as default for all table cells */

td, th {

   padding: 0px;

	margin: 0px;

   vertical-align: top;

}



/* Set margins to avoid excessive spacing between headers and text */

p, td, th, ul, ol, dl, pre {

	margin-top: 0px;

	margin-bottom: 6px;

}



/* Font family for all headings */

h1, h2, h3, h4, h5 {

	font-family: Arial, Helvetica, sans-serif;

	color: #333333;

	margin-top: 10px;

	margin-bottom: 2px;

}



h1 {

	font-size: 1.3em;

}



h2 {

	font-size: 1.1em;

}



h3 {

	font-size: 0.9em;

}



li {

	margin-top : 6px;

   margin-bottom: 0px;

}



dt {

	font-weight: bold;	

	margin-top : 6px;

   margin-bottom: 0px;

}



hr {

    height: 1px;

    border: none;

    background-color: #666666;

}



/* General link styling */

a:link {

   color: #38695D;

   text-decoration: underline;

}



a:visited {

   color: #38695D;

}



a:active {}



a:hover {

    text-decoration : underline;

}



/* Content area styling for editors. Should be classes to vork well with Contribute */ 

/* -------------------------------------------------------------------------------- */



/* Set maximum width of body text for readability. CSS2. Only supported by Mozilla and Opera, not IE */

td#content-area p {

   max-width: 50em;  

}



/* Redesign all heading 1  */

h1 {

	color: #333333;

   line-height: 1.1em;

   padding-bottom: 4px;

   margin-bottom: 8px;

   margin-top: 14px;

	padding-top: 12px;

}



/* Table for single-column layout. Just put in 100% to keep any centered objects in the middle */

table.one-column {

	width: 100%;

}



/* Table for two-column layout. */ 

table.two-column {

	width: 100%;

   margin-top: 10px;

}



/* Settings common for both columns */ 

table.two-column td {

	padding-right: 18px;

	padding-left: 0px;

}



/* Right part of two-column layout, including separating border between columns */

table.two-column td.column-right {

   padding-left: 34px;

   background-image: url("../images/line_vertical_gray_toned_white_top.jpg");

   background-repeat: no-repeat;

}



/* Right part of two-column layout, no separating border */

td.column-right-no-separator {

}



/* Special classes for frontpage */

/* ------------------------------------------------ */



/* Table for text block in frontpage columns */

#content-area .textbox {

   margin-top: 20px;

}



#content-area .textbox td {

   padding-left: 20px;

   padding-right: 30px;

}



.textbox h1,

.textbox h2 {

   font-size: 1em;

   font-weight: bold;

   color: #000;

   margin-top: 8px;

   margin-bottom: 0px;

}



/* Head above text block in columns. Negative margin to point our to the left. */

.texthead {

   background: #fff url(../images/texthead_arc_left.jpg) no-repeat bottom left;

   margin-left: -20px;

}



.texthead div {

   margin-left: 10px;

   padding-left: 8px;

   text-align: left;

   border-bottom: 2px solid #F58F20;

   font-weight: bold;

   color: #444;

   font-size: 0.86em;

}



/* Right margin elements */ 

/* ----------------------------------------------------------------------------------- */



/* Table-style shortcut link box. Should have been done with a div, but sorry, no work in Contribute */

table.shortcuts {

	width: 190px;

   margin-right: 20px;

   margin-top: 40px;

   border-left: 1px solid #F58F20;

   border-bottom: 1px solid #F58F20;

   background-color: #FDF0C6

}



table.shortcuts div.head {

   background-image: url(../images/bg_corner_upper_right.jpg);

   background-position: top right;

   background-repeat: no-repeat;

   padding-right: 10px;

   border-bottom: 1px solid #F58F20;

}



table.shortcuts div.head div {

   border-top: 2px solid #F58F20;

   padding: 4px;

   padding-left: 8px;

   color: #333;

}



table.shortcuts th {

   font-weight: bold;

   vertical-align: top;

	text-align: left;

}



table.shortcuts td {

   border-right: 2px solid #F58F20;

   padding-left: 0px;

   padding-right: 0px;

   padding-bottom: 2px;

}



table.shortcuts ul {

   list-style-type: none;

   margin-left : 0px;

   padding-left : 0px;

   margin-top : 8px;

   margin-bottom : 8px;

}



table.shortcuts ul li {

   padding-top : 0px;

   padding-bottom : 6px;

   padding-left : 8px;

   padding-right : 0px;

   border-bottom: 1px solid #fff;

}



table.shortcuts a, 

table.shortcuts a:visited {

   color: #6D716D;

   text-decoration: underline;   

}



table.shortcuts a:hover {

}



/* Decoration image in shortcuts box. Should be aligned at right bottom */

table.shortcuts img {

   margin-right: 10px;

   margin-top: 10px;

   float: right;

}



td#right-margin hr {

   color: #fff;

   background-color: #fff;

   height: 2px;

   margin-top: 16px;

}



td#right-margin form {

   margin-top: 0px;

}



/* Table-style login box */

table#loginbox {

	width: 190px;

   margin-right: 20px;

   margin-top: 8px;

   border: 1px solid #38695D;

}



table#loginbox div.head {

   margin: 0;

   padding-right: 10px;

}



table#loginbox div.head div {

   color: #206859;

   padding: 4px;

   padding-left: 8px;

   margin: 0;

}



table#loginbox th {

   font-weight: bold;

   vertical-align: top;

	text-align: left;

}



table#loginbox td {

   padding-left: 8px;

   color: #fff;

   background-color: #38695D;

   vertical-align: middle;

   height: 80px;

}



table#loginbox input {

   font-size: 0.9em;

   width: 120px;

}



table#loginbox td#go-button {

   background-image: url(../images/bg_form_go_dot.jpg);

   background-repeat: no-repeat;

   width: 36px;

   padding-left: 12px;

}



table#loginbox td#go-button input {

   width: 24px;

}



/* End of editor-accessible classes - the rest of CSS is design IDs and classes */

/* =============================================================================== */



/* Page and margin layout */

/* ------------------------------------------------------------------------------- */



/* Content holder table */

table#content-holder {

   width: 100%; 

}



/* Actual content area. Set font style and size in relative values (em) to make it scalable in IE */

td#content-area {

	font-size: 0.70em;

   padding-top: 0px;

   padding-left: 20px;

   padding-right: 10px;

   padding-bottom: 10px;

   background-image:   url("../images/line_vertical_gray_toned.gif");

	background-repeat: no-repeat; 

}



/* Left margin area */

td#left-margin {

   width: 180px;

}



/* Used from DW template property to hide left margin. Used on frontpage. */

td#left-margin.false {

   display: none;

}



/* Right margin area */

td#right-margin {

   width: 240px;

   background-image: url("../images/line_vertical_gray_toned.gif");

   background-repeat: no-repeat;

   font-size: 0.66em;

   padding-top: 10px;

   padding-left: 20px;

   padding-right: 10px;

   padding-bottom: 10px;

}



/* Use to hide border on right margin on front page */

td#right-margin.false {

   background-image: none;

}



/* Use this class as a DW template property for hiding right margin, if needed */

/*

td#right-margin.false {

   display: none;

}

*/



/* Hide left menu and right margin to save space when printing, if needed */

/*

@media print {

	td#left-margin {

		display: none;

	}

	td#right-margin {

		display: none;

	}

}

*/



/* Design elements for head */

/* ---------------------------------------------------------------------------- */



/* This object is here just in case it should be needed for coloring purposes */

div#head-holder {

}



/* Image banner streching over head to right end */

div#head-banner {

	background-color: #4C4E4D;

	margin-left: 0px;

	height: 92px; 

}



/* Banner image */

div#head-banner img {

	border: 0px; 

	height: 92px; 

	width: 990px;

}



/* Actual logotype */

div#head-banner img#logo {

	border: 0; 

	height: 92px; 

	width: 484px;

}





/* Design elements for horizontal menus */

/* ---------------------------------------------------------------------------- */



div#menu-holder {

	clear: both;

	margin-left: 0px;

   border-left : 1px solid #666;

   border-right : 1px solid #666;

   background-image: url(../images/bg_menu.jpg);

   background-repeat: no-repeat;

}



/* Hide menu when printing, because it looks ugly without background colors */

@media print {

	div#menu-holder {

		display: none;

	}

}



/* Class to hide (doubled) bottom border on pages without second level menu */

div.false#menu-holder {

	border-bottom : 0px;

}



/* Common properties for both menu level containers */

div#menu-holder div {

	white-space: nowrap;

	padding-top: 3px;

   padding-bottom: 3px;

	padding-left: 0px;

}



/* Common properties for both menu level links */

div#menu-holder a {

   padding-top : 3px;

   padding-bottom : 3px;

	margin-left: 0px;

	margin-right: 0px;

}



/* Background image in bottom of menu level 1 puts border between menus */

div#menu-level1 {

	font-size: 0.67em;

   border-top : 1px solid #666;

	border-bottom : 1px solid #666;

   font-weight: bold;

}



div#menu-level1 a {

   padding-left: 11px;

   padding-right: 9px;

   text-decoration: none;

   color: #666;

   background: transparent url("../images/menu_bar.jpg") no-repeat left;

}



/* Special ID to remove extra border in leftmost menu link */

div#menu-level1 a#menu-edge {

   background-image: none;

   padding-right: 11px;

}



div#menu-level1 a:hover {

 	color: #000;

	background-color: #FDFBC7;

}



/* Background image in link overwrites and thus "removes" default background border from outer td */

div#menu-level1 a.true, 

div#menu-level1 a.true:hover, 

div#menu-level1 a.true:visited {

   background-color: #FDFBC7;

   border: 2px solid #F18D0A;

   padding-top: 1px;

   padding-bottom: 1px;

   background-image: none;

}



/* Remove background image on link after the selected one - will not work in IE5-6 */

div#menu-level1 a.true + a {

    background-image: none;  

   text-decoration: none;

}



div#language-switcher {

	position: absolute;

	right: 40px;

	top: 93px;

	text-align: right;

	width: 100px;

	/* display: none; Change to "none" here if language switcher is not desired on site */

}



div#language-switcher a,

div#language-switcher a:hover {

	border: none;

	font-variant: normal;

	background-color: transparent;

   background-image: none;

}



div#language-switcher a:hover {

	text-decoration: underline;

}



div#menu-level2 {

	font-size: 0.7em;

	background-color : #D3D3D5;

}



div#menu-level2 a {

	padding-left: 12px;

	padding-right: 16px;

	text-decoration: none;

 	color: #003366;

	background-image:  url("../../_development/images/line_vertical_gray.gif");

	background-position: right;

	background-repeat: no-repeat;

}



div#menu-level2 a:hover {

 	color: #3399CC;

}



div#menu-level2 a.true, 

div#menu-level2 a.true:hover, 

div#menu-level2 a.true:visited {

 	color: #003366;

	font-weight: bold;

	background-color : #D3D3D5;

}





/* Structure marker */

/* ------------------------------------------------------------ */



div#structure-marker {

	clear: both;

	margin-left: 150px;

	font-size: 60%;

	border-left: 1px solid #cccccc; 

	border-right: 1px solid #eeeeee; 

	border-bottom: 1px solid #eeeeee;

	padding-left: 2px;

	padding-top: 4px;

	padding-bottom: 4px;

	padding-left: 4px;

	white-space: nowrap;

	font-weight: bold;

	color: #666666;

}



div#structure-marker a {

	color: #333355;

	font-weight: normal;	

}



/* Vertical menus */

/* ---------------------------------------------------------------- */



div#menu-left {

	font-size: 0.70em;

	line-height: 1.1em;

   vertical-align : top;

   margin-top: 18px;

}



/* If image is used instead of menu, position it neat */

div#menu-left img {

	padding-top: 14px;

	padding-left: 30px;

}



/* Menu heading for verical menu */

div#menu-left div.menu-head {

   background-color: #FDFBC7;

	border-top:  1px solid #ccc;

	border-bottom: 1px solid #ccc;

	padding: 3px;

   padding-left: 24px;

   font-weight: bold;

   color: #666;

   height: 14px;

}



/* List for menu levels 3 and 4 */

div#menu-left ul {

   margin-top: 10px;

	list-style: none;

	padding-left: 0px;

	margin-left: 0px;

}



/* Menu level 3 */

div#menu-left ul li {

   /* margin-top: 4px;

   margin-bottom: 2px; */

   padding-left: 14px;

   margin-bottom: 3px;

   margin-left: 10px;

   margin-right: 4px;

   background: transparent url(../images/menu_square.jpg) no-repeat;

}



/* Menu level 4 */

div#menu-left ul li.submenu {

   margin-left: 20px;

   padding-left: 12px;

   margin-top: 0px;

   margin-bottom: 2px;

   padding-top: 0px;

   padding-bottom: 0px;

   font-weight: normal;

   background-image: none;

}



div#menu-left a {

	color: #333;

	text-decoration: none;

   border-top: 1px solid #ccc;

   display: block;

   width: 100%;

   padding-top: 5px;

   padding-bottom: 1px;

}



div#menu-left ul li#menu-top a {

   border: 0;

}



div#menu-left ul li.submenu a {

   border-top: 0px;

   padding-top: 1px;

   padding-bottom: 1px;

   margin: 0;

}



div#menu-left ul li#menu-bottom a {

   /* border-bottom: 1px solid #ccc; */

}



div#menu-left a:hover {

	color: #229;

	text-decoration: underline;

}



/* Class to set selected item in vertical menu, if needed */

div#menu-left ul li.true {

  	font-weight: bold;

   background: transparent url(../images/menu_arrow.jpg) no-repeat;

}



/* Class to set selected item in submenus, if needed */

div#menu-left a.true {

	font-weight: bold;

}



/* Foot elements */

/* ---------------------------------------------------------------------------- */



hr#foot-divider {

}



/* Sorry, Dreamweaver don't handle margins properly in combination with clear :-( */

div#foot-holder {

	margin-top: 3px;

	margin-left: 0px;

	margin-right: 0px;

}

	

td#updated {

	font-size: 0.66em;

	color: #333333;

	text-align: center;

   padding-top: 20px;

   padding-bottom: 6px;

}



td#updated a {

	color: #333366;

}



td#updated.false {

   display: none;

}



div#foot {

   font-size: 0.66em;

   color: #444;

   background: #C9ECE4 url(../images/bg_foot.jpg) no-repeat;

   border-top: 1px solid #333;

   border-bottom: 1px solid #333;

   padding-left: 120px;

   height: 34px;

}



div#foot p {

   margin-top: 10px;

}



div#foot a,

div#foot a:visited {

   text-decoration : none;

	color: #666666;

}



div#foot a:hover {

   text-decoration : underline;

	color: #666666;

}



div#credits {

	font-size: 0.56em;

	color: #ccc;

	text-align: right;

	margin-top: 4px;

	margin-right: 4px;

}



div#credits a,

div#credits a:visited {

   text-decoration : none;

	color: #bbbbbb;

}



div#credits a:hover {

	text-decoration : underline;

}



/* Hide credits when printing */

@media print {

	div#credits {

		display: none;

	}

}



/* End of stylesheet */

/* =============================================================== */