/*
-------------------------------------------------------
Universiteit Gent - Stylesheet for UGent portal
== portal.css ==
[main stylesheet for the UGent portal]
Author: Universiteit Gent, Namahn.com
Layout and css by namahn.com (inspired by layout vanlooveren-gobert.be),  copyright 2005  
Version: 10 August 2005
-------------------------------------------------------
*/

/* === general styling === */
/* set default size to small */
body { margin:0; padding: 0; background-color: #fff; color: #000; }
body, td 
{ 
  font: x-small Verdana, Arial, Helvetica, sans-serif;
  voice-family: "\"}\"";
  voice-family: inherit;
  /*Box Model Hack to accomodate IE5/Win*/
  font-size: small;
}
html>body, html>body td {
/*Be nice to Opera*/
font-size:small;
}

/* set font for headings */
h1, h2, h3 { margin:0; padding:0; }
h1 { font-size: 1.6em; color:#369; line-height: 1.2em; margin-bottom: 10px;} 
h2 { font-size: 1.3em; color:#333;} 
h3 { font-size: 1.1em; color:#333;}


/* hyperlinks, em, strong, default settings form, img  etc. */
a:link { color: #369; text-decoration:none;}
a:visited { color:#369; }
a:hover { color: #69C;}
a:active { color: #69C; }
em { font-weight: bold; font-style: italic; }
strong { font-weight: bold;}
form{ margin:0;}
img { border: 0 none;}
/* add class = right/left to img when you want to align it to the right/left */
img.left { float: left; margin: 0 20px 20px 0; }
img.right { float: right; margin: 0 0 20px 20px; }
/* hides divs - when no css is applied, divs are shown */
.hidden { display: none; }
/* list lay-outs */
ul { list-style-type: square; }
ol { list-style-type: decimal; }
ol.i { list-style-type: lower-roman; }
ol.II { list-style-type: upper-roman; }
ol.a { list-style-type: lower-alpha; }
ol.AA { list-style-type: upper-alpha; }


/* === Styling for content === */
/* content and contentsmall (contentsmall = content with rightboxes) */
#content, #contentsmall { margin: 140px 20px 0 200px; vertical-align: top; padding-top: 0; }
#contentsmall { padding-right: 180px; }
#content h2, #contentsmall h2, #content h3, #contentsmall h3 { margin-bottom: 2px; margin-top:1.4em; }
#content p, #contentsmall p { margin-top: 0; }

#content a, #contentsmall a { text-decoration:underline; }
#content a:visited, #contentsmall a:visited { color:#69C;}
#content a:hover, #contentsmall a:hover { color:#f90; }

/* external link */
#content a.ext, #contentsmall a.ext, #related a.ext { padding-right: 17px; background: transparent url("../img/externesite.gif") no-repeat 100% 50%;}

/* author - "reacties op inhoud" */
.author {font-size: 0.85em; color: #666; font-style: italic; margin: 20px 0; padding: 10px 10px; border: 1px dotted #ccc;}

/* "back-to-top links" */
#topanchor {position:absolute; top:0; left:0; height: 0;}
.top { clear:both; padding-left:15px; background: transparent url(../img/top.gif) left center no-repeat; font-size: 85%; }
#content .top a, #contentsmall .top a {text-decoration:none;}
#content .top a:visited, #contentsmall .top a:visited { color: #369; padding: 0; background: 0 none;}
#content .top a:hover, #contentsmall .top a:hover { color: #69C; }

/* named anchors */
#anchors { margin: 10px 0 20px 0; padding: 0; }
#anchors ul { list-style-type: none; margin: 0; padding: 0; }
#anchors li { margin: 0 0 5px 0; padding: 0; line-height: 1.05em; }


/* === Related info boxes === */
#related { position:absolute; top:140px; right:20px; width:160px; }
#related, .box, .box ul, .box li, .box dd  {margin:0; padding:0;}
.box  { background: #fff url("../img/boxbg.gif") left top repeat-x;  border-top: 1px solid #369; border-bottom: 1px solid #369; }
.box dt { font-weight: bold; color: #369; padding: 4px 5px 0 0.5em; font-size: 0.85em;}
.box a { text-decoration:none;}
.box ul { list-style-type: none; margin: 0 0 10px 0; padding: 0 0 5px 0; }
.box ul li { margin: 0; border: 0; padding: 5px 5px 0 1.5em; text-indent: -1em; font-size: 0.85em; line-height: 1.1em; }
.box ul li a { margin: 0; padding: 0; }
.box li a:visited { color: #369; }
.box li a:hover { color: #69C; }
.box p {font-size: 0.85em; padding: 0 5px 0 0.5em; margin: 5px 0;}
.box-img { background-color:#ECEFF8;border-top: 1px solid #369;border-bottom: 1px solid #369;}
.caption { background: #fff url("../img/boxbgbottom.gif") left bottom repeat-x; font-size: 0.85em; padding: 5px; }
.box, .box-img {margin-bottom: 15px;}

/* === footer === */
#footer { margin: 30px 20px 0 200px; padding-top: 6px; padding-bottom:20px; border-top: 1px solid #369; font-size: 0.85em; clear:both; }
#footersmall { margin: 30px 200px 0 200px; padding-top: 6px; padding-bottom:20px; border-top: 1px solid #369; font-size: 0.85em; clear:both; }
#footer a, #footersmall a {text-decoration:none; }

/* === Top banner === */

/* siteid, with picture and site title */
#siteid { position: absolute; top: 0; left: 0; vertical-align: top; text-align: left; height: 80px; width: 100%; background: #fff url(../img/balkje.gif) left top repeat; z-index: 10; margin: 0; padding: 0;}
#siteid img {position:relative; top:0; left: 200px;}
#siteid a.text {position: absolute; top: 52px; left: 210px; font-size: 1.6em; font-family:Arial, Helvetica, sans-serif; color:#fff; text-decoration:none; }

/* logo */
#logo { position:absolute; top: 45px; left: 0; width:200px; height: 60px; z-index: 20; }

/* utility links */
#utility { font-size: 0.85em; color: #999; position: absolute; top: 5px; right: 20px; vertical-align: top; text-align: right; padding: 0 0 0 200px; z-index: 15;}
#utility a {  text-decoration:none;}

/* search */
#search { position: absolute; top: 28px; right: 20px; z-index: 13;}
a.advanced { font-size: 0.85em; text-decoration:none;}
.searchinput { border:1px solid #369; border-color:#69C #369 #369 #69C; color:#369; padding: 1px 3px; padding-right: 3px; font-family:"Courier New",Courier,Monospace; font-size: 0.85em;  background:#ECEFF8;}
.searchbutton { background:#ddd; padding:0 3px; font:normal 0.85em verdana,sans-serif; color:#369; cursor:pointer;}

/* login - login-act: login box, active and non-active */
#login { position: absolute; top: 98px; right: 20px; z-index: 12;font-size: 0.85em; background:#eceff8 url("../img/sleutel.gif") no-repeat 100% 50% ; border-top: 1px solid #69C; border-bottom: 1px solid #69C; padding: 5px 18px 5px 3px;}
#login-act { position: absolute; top: 98px; right: 20px; z-index: 12;font-size: 0.85em; background:#FEFADD url(../img/ingelogd.gif) no-repeat left center ; background-position: 3px; border-top: 1px solid #69C; border-bottom: 1px solid #69C; padding: 5px 3px 5px 18px;}
#login a, #login-act a{ text-decoration:none;}

/* breadcrumb */
#breadcrumb { position: absolute; top: 110px; left: 200px; vertical-align: top; text-align: left; height: auto; padding: 0 180px 0 0; font-size: 0.85em; color: #999; z-index:30; text-transform:lowercase; }
#breadcrumb a { color: #369; text-decoration: none; }
#breadcrumb a:visited { color: #369; }
#breadcrumb a:hover { color: #69C; }
.br-act {color: #000;}

/* main (primary) navigation: blue tabs */
#mainnav { position: absolute; background-color: #369; top: 77px; left: 196px; right: 0px; z-index: 40; }
#mainnav ul { padding: 0; margin: 0; color: #fff; font-weight: normal; list-style-type: none; }
#mainnav ul li { display: inline; background-color: #369; }
#mainnav ul li a { padding: 0.30em 0.55em; background-color: #369; color: #fff; text-decoration: none; float: left;  border-left: 1px solid #99F; font-size: 0.77em; }
#mainnav ul li.first a { border-left: 1px solid #039; }
#mainnav ul li a:hover { color: #FC0; }
/* add id="active" to li when navigation item is active */
#mainnav ul li#active a {background-color: #69C; font-weight:bold; border-left: 1px solid #99F; }
#mainnav ul li.right { position: absolute; right: 0px; }
#mainnav h3 { height: 0px; }

/* ==== left column: secundary navigation and target-group/quicklinks ===*/

#leftnav { position:absolute; top:140px; left:20px; width:160px; margin: 0; padding:0;  }
#nav, #nav ul, #nav li, #nav dd, #nav li a, .facet, .facet dd, .facet ul, .facet li {margin:0; padding:0;}
#nav {background-color:#ECEFF8; border-left: 1px solid #e1e1e1; border-right: 1px solid #e1e1e1; border-top: 1px solid #e1e1e1;}
#nav dt { background-color: #69C; font-size: 0.85em; font-weight: bold; color: #fff; padding: 5px 5px 5px 8px;}
#nav dl {width:158px;}
#nav ul{ list-style-type: none; line-height:1.1em; height: auto; width:158px;}
#nav li { font-size: 0.88em; border-bottom: 1px solid #e1e1e1; background: #ECEFF8; padding:1px 5px 4px 0; voice-family: "\"}\"";
voice-family: inherit; padding-left:9px;}
#nav li.subnav {margin:0; padding:0; border-bottom: 0;}
#nav li li {font-size: 1em;}
#nav li a { display: block; width: 100%; text-decoration: none; color: #369; text-align: left; }
#nav li a:hover { color: #69C; text-decoration: none; }
#nav li#selected {background: #fc0 url("../img/arrowlevel1.gif") left top no-repeat; }
#nav li.subnav ul {background: #fff;  line-height:1em;}
#nav li.subnav li {padding:1px 5px 3px 10px; border-bottom: 1px dotted #e1e1e1; background: #fff; font-size: x-small; voice-family: "\"}\""; voice-family: inherit; padding-left:20px; font-size:small}
/*Box Model Hack to accomodate IE5/Win: get correct indentation and reset font-size in IE5/Win */
#nav li.subnav li {font-size: 0.82em;}
#nav li.subnav li.lastitem {border-bottom: 1px solid #e1e1e1;}
#nav li.subnav li#selected { background: #fc0 url("../img/arrowlevel2.gif") left top no-repeat;}

.facet  { background:#fff; border-top: 1px solid #69C; border-bottom: 1px solid #69C; padding-bottom: 4px; margin-top: 10px;}
.facet dt { font-size: 0.85em; font-weight: bold; color: #69C; padding: 4px 5px 2px 0.5em;}
.facet ul { list-style-type: none; color: #69C; }
.facet li { font-size: 0.85em; padding: 1px 5px 1px 1.5em; text-indent: -1em; line-height: 1.1em;}	/*padding:1px 5px 1px 9px; */
.facet li a { text-decoration: none; color: #369; }
.facet li a:hover { color: #69C; text-decoration: none; }
/* .facet ul li:before { content: "\00BB \0020"; }   special character as bullet - BUT: only works in Firefox, so not used*/

/* ==== tables ===  */
.ugenttable {margin: 0; padding:0; border-collapse: collapse; border-spacing: 0;}
.ugenttable tr td {text-align: left; border-top: 1px solid #369; padding: 5px 5px 7px 8px; vertical-align:top;}
.ugenttable tr td.center {text-align: center;}
.ugenttable tr.tabelheader td { border-top: 0; background-color: #369; color: #fff; font-weight:bold; border-left: 1px solid #fff;}
.ugenttable tr.subheader td { font-weight:bold; background-color: #F2F5FE; padding-top: 7px; padding-bottom: 10px; text-align: left;}
.ugenttable tr.legende td { border-top: 0; color: #369; background-color: #FFF; font-size: 0.85em;  text-align: left;}
.ugenttable tr.unityheader td { padding-bottom: 4px;}
.ugenttable tr.unity td {border-top: 0;}
.ugenttable tr td.unity-subheader { font-style: italic;}
.ugenttable tr td.unity-indent { padding-left: 16px;}
.ugenttable tr.bottom td { border-bottom: 1px solid #369; padding-bottom:10px;}

/* ==== Forms ==== */
form.bodyform { margin: 0; padding: 10px 0; width: auto;}
.bodyform fieldset { border-color: #000; border-width: 1px 0 0; border-style: solid none none none; padding: 10px; margin: 0; }
.bodyform fieldset legend { font-size: 1.1em; font-weight: bold; color: #000; margin: 0; padding: 0 5px; }
.bodyform input, .bodyform select, .bodyform textarea { font-family: Verdana, Arial, sans-serif; font-size: 100%; color: #000; }
.bodyform textarea { overflow: auto;}
.bodyform div { display: block; width: 354px; margin: 5px 0 0; padding: 1px 3px;}
.bodyform div fieldset { clear:none; border: 1px solid #999; margin: 0 0 0 142px; padding: 8px; width: 188px;}
.bodyform div fieldset legend { font-size: 100%; padding: 0 3px 0 9px;}
.bodyform div label { display: block; float: left; width: 130px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right; }
.bodyform div label.labelCheckbox, .bodyform div label.labelRadio { float: none; display: block; width: 188px; padding: 0; margin: 5px 0; text-align: left;}
.bodyform div input, .bodyform div select, .bodyform div textarea { width: 200px; padding: 1px 3px; margin: 0; }
.bodyform div select { width: 210px;}
.bodyform input.inputCheckbox, .bodyform input.inputRadio {
  display: inline; height: 14px; width: 14px; border-width: 0; padding: 0;}
.bodyform div.submit { width: 354px; text-align:right;}
.bodyform input.inputButton {background-color: #ccc; color: #000; width: auto; padding: 0 6px; float: right; margin: 0 0 0 5px;}
.bodyform div small { display: block; margin: 0 0 5px 142px; padding: 1px 3px; font-size: 85%;}