/* Style Definitions for Vargefaret */
/* standard elements */
#topofpage { /* -enter as the first line after the tag */
margin: 0; /* -use Tilbake til toppen as the link */
}
* {
margin: 0;
padding: 0;
}
a { color: #36C;
TEXT-DECORATION: none;
}
a:hover {
color: #0000FF;
TEXT-DECORATION: none;
}
a:active {
color: #990000;
TEXT-DECORATION: none;
}
body {
background: #4E5D3C url(img/bg.jpg);
color: #444;
font: normal 62.5% "Lucida Sans Unicode",sans-serif;
margin: 0;
}
p,blockquote,ul {margin-bottom: 1.2em;}
h1 {font: normal 1.6em serif;}
h2 {
font: bold 1em Verdana,serif;
margin: 3px 0 1px;
}
h5 {
color: #555;
font: normal 1.4em serif;
padding-left: 22px;
}
ul {margin-left: 1.8em;}
blockquote {
background: url(img/quote.gif) no-repeat;
color: #555;
font: normal 1.4em serif;
padding-left: 22px;
}
blockquote p {padding: 6px;}
/* misc */
.borderwidth42 {width: 42%;
vertical-align: top;}
.borderwidth43 {width: 43%;
vertical-align: top;}
.center {text-align:center}
.center.nonborder {
border-style:none;
text-align:center
}
.nonborder {border-style:none;}
.clearer {clear: both;}
.left {
float: left;
width: auto;}
.left1 {
float: left;
width: 150px;
height: 200px;
}
.left2 {
float: left;
width: 200px;
}
.left3 {
float: left;
width: 300px;
}
.left4 {
float: left;
width: 278px;
}
.right {
float: right;
width: auto;}
.right.nonborder {
float: right;
width: auto;
border-style:none;
}
img.left {margin: 0 18px 6px 0;}
.imagewithmargin { margin-left: 5px; margin-right: 5px; }
.divider {
background: url(img/divider.gif) no-repeat;
height: 20px;
margin: 24px 0;
}
.font3 {font-size: 1.0em;}
.font5 {font-size: 1.5em;}
/* structure */
.container {
background: url(img/bgcontainer.jpg) repeat-y center top;
margin: 0 auto;
width: 736px;
}
.gfx {
background: url(img/gfx.jpg) no-repeat;
float: left;
height: 140px;
margin-top: 12px;
width: 52px;
}
.top {
background: url(img/bgcontent.gif) no-repeat 0 -0%;
float: left;
text-align: center;
width: 632px;
}
.header {
background: #56644A url(img/header.jpg) no-repeat;
color: #FFC;
font-size: 1.4em;
height: 232px;
padding-right: 270px;
}
.header h1 {
font: normal 3.2em serif,sans-serif;
padding: 62px 0 34px 0;
}
.pattern {
background: #334127 url(img/pattern.gif) repeat-x;
clear: both;
height: 12px;
}
/* navigation */
.navigation {margin: 0 24px;}
.navigation a {
color: #6C7151;
font: normal 1.9em serif;
line-height: 50px;
margin: 0 16px;
text-decoration: none;
}
.navigation a:hover,.navigation #selected {
color: #2C3111;
}
/* content */
.content {
background: url(img/bgcontent.gif) no-repeat;
clear: both;
font-size: 1.2em;
margin: 0 52px;
padding: 0 38px 12px;
}
.content .spacer {
height: 42px;
}
/* content item */
.item {clear: both;}
.item img {border: 0;} /* used to be ".item img {border: 1px dashed #8A6;}" */
.item .title {
color: #445044;
font: normal 2em serif;
}
.item .title:first-letter {
display: inline-block;
text-align: center;
float: none;
width: auto;
font-size: 2.4em;
}
.item .metadata {
color: #666;
font-size: 0.9em;
float: left;
width: auto;
padding: 0 0 6px 4px;
}
.item .body {
clear: both;
}
/* content varitem */
.item {clear: both;}
.item .vartitle {
color: #445044;
font: normal 2em serif;
}
.item .vartitle:first-letter {
display: block;
/* float: left; */
font-size: 2.4em;
}
.item .metadata {
color: #666;
font-size: 0.9em;
float: left;
width: auto;
padding: 0 0 6px 4px;
}
/* For links on dark background */
a.lightlink:link, a.lightlink:visited {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
a.lightlink:hover, a.lightlink:active {
color: #FFCC33;
text-decoration: none;
}
/* For white-only links on dark background */
a.lightlink2:link, a.lightlink2:visited {
font-family: Arial, Helvetica, sans-serif;
color: #FFFFFF;
text-decoration: none;
}
a.lightlink2:hover, a.lightlink2:active {
color: #FFFFFF;
text-decoration: none;
}
/* For white background */
a.lightlink3:link, a.lightlink3:visited {
font-family: Arial, Helvetica, sans-serif;
color: #000000;
text-decoration: none;
}
a.lightlink3:hover, a.lightlink3:active {
color: #FFCC33;
text-decoration: none;
}
/* tableback */
.tableback {
background: url('img/tableback.gif') no-repeat;
color: #FFFFFF;
height: 30px;
text-align: center;
}
/* outdated liks */
.outdat { color: #36C;
TEXT-DECORATION: none;
}
/* tooltip */
a.tooltip{
position:relative; /*this is the key*/
z-index:24; background-color:transparent;
color:#36C;
text-decoration:none;
}
a.tooltip:hover{background-color:transparent}
a.tooltip span{display: none}
a.tooltip:hover span{ /*the span will display just on :hover state*/
display:block;
position:absolute;
top:16px;
left:0em;
width:100px; /*størrelse (bredden) på tooltip-boksen*/
border:1px solid #666666;
background-color:#f5f5dc; /*bakgrunnsfargen i tooltip-boksen*/
color:#333333;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 13px;
font-weight: normal;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 5px;
}
div.tooltipbox_content span {width:650px;}
div.tooltipbox_content img {vertical-align:middle;}
div.tooltipbox_content span label {
float: left;
text-align:right;
padding-right:10px;
padding:2px;
margin-top:5px;
width: 320px;
color:#3b627e;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;}
#perp {text-align:left; padding-right:200px;}
#sub {text-align:right; padding-right:200px; margin-bottom:5px;}
/* squarebutton */
a.squarebutton{
background: transparent url('img/square-green-left.gif') no-repeat top left;
display: block;
/*float: left;*/
font: normal 12px Arial; /* Change 12px as desired */
line-height: 15px; /* This value + 4px + 4px (top and bottom padding of SPAN) must equal height of button background (default is 23px) */
height: 23px; /* Height of button background height */
padding-left: 9px; /* Width of left menu image */
text-decoration: none;
}
a:link.squarebutton, a:visited.squarebutton, a:active.squarebutton{
color: #494949; /*button text color*/
}
a.squarebutton span{
background: transparent url('img/square-green-right.gif') no-repeat top right;
display: block;
padding: 4px 9px 4px 0; /*Set 9px below to match value of 'padding-left' value above*/
}
a.squarebutton:hover{ /* Hover state CSS */
background-position: bottom left;
}
a.squarebutton:hover span{ /* Hover state CSS */
background-position: bottom right;
color: black;
}
.buttonwrapper{ /* Container you can use to surround a CSS button to clear float */
overflow: hidden;
width: 100%;
text-align: center;
}
/* UsersOnline */
.uson {
text-align: center;
}
/* footer */
.footer {
background: url(img/bgfooter.gif) no-repeat;
color: #666;
font-size: 1.0em;
line-height: 41px;
margin: 0 auto;
text-align: center;
width: 632px;
}
.footer a {
color: #666;
text-decoration: none;
}
.footer a:hover {
color: #333;
text-decoration: underline;
}
/* sdmenu */
div.sdmenu {
width: 150px;
font-family: Arial, sans-serif;
font-size: 12px;
padding-bottom: 10px;
background: url(img/sdbottom.gif) no-repeat right bottom;
color: #fff;
}
div.sdmenu div {
background: url(img/sdtitle.gif) repeat-x;
overflow: hidden;
}
div.sdmenu div:first-child {
background: url(img/sdtoptitle.gif) no-repeat;
}
div.sdmenu div.collapsed {
height: 25px;
}
div.sdmenu div span {
display: block;
padding: 5px 25px;
font-weight: bold;
color: white;
background: url(img/sdexpanded.gif) no-repeat 10px center;
cursor: default;
border-bottom: 1px solid #ddd;
}
div.sdmenu div.collapsed span {
background-image: url(img/sdcollapsed.gif);
}
div.sdmenu div a {
padding: 5px 10px;
background: #eee;
display: block;
border-bottom: 1px solid #ddd;
color: #066;
}
div.sdmenu div a.current {
background : #ccc;
}
div.sdmenu div a:hover {
background : #066 url(img/sdlinkarrow.gif) no-repeat right center;
color: #fff;
text-decoration: none;
}
/* Popup Image Viewer (thumbnail) */
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #ffffe0;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
/* Feedbackform */
.feedbackform{
padding: 5px;
}
div.fieldwrapper{ /*field row DIV (includes two columns- Styled label column and 'thefield' column)*/
width: 550px; /*width of form rows*/
overflow: hidden;
padding: 5px 0;
}
div.fieldwrapper label.styled{ /* label elements that should be styled (left column within fieldwrapper DIV) */
float: left;
width: 150px; /*width of label (left column)*/
text-transform: uppercase;
border-bottom: 1px solid red;
margin-right: 15px; /*spacing with right column*/
}
div.fieldwrapper div.thefield{ /* DIV that wraps around the actual form fields (right column within fieldwrapper DIV) */
float: left;
margin-bottom: 10px; /* space following the field */
}
div.fieldwrapper div.thefield input[type="text"]{ /* style for INPUT type="text" fields. Has no effect in IE7 or below! */
width: 250px;
}
div.fieldwrapper div.thefield textarea{ /* style for TEXTAREA fields. */
width: 300px;
height: 150px;
}
div.buttonsdiv{ /*div that wraps around the submit/reset buttons*/
margin-top: 5px; /*space above buttonsdiv*/
}
div.buttonsdiv input{ /* style for INPUT fields within 'buttonsdiv'. Assumed to be form buttons. */
width: 80px;
background: #e1dfe0;
}
/* ...by Ørjan Karlseng Albriktsen */