/*
CSS-contains a few css3 rules (rounded corners and a few gradients) that are browser specific and doesn´t work in IE. That is ok with the customer.

Main colors:
blue: 063e69
link blue: 0d7cd1 
yellow: fdd04f
*/

/* Reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;}body {line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after {content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}

.container_12 {margin-left: auto; margin-right: auto; width: 960px;}

/* =Grid >> Global
--------------------------------------------------------------------------------*/
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_6_pr20, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
	display: inline; float: left; position:relative; margin-left: 10px;	margin-right: 10px;}

/* =Grid >> Children (Alpha ~ First, Omega ~ Last)
--------------------------------------------------------------------------------*/
.alpha {margin-left: 0;}
.omega {margin-right: 0;}

/* =Grid >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .grid_1 {width: 60px;}
.container_12 .grid_2 {width: 140px;}
.container_12 .grid_3 {width: 220px;}
.container_12 .grid_4 {width: 300px;}
.container_12 .grid_5 {width: 380px;}
.container_12 .grid_6 {width: 460px;}
.container_12 .grid_6_pr20 {width: 440px; padding-right: 20px;}
.container_12 .grid_7 {width: 540px;}
.container_12 .grid_8 {width: 620px;}
.container_12 .grid_9 {width: 700px;}
.container_12 .grid_10 {width: 780px;}
.container_12 .grid_11 {width: 860px;}
.container_12 .grid_12 {width: 940px;}

/* =Prefix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .prefix_1 {padding-left: 80px;}
.container_12 .prefix_2 {padding-left: 160px;}
.container_12 .prefix_3 {padding-left: 240px;}
.container_12 .prefix_4 {padding-left: 320px;}
.container_12 .prefix_5 {padding-left: 400px;}
.container_12 .prefix_6 {padding-left: 480px;}
.container_12 .prefix_7 {padding-left: 560px;}
.container_12 .prefix_8 {padding-left: 640px;}
.container_12 .prefix_9 {padding-left: 720px;}
.container_12 .prefix_10 {padding-left: 800px;}
.container_12 .prefix_11 {padding-left: 880px;}

/* =Suffix Extra Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .suffix_1 {padding-right: 80px;}
.container_12 .suffix_2 {padding-right: 160px;}
.container_12 .suffix_3 {padding-right: 240px;}
.container_12 .suffix_4 {padding-right: 320px;}
.container_12 .suffix_5 {padding-right: 400px;}
.container_12 .suffix_6 {padding-right: 480px;}
.container_12 .suffix_7 {padding-right: 560px;}
.container_12 .suffix_8 {padding-right: 640px;}
.container_12 .suffix_9 {padding-right: 720px;}
.container_12 .suffix_10 {padding-right: 800px;}
.container_12 .suffix_11 {padding-right: 880px;}

/* `Push Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .push_1 {left: 80px;}
.container_12 .push_2 {left: 160px;}
.container_12 .push_3 {left: 240px;}
.container_12 .push_4 {left: 320px;}
.container_12 .push_5 {left: 400px;}
.container_12 .push_6 {left: 480px;}
.container_12 .push_7 {left: 560px;}
.container_12 .push_8 {left: 640px;}
.container_12 .push_9 {left: 720px;}
.container_12 .push_10 {left: 800px;}
.container_12 .push_11 {left: 880px;}

/* `Pull Space >> 12 Columns
--------------------------------------------------------------------------------*/
.container_12 .pull_1 {left: -80px;}
.container_12 .pull_2 {left: -160px;}
.container_12 .pull_3 {left: -240px;}
.container_12 .pull_4 {left: -320px;}
.container_12 .pull_5 {left: -400px;}
.container_12 .pull_6 {left: -480px;}
.container_12 .pull_7 {left: -560px;}
.container_12 .pull_8 {left: -640px;}
.container_12 .pull_9 {left: -720px;}
.container_12 .pull_10 {left: -800px;}
.container_12 .pull_11 {left: -880px;}

/* common paddings */
.pt5 {padding-top: 5px;} .pt10 {padding-top: 10px;}
.pb5px {padding-bottom: 5px;} .pb10px {padding-bottom: 10px;} .pb20px {padding-bottom: 20px;}

/* common margins */
.mr20px {margin-right: 20px;} .mr50px {margin-right: 50px;}
.mb5px {margin-bottom: 5px;} .mb20px {margin-bottom: 20px;}
/* `Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
.clearer {clear: both; display: block; overflow: hidden; visibility: hidden; width: 0; height: 0;}

/* Clearfix */
.clearfix:after, form.jqtransformdone div.rowElem:after, .genForm .field:after, .choiceList:after, .oneChoice:after, .article:after {clear: both; content:' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0;}
.clearfix, form.jqtransformdone div.rowElem, .genForm .field, .choiceList, .oneChoice, .article {display: inline-block;}
* html .clearfix, * html form.jqtransformdone div.rowElem, * html .genForm .field, * html .choiceList, * html .oneChoice, * html .article {height: 1%;}
.clearfix, form.jqtransformdone div.rowElem, .genForm .field, .choiceList, .oneChoice, .article {display: block;}

.oclear {height: auto !important; height: 1%; min-height: 1%; overflow: hidden;}

a:link, a:visited {color: #0d7cd1; text-decoration: none;}
a:hover {color: #0d7cd1;}
a:active {}

a * {cursor: pointer;}

.floatLeft {display: block; float: left;}
.floatRight {display: block; float: right;}

.txtRight {text-align: right;}
.txtLeft {text-align: right;}

.row {width: 100%; float: left;}

h1 {font: normal 34px/36px Arial, Helvetica, sans-serif; margin: 0 0 10px;}
h2 {font: normal 30px/32px Arial, Helvetica, sans-serif; margin: 0 0 10px; letter-spacing: -1px;}
h3 {font: normal 18px/20px Arial, Helvetica, sans-serif; margin: 0 0 12px;}

p {margin: 0 0 1em;}

ul, ol {margin: 0 0 1.4em;}

input[type="submit"]:hover {cursor: pointer;}

.hide {display: none;}
.hide input {width: 150px;}

html, body, #canvas {height: 100%;}
body {font: 62.5%/1em Arial, Helvetica, sans-serif; background: #EEE url(../images/design/bodyGradient.jpg) repeat-x; color: #474747;}
#canvas {font: normal 1.4em/1.3em Arial, Helvetica, sans-serif; background: url(../images/design/canvasBG.png) repeat-y 50% 0; height: 100%;}
body > #canvas {height: auto; min-height: 100%;}

#totalWrapper {background: #FFF; padding: 0 10px; width: 960px; margin: 0 auto;}
#topBar {background: #063e69; color: #FFF; margin: 0 -10px; padding: 0 10px; width: 960px; position: relative; z-index: 100;}

/* Login form */
#loginForm {position: absolute; top: 0; right: 6px; width: 300px; padding: 0 14px;}
#loginForm .desc {display: block; margin: 0 -14px; padding: 0 34px; height: 30px; line-height: 30px; color: #fdd04f; background: #042e4f url(../images/design/loginTop.png) no-repeat; font-weight: normal;}
.formContent {padding: 10px 10px 25px; background: #d49e1d url(../images/design/login_bgBox.png) no-repeat 0 100%; width: 280px; position: relative;}
.formContent label {display: none;}
.formContent .UID {width: 190px; height: 25px; line-height: 25px; float: left; margin: 0 0 5px;}
.formContent .PWD {width: 190px; height: 25px; line-height: 25px; float: left; margin: 0;}
.formContent .userInput {width: 170px; height: 25px; border: none; line-height: 25px; padding: 0 10px; background: #FFF url(../images/design/loginInput.png) no-repeat; color: #063e69;}
.formContent .userInput:focus {background-position: 0 -25px;}
a.forgotPWD {position: absolute; bottom: 0; left: 10px; background: #063e69 url(../images/design/login_forgotten.png) no-repeat; width: 190px; height: 20px; line-height: 19px; text-align: center; color: #FFF; font-size: 11px;}
.formContent .loginBTN {width: 80px; height: 60px; position: absolute; top: 10px; right: 10px; background: #fdd04f; z-index: 10;}
.formContent .loginBTN input {width: 80px; height: 60px; border: none; background: url(../images/design/loginBtn.png) no-repeat; font-size: 0;}
.formContent .loginBTN input:hover {background-position: 0 -60px;}
.LoggedIn .formContent .loginBTN input {background: url(../images/design/logoutBtn.png) no-repeat;}
.LoggedIn .formContent .loginBTN input:hover {background-position: 0 -60px;}
.logInfo {display: block; height: 25px; line-height: 25px; background: #FFF; color: #063e69; padding: 0 10px; font-size: 13px; overflow: hidden;}
.UID .logInfo {background: #FFF; font-size: 13px; overflow: hidden;}

/* Header */
#header {height: 60px; padding: 20px 0; position: relative;}
#header h1 {height: 60px; position: absolute; left: 10px;}
#subHeaderBar {background: #063e69; color: #FFF; margin: 0 -10px; padding: 0 10px; width: 960px; position: relative;}
#quickSearch {height: 30px; line-height: 30px; float: right; margin: 0 10px 0 0; width: 300px;}
#quickSearch .inputString {height: 20px; width: 240px; border: none; display: block; float: left; line-height: 20px; padding: 0 5px; margin: 5px 0 0; background: #FFF;}
#quickSearch .searchBtn {height: 20px; width: 50px; border: none; display: block; float: left; background: #CCC; line-height: 20px; padding: 0; margin: 5px 0 0;}

.colWrapper {width: 100%; padding: 20px 0; position: relative;}

/* Footer */
#footer {background: #063e69; color: #FFF; margin: 0 -10px; padding: 20px; width: 940px; position: relative;}
.footerInfo {background: url(../images/design/footerDivider.png) repeat-x 0 100%; padding: 0 0 22px;  margin: 0 0 20px; width: 100%; text-align: center;}
.footerLogo {display: block; float: right;}


/* Just a testbox to place various info in grid */
.commonBox {background: #EEE; margin: 0 0 20px;}

/* Article */
.article {padding: 0 0 20px; margin: 0 0 20px;}
.article .intro {font: normal 16px/21px Arial, Helvetica, sans-serif;}
.article img.floatLeft {margin: 3px 20px 20px 0;}
.article img.floatRight {margin: 3px 0 20px 20px;}
.article h2 {font: normal 22px/24px Arial, Helvetica, sans-serif;}
.article p + h2, .article p + h3 {padding-top: 5px;}

/* A stack of boxes containing for exmple teaserinfo related to article, used in the firstPage.htm for instance */
.boxList {padding: 0 0 30px;}
.box {padding: 0; margin-bottom: 10px; border-bottom: 1px solid #CCC;}
.box img.floatLeft {margin: 3px 20px 10px 0;}
.box a.readMore {padding: 0 0 0 5px;}
.box a.readMore:hover {text-decoration: underline;}

/* Layout block to split boxlist into 2 columns, not used at this point but check examples.htm to see example */
.boxRow {margin: 0 0 10px; border-bottom: 1px solid #CCC;}
.boxRow .box {display: block; float: left; margin-bottom:0; border: none;}
.boxRow .b5050 {width: 300px;}
.boxRow .b5050 h2 {font: normal 22px/24px Arial, Helvetica, sans-serif;}

/* General horizontal menu, used in toåbar and in subheader */
.horizontalMenu {display: block; float: left; border-left: 1px solid #FFF; margin: 0 0 0 10px;}
#subHeaderBar .horizontalMenu {width: 620px;}
.horizontalMenu li {display: block; float: left;}
.horizontalMenu li a {display: block; float: left; height: 30px; line-height: 30px; padding: 0 20px; color: #FFF; border-right: 1px solid #FFF;}
.horizontalMenu li.selected a, .horizontalMenu li a:hover {background: #031f34;}

/* General vertical menu, used in left column navigation */
.verticalMenu {display: block; margin-bottom: 10px; background: #063e69; font-size: 12px;}
.verticalMenu li {display: block;}
.verticalMenu li a {display: block; padding: 3px 5px; border-bottom: 1px solid #FFF; color: #FFF; word-wrap:break-word;}
.verticalMenu li.selected a, .verticalMenu li a:hover {background: #031f34;}

/* General table for lists, tr-elements may include classes warning or expired to indicate certificats status */
.listTable {clear: both; width: 100%; text-align: left; margin: 0 0 10px; font-size: 12px;}
.listTable thead th {border: 1px solid #1A3745; border-right: 1px solid #5f737d; padding: 4px; background: #1A3745; color: #FFF; text-align: left;
background-image: -moz-linear-gradient(top, #1c4357, #1A3745);  /*FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #1c4357),color-stop(1, #1A3745)); /* Saf4+, Chrome */}
.listTable thead th span {display: block; background: url(../images/tableSorterArrows.png) no-repeat 100% -27px; padding-right: 14px;}
.listTable thead th.edit span {padding-right: 0;}
.listTable thead th.headerSortDown span {display: block; background: url(../images/tableSorterArrows.png) no-repeat 100% 4px;}
.listTable thead th.headerSortUp span {display: block; background: url(../images/tableSorterArrows.png) no-repeat 100% -63px;}
.listTable thead th.delete span, .listTable thead th.edit span {background: none;}
.listTable td {border: 1px solid #CCC; padding: 4px; background: #FFF; vertical-align: middle;}
.listTable .even td {background: #f4f4f4;}
.listTable tr:hover td {background: #F3F3F3;}
.listTable tr.even:hover td {background: #EEE;}
.listTable tr.expired td {background: #c21b1b; color: #FFF; border: 1px solid #d91e1e;}
.listTable tr.expired:hover td {background: #cc1d1d; color: #FFF; border: 1px solid #d91e1e;}
.listTable tr.warning td {background: #ffc214; color: #1c4357; border: 1px solid #cc9a10;}
.listTable tr.warning:hover td {background: #ffc622;}
.listTable .delete {text-align: center; width: 40px; text-indent: -9999px;}
.listTable .delete a, .listTable .delete input {display: block; height: 18px; width: 16px; text-indent: -9999px; background: url(../images/icon_delete.png) no-repeat 0 2px; margin: 0 auto; border: none; padding: 0;}
.listTable input.delete {background-position: 0 3px;}
.listTable .edit {width: 60px; text-align: center;}
.listTable .edit a {display: block; height: 18px; width: 16px; text-indent: -9999px; background: url(../images/icon_edit.png) no-repeat 0 1px; margin: 0 auto;}
a.popUpFile {display: block; width: 16px; height: 16px; margin: 0 auto; text-indent: -9999px; background: url(../images/icon_images.png) no-repeat 50% 50%;}
a.popUpFilePdf {display: block; width: 16px; height: 16px; margin: 0 auto; text-indent: -9999px; background: url(../images/icon_images.png) no-repeat 50% 50%;}

/* wrappers for the general list, additional classes expired and warning may be included to provide boxes of certain status. See examples.htm for examples */
.listWrapper {overflow: auto;}
.listbox {background: #eceab0; padding: 10px; margin: 0 0 10px; color: #1c4357; -moz-border-radius: 4px; /* FF */ -webkit-border-radius: 4px; /* Saf3+, Chrome */ border-radius: 4px; /* Opera 10.5, IE 9 */}
.listbox h3 {}
.listMore {width: 100%; overflow: hidden; text-align: right; padding: 8px 0 0;}
.listTable + .listMore {padding: 0;}
.listbox a.listBtn, a.listBtn {background: #1A3745; color: #d2d9dd; display: block; float: right; margin-left: 4px; padding: 4px 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px; /* Saf3+, Chrome */ border-radius: 4px; /* Opera 10.5, IE 9 */}
.listTable a.edit_certificate {background:url(../images/icon_edit.png) no-repeat; display:block; height:18px; margin:0 auto; text-indent:-9999px; width:16px; padding: 0; -moz-border-radius: 0; -webkit-border-radius: 0; /* Saf3+, Chrome */ border-radius: 0; float: none;} 
.listbox a.listBtn:hover, a.listBtn:hover {color: #FFF;}
.expired a.listBtn {background: #660e0e;}
.showall a.listBtn {background: #226614;}
.showall a.listBtn {background: #226614;}
.listbox a.toggle {background: #1A3745 url(../images/simpleArrows_white.png) no-repeat 100% -32px; padding: 4px 24px 4px 8px;}
.listbox a.hideOverflow {background: #1A3745 url(../images/simpleArrows_white.png) no-repeat 100% 11px; padding: 4px 24px 4px 8px;}
.expired a.toggle {background: #660e0e url(../images/simpleArrows_white.png) no-repeat 100% -32px;}
.expired a.hideOverflow {background: #660e0e url(../images/simpleArrows_white.png) no-repeat 100% 11px;}
.showall a.toggle {background: #226614 url(../images/simpleArrows_white.png) no-repeat 100% -32px;}
.showall a.hideOverflow {background: #226614 url(../images/simpleArrows_white.png) no-repeat 100% -11px;}
.expired {background: #c21b1b;}
.expired {color: #FFF;}
.expired a {color: #e8d9d9;}
.expired a:hover {color: #FFF;}
.expired td {background: #cc1d1d; border: 1px solid #d91e1e;}
.expired .even td {background: #b81a1a;}
.expired tr:hover td, .expired tr.even:hover td {background: #b01919;}
.warning {background: #ffc214;}
.warning, .warning a {color: #063e69;}
.warning a:hover {color: #10222b;}
.warning td {background: #ffcf4c; border: 1px solid #ffd561;}
.warning .even td {background: #ffc933;}
.warning tr:hover td, .warning tr.even:hover td {background: #ffbf0f;}
.showall {background: #EEE;}
.showall {color: #2B801A;}
.showall a {color: #2b801a;}
.showall a:hover {color: #10222b;}
.searchResult {padding: 0 0 20px;}

/* Generic form rules, see examples.htm for examples */
.genForm .field {margin-bottom: 8px; clear: both;}
.genForm .pl150 {padding-left: 150px;} .genForm .pl200 {padding-left: 200px;}
.genForm .floatLeft {clear: none;}
.genForm .floatRight {clear: none;}
.genForm div.w33per {width: 33%;}
.genForm div.w50per {width: 50%;}
.genForm div.divide {border-top: 1px solid #DDD; padding-top: 8px;}
.genForm div.optTransfer.divide {padding-top: 16px;}
.genForm label {display: block; float: left; width: 150px; padding: 0 10px 0 0;}
.genForm .error label, .genForm .error input {color: #bd1111;} .genForm .error label {text-decoration: underline;}
.genForm div.txt label {padding-top: 3px;}
label.w50 {width: 40px;} label.w80 {width: 70px;} label.w100 {width: 90px;} label.w150 {width: 140px;} label.w200 {width: 190px;} label.w250 {width: 240px;} label.w300 {width: 290px;} label.w350 {width: 340px;}
.oneChoice label {width: auto;}
.oneChoice label.w100 {width: 90px;} .oneChoice label.w150 {width: 140px;} .oneChoice label.w200 {width: 190px;} .oneChoice label.w250 {width: 240px;} .oneChoice label.w300 {width: 290px;}
.genForm label.preField {float: none; padding: 0 0 4px; width: auto; clear: both;}
.genForm input {display: block; float: left;}
.genForm input.floatRight {float: right; margin-right: 0; margin-left: 4px;}
input.txt {height: 24px; line-height: 24px; background: #EEE url(../images/formSprite.png) no-repeat 0 -180px; border: none; padding: 0 8px; width: 184px; margin-right: 10px;}
input.txt:focus {background-position: 0 -210px;}
.genForm input.w50 {width: 34px; background-position: 0 0;}
.genForm input.w50:focus {background-position: 0 -30px;}
.genForm input.w100 {width: 84px; background-position: 0 -60px;}
.genForm input.w100:focus {background-position: 0 -90px;}
.genForm input.w150 {width: 134px; background-position: 0 -120px;}
.genForm input.w150:focus {background-position: 0 -150px;}
.genForm input.w200 {width: 184px; background-position: 0 -180px;}
.genForm input.w200:focus {background-position: 0 -210px;}
.genForm input.w250 {width: 234px; background-position: 0 -240px;}
.genForm input.w250:focus {background-position: 0 -270px;}
.genForm input.w300 {width: 284px; background-position: 0 -300px;}
.genForm input.w300:focus {background-position: 0 -330px;}
.genForm input.w350 {width: 334px; background-position: 0 -360px;}
.genForm input.w350:focus {background-position: 0 -390px;}
.genForm input.w400 {width: 384px; background-position: 0 -420px;}
.genForm input.w400:focus {background-position: 0 -450px;}
.genForm input.w450 {width: 434px; background-position: 0 -480px;}
.genForm input.w450:focus {background-position: 0 -510px;}
.genForm textarea {width: 184px; height: 84px; padding: 8px; display: block; float: left; background: #EEE url(../images/formSprite.png) no-repeat -420px -220px; border: none; font: normal 14px/18px Arial, Helvetica, sans-serif; overflow: auto;}
.genForm textarea:focus {background-position: -420px -330px;}
.genForm textarea.w300 {width: 284px; background-position: -320px -0px;}
.genForm textarea.w300:focus {background-position: -320px -110px;}
span.oneChoice {float: left; padding: 0 10px 4px 0;}
.genForm span.clear {float: none; clear: both;}
.genForm div.rdo, .genForm div.chk {padding: 0 0 4px;}
.genForm input.rdo, .genForm input.chk {margin: 2px 4px 0 0;}
.genForm span.required {display: block; float: left; width: 16px; height: 16px; background: url(../images/icon_required.png) no-repeat; text-indent: -9999px; margin: 4px 4px 0 4px;}
.genForm a.calendar {display: block; float: left; width: 16px; height: 16px; background: url(../images/icon_calendar.png) no-repeat; text-indent: -9999px; margin: 4px 4px 0 4px;}
.genForm span.error {display: block; float: left; width: 16px; height: 16px; background: url(../images/icon_error.png) no-repeat; text-indent: -9999px; margin: 4px 4px 0 4px;}
.genForm select {display: block; float:left; width: 200px;}
.genForm select.w300 {width: 300px;}
input.genBtn {height: 24px; font: normal 14px Arial, Helvetica, sans-serif; color: #DDD; background: #666; border: none; padding: 0 8px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; border: 1px solid #262626; margin-right: 5px; opacity: .95; text-shadow: 0 1px 0 #111;}
input.genBtn:hover {color: #FFF; opacity: 1;}
input.btn_red {background: #c21b1b url(../images/btn_glossy_red.png) repeat-x 0 50%; border: 1px solid #821212;}
input.btn_blue {background: #063e69 url(../images/btn_glossy_blue.png) repeat-x 0 50%; border: 1px solid #021829;}
input.btn_grey {background: #666 url(../images/btn_glossy_grey.png) repeat-x 0 50%; border: 1px solid #262626;}
input.btn_gold {background: #ffc214 url(../images/btn_glossy_gold.png) repeat-x 0 50%; border: 1px solid #bf900f; color: #222;text-shadow: 0 1px 0 #CCC;}
input.btn_gold:hover {color: #000;}
input.btn_green {background: #2B801A url(../images/btn_glossy_green.png) repeat-x 0 50%; border: 1px solid #15400d;}
input.smBtn {height: 20px; font: normal 12px/20px Arial, Helvetica, sans-serif; line-height: 20px; padding: 0 4px;}
input.medBtn {height: 32px; font: normal 16px/32px Arial, Helvetica, sans-serif; line-height: 32px; padding: 0 10px;}
input.bigBtn {height: 36px; font: normal 20px/36px Arial, Helvetica, sans-serif; line-height: 36px; padding: 0 14px;}

/* Option transfer */
.genForm .optTransfer {margin: 0 0 20px;}
.optTransTable {width: 100%; vertical-align: top; clear: both;}
.optTransTable th {border: 1px solid #1A3745; border-right: 1px solid #5f737d; padding: 4px; background: #1A3745; color: #FFF; text-align: left;
background-image: -moz-linear-gradient(top, #1c4357, #1A3745);  /*FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #1c4357),color-stop(1, #1A3745));}
.optTransTable td {width: 50%; vertical-align: top; padding: 0; border: 1px solid #c0c7cc;}
.optTransTable th.transfer {text-align: center;}
.optTransTable td.transfer {width: 100px; padding: 0 10px; text-align: center; vertical-align: middle;}
.optTransTable td.transfer .field {width: 80px; height: 50px; margin: 0; line-height: 50px;}
a.selTransBtn {display: inline-block; text-decoration: none; background: #063E69; color: #FFF; margin: 9px 2px 0; clear:both; width: 32px; height: 32px; overflow: hidden; font-size: 12px; position: relative;}
a.selTransBtn span {position: absolute; width: 32px; height: 32px; top: 0; left: 0; z-index: 10; background: url(../images/transferBtns.png) no-repeat;}
a.selTransBtn:hover span {background-position: 0 -32px;;}
a.addAll span {background-position: -32px 0;}
a.addAll:hover span {background-position: -32px -32px;}
a.remove span {background-position: -64px 0;}
a.remove:hover span {background-position: -64px -32px;}
a.removeAll span {background-position: -96px 0;}
a.removeAll:hover span {background-position: -96px -32px;}
.optTransTable select {width: 100%; height: 100px; border: none; background: #f5f6f7; overflow: auto; color: #474747;}
#searchText, #searchText2 {margin: 0; padding: 3px 0 0 55px;}
.optTransfer .hidden{display:none;}
.optTransfer .added{color:#CCC; display: none;}
#select2 .added, #select4 .added, #select6 .added {display: block; color: #000;}

.greyBox {background: #EEE; padding: 10px;}

/* Treeview, see example.htm for examples */
.treeview, .treeview ul {padding: 0; margin: 0;	list-style: none;}
.treeview ul {background: #FFF;	margin-top: 4px; clear: both;}
ul#browser {padding: 0;}
.treeview .hitarea {background: url(../images/treeview-default.gif) -64px -25px no-repeat; height: 16px; width: 20px; margin-left: -20px; float: left; cursor: pointer;}
/* fix for IE6 */
* html .hitarea {display: inline; float:none;}
.treeview li {margin: 0; padding: 3px 0 2px 20px; height: auto !important; height: 1%; min-height: 1%; overflow: hidden;}
.treeview li.root {padding: 3px 0 3px 0;}
.treeview li span {display: block; float: left;}
.treeview li.root > span {padding: 0 0 0 20px; color: #060c7e;}
.treeview a.selected {/*background-color: #eee;*/}
#treecontrol { margin: 1em 0; display: none; }
.treeview .hover { color: red; cursor: pointer; }
.treeview li { background: url(../images/treeview-default-line.gif) 1px 0 no-repeat; }
.treeview li.collapsable, .treeview li.expandable { background-position: 1px -175px; }
.treeview .expandable-hitarea { background-position: -80px -3px; }
.treeview li.last { background-position: 1px -1765px }
.treeview li.lastCollapsable, .treeview li.lastExpandable { background-image: url(../images/treeview-default.gif); }  
.treeview li.lastCollapsable {background-position: 0 -111px }
.treeview li.lastExpandable {background-position: -32px -67px }
.treeview li.root {background: url(../images/iconRoot.gif) no-repeat 0 3px;}
.treeview div.lastCollapsable-hitarea, .treeview div.lastExpandable-hitarea { background-position: 0; }
.treeview-red li { background-image: url(../images/treeview-red-line.gif); }
.treeview-red .hitarea, .treeview-red li.lastCollapsable, .treeview-red li.lastExpandable { background-image: url(../images/treeview-red.gif); } 
.treeview-black li { background-image: url(../images/treeview-black-line.gif); }
.treeview-black .hitarea, .treeview-black li.lastCollapsable, .treeview-black li.lastExpandable { background-image: url(../images/treeview-black.gif); }  
.treeview-gray li { background-image: url(../images/treeview-gray-line.gif); }
.treeview-gray .hitarea, .treeview-gray li.lastCollapsable, .treeview-gray li.lastExpandable { background-image: url(../images/treeview-gray.gif); } 
.treeview-famfamfam li { background-image: url(../images/treeview-famfamfam-line.gif); }
.treeview-famfamfam .hitarea, .treeview-famfamfam li.lastCollapsable, .treeview-famfamfam li.lastExpandable { background-image: url(../images/treeview-famfamfam.gif); } 
.filetree li { padding: 3px 0 2px 20px;}
.filetree span.folder, .filetree span.file, .filetree span.styrkort { padding: 1px 0 1px 20px; display: block; }
.filetree span.folder { background: url(../images/folder.gif) 0 2px no-repeat; }
.filetree span.user, .filetree span.file, .filetree span.styrkort { padding: 1px 0 1px 20px; display: block; }
.filetree span.user { background: url(../images/design/personal.png) 0 2px no-repeat; }
.filetree li.expandable span.folder { background: url(../images/folder-closed.gif) 0 2px no-repeat; }
.filetree span.file { background: url(../images/file.gif) 0 2px no-repeat; }
.filetree span.styrkort { background: url(../images/iconStyrkort.gif) 0 2px no-repeat; }
.filetree li strong {display: inline-block; height: 16px; line-height: 16px; background: url(../images/treeViewBtn.png) no-repeat; padding: 0 0 0 8px;}
.filetree li em, .filetree li a {/*display: inline-block;*/ display: block; height: 16px; line-height: 16px; background: url(../images/treeViewBtn.png) no-repeat 100% -16px; padding: 0 8px 0 0; font-size: 11px; overflow:hidden; font-style: normal;}
.filetree li span.user a {padding: 0;}
.filetree li a.addNode {display: block; float: left; width: 16px; height: 16px; background: url(../images/icon_add.png) no-repeat; margin: 2px 0 0 8px; text-indent: -9999px; padding: 0;}
.filetree li a.addNodeTreeViewEmployee {display: block; float: left; width: 16px; height: 16px; background: url(../images/design/personal.png) no-repeat; margin: 2px 0 0 8px; text-indent: -9999px; padding: 0;}
.filetree li a.addNodeTreeViewEdit {display: block; float: left; width: 16px; height: 16px; background: url(../images/design/icon_edit.png) no-repeat; margin: 2px 0 0 8px; text-indent: -9999px; padding: 0;}
.filetree li a {color: #000;}
.filetree li a:hover {color: #060c7e; text-decoration: none;}

.treeview input.delete {background: url(../images/design/icon_delete.png) no-repeat; width: 16px; height: 16px; border: none; font-size: 0; line-height: 0; text-indent: -9999px; margin:2px 0 0 8px; padding: 0; display: block; float: left;}

/* Small boxes containing info, may be linked to article or modal popup, now mainly resides i right column */
.teaser {background: #eceab0; padding: 10px; margin: 0 0 10px; color: #1c4357;}
.teaser img {display: block; margin: 0 0 6px;}
a.tryout {width: 280px; height: 62px; background: url(../images/try_btn.png) no-repeat; display: block; text-indent: -9999px;}
.teaser {-moz-border-radius: 4px; /* FF */ -webkit-border-radius: 4px; /* Saf3+, Chrome */ border-radius: 4px; /* Opera 10.5, IE 9 */
	background-image: -moz-linear-gradient(top, #eceab0, #dad779); /* FF3.6 */
	background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eceab0),color-stop(1, #dad779)); /* Saf4+, Chrome */
	-moz-box-shadow: 0px 2px 2px #BBB; /* FF3.5+ */ -webkit-box-shadow: 0px 2px 2px #BBB; /* Saf3.0+, Chrome */ box-shadow: 0px 2px 2px #BBB; /* Opera 10.5, IE 9.0 */}

/* A box containing a list of news. News are linked to articles */
.newsTeaser {background: #063e69; margin: 0 0 10px; color: #FFF; height: auto !important; height: 1%; min-height: 1%; overflow: hidden;
-moz-border-radius: 4px; /* FF */ -webkit-border-radius: 4px; /* Saf3+, Chrome */ border-radius: 4px; /* Opera 10.5, IE 9 */
background-image: -moz-linear-gradient(top, #1c4357, #10222b); /* FF3.6 */
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #1c4357),color-stop(1, #10222b)); /* Saf4+, Chrome */}
.newsTeaser a {color: #DDD;}
.newsTeaser a:hover {color: #FFF;}
.newsTeaser .content {margin: 10px;}
.readMore {text-align: right;}
.readMore a {background: #1A3745; color: #FFF; display: inline-block; padding: 4px 8px; -moz-border-radius: 4px; /* FF */ -webkit-border-radius: 4px; /* Saf3+, Chrome */ border-radius: 4px; /* Opera 10.5, IE 9 */}
.newsTeaser .shortlist {margin: 0 0 10px;}
.newsTeaser .shortlist:last-child {margin: 0;}
.newsTeaser .shortlist li {padding: 0 0 4px; margin: 0 0 4px; border-bottom: 1px solid #486575;}
.newsTeaser .shortlist li:last-child {border-bottom: none; margin: 0;}
.newsTeaser .shortlist a {color: #DDD; display: block;}
.newsTeaser .shortlist a:hover {color: #FFF;}

/* formIds for for forms in modal windows */
#loginform, #editCertificate {width: 434px; margin: 0 auto;}

/* common margins */
.mt10px {margin-top: 10px;} .mt20px {margin-top: 20px;} .mt30px {margin-top: 30px;}
.mr10px {margin-right: 10px;} .mr20px {margin-right: 20px;} .mr30px {margin-right: 30px;}
.mb10px {margin-bottom: 10px;} .mb20px {margin-bottom: 20px;} .mb30px {margin-bottom: 30px;}
.ml10px {margin-left: 10px;} .ml20px {margin-left: 20px;} .ml30px {margin-left: 30px;}



div.warning {/*background: none;*/ margin: .2em 0 .5em;}
div.warning h2 {font: normal 18px/1.1em Arial, Helvetica, sans-serif; color: #A11;}

.content-search .feedback {border-bottom: 2px solid #DDD; margin: 0 0 10px;}
.content-search .feedback h2 {font: normal 18px/20px Arial, Helvetica, sans-serif;}

ul.bulletList {list-style: inside disc; padding: 0 0 0 16px;}


#loginform {width: 470px;}

.mainCol #loginform {width: auto; margin: 0 0 10px;}

h4.registrationConfHeader {font: normal 20px/22px Arial, Helvetica, sans-serif; margin: 0 0 14px; padding: 0 20px 0 0;}
p.message .uName {display: block; font-weight: bold;}
.user-confirmation span.username, .user-confirmation span.password {font-weight: bold;}

.blueTop { height: 30px; }