/* 
    Document   : style
    Created on : 2010-mar-18, 15:42:30
    Author     : Linus Persson för Lotusmodellen.se
    Description: Stilmall för Lotusmodellen.

*/

html {
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    color:#000;
}
body {
    background-color:#FFF;
    background: url('../img/site-bg.gif') repeat-x scroll 0 0 transparent;
    line-height:20px;
}

input {
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    color: #929292;
}

a {
    color: #000000;
    text-decoration: none;
}

a:hover {
    color: #1a1a1a;
    text-decoration: underline;
}

hr {
    border-top:1px solid #000;
    border-bottom:0;
    border-right:0;
    border-left:0;
}

#page {
    width: 840px;
    margin-top: 0px;
    margin-left: auto;
    margin-right: auto;
}

#top {
    height: 117px;
}

#logo {
    background: url('../img/lotuslogga.png') no-repeat;
    margin-top: 20px;
    margin-left: 10px;
    height: 68px;
    width: 270px;
    float: left;
}

#logo h1 {
    margin-top: 68px;
    font-size: 12px;
    font-weight: 400;
    font-style: italic;
    text-decoration: underline;
}

#login-box {
    margin-top: 10px;
    height: 100px;
    width: 240px;
    float: right;
    font-size: 11px;
}

#login-box a {
    color: #9cd7fa;
    text-decoration: none;
}

#login-box a:hover {
    color: #bde3f9;
    text-decoration: underline;
}


#login-box label {
    font-weight: bold;
}

.errorMessage {
    color: #f46467;
}

.support {
    float: right;
    margin-right: 35px;
    margin-top: 16px;
    font-weight: bold;
}


#menu-content {
    margin-top: 1px;
    margin-right: auto;
    margin-left: auto;
}

/* Meny */

.selected {
    background-color: red;
    font-weight: bolder;
}

#nav {
    float: left;
    margin: 0; padding: 0;
    z-index: 1;
}

#nav li a, #nav li {
    float: left;
}

#nav li {
    list-style: none;
    position: relative;
}

#nav li a {
    padding: 10px;
    text-decoration: none;
    color: #000;
    height: 21px;
    font-weight: bold;
}

#nav li a:hover {
    background: url('../img/menu-hover.gif');
}


/* Submeny */

#nav li ul {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 0; margin: 0;
    z-index: 9999;
}

#nav li:hover > ul {
    display: block;
    background: #dcff90;
    border-top: 1px solid #fff;
    border-left: 1px solid #000;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;

}

#nav li ul li, #nav li ul li a {
    float: none;
}


#nav li ul li {
    _display: inline; /* till för IE6 */
}

#nav li ul li a {
    width: 200px;
    display: block;
    z-index: 10000;
}


/* Tredje steget */
#nav li ul li ul {
    display: none;

}

#nav li ul li:hover ul {
    left: 100%;
    top: 0;
    border-top: 1px solid #000;
}

/* Menyn slut */


#wrapper {
    width: 840px;
    margin-top: 43px;
}

.clear {
    clear: both;
}

.content-holder {
    float: left;
    width: 100%;
}

.content-holder h1 {
    font-size: 22px;
    line-height: 30px;
    font-weight: 400;
    padding-bottom: 6px;
    padding-top: 6px;
}

.content-holder h2 {
    font-size: 20px;
    font-weight: 400;
    padding-bottom: 6px;
    padding-top: 6px;
}

.content-holder h3 {
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 6px;
}

.content-holder h4 {
    font-size: 16px;
    font-weight: 400;
    padding-bottom: 6px;
}

.content-holder h5 {
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 6px;
}

.content-holder em {
    font-family: "Verdana", Sans-Serif;
    font-size: 10px;
    font-style: italic;
    color: #ccc;
}

.content-column {
    width: 268px;
    float: left;
    padding: 6px;
}

.information-div-2-column {
    width: 520px;
    padding: 4px;
    float:left;
}

.information-div-1-column {
    width:300px;
    padding: 4px;
    float:left;
}

.information-div {
    width: 260px;
    padding:4px;
}

.information-div h1 {
    font-size: 22px;
    font-weight: 400;
    padding-bottom: 6px;
}

.information-div img {
    border:0px;
}

.information-div span {
    width: 215px;
}

.lotusmodellen-right {
    width: 50%;
    float: left;
    margin-top: 10px;
}

.lotusmodellen-right img {
    margin-left: 10px;
}

.lotusmodellen-left {
    width: 50%;
    float: left;
    margin-top: 10px;
}

.lotusmodellen-left img {
    margin-left: 10px;
}

.img-spacing {
    padding:10px;
}

.text-floating-right {
    float: left;
    padding: 4px;
}

.text-floating-left {
    float: right;
    padding: 4px;
}

.small-text {
    font-size: 8px;
    color: #ccc;
}

.small-text-10 {
    font-size: 10px;
    color: #000;
}


.news span {
    color: #a7c85d;
    font-size: 10px;
    font-weight: bold;
}

#news-box {
    padding: 5px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    behavior: url(/css/border-radius.htc);
    border-radius: 10px;
    border: none;
    background: #bde3f9;

}

#news-holder a {
    text-decoration:underline;
}

#news-holder a:hover {
    color: red;
}

#footer {
    width: 840px;
    height: 100px;
    margin-top: 10px;
    float: left;
    border-top: 1px solid #000000;
    padding:4px;
}

#footer #left {
    width: 200px;
    float: left;
}

#footer #right {
    float: left;

}

#footer #right .links {
    width: 150px;
    float: left;
}

#footer #right .links img {
    padding-right: 4px;
}

#footer #bottom {
    width: 840px;
    font-size: 10px;
    float: left;
}

#footer #bottom span {
    font-size: 10px;
    color:#000;
    float: right;
}

#more-info-lotusmodellen {
    float:left;
}

#more-info-lotusmodellen img {
    padding-right: 4px;
}

.button {
    display:inline-block;
    width: 200px;
    height: 100px;
    font: bold 13px sans-serif;;
    color:#333;
    text-decoration: none;
    float: left;
    text-indent:-9999px;
    padding: 5px;
}

a.rollover-medarbetare {
    background: url("../img/inlogg-medarbetare.png") 0 0 no-repeat;
}
a.rollover-medarbetare:hover {
    background: url("../img/inlogg-medarbetare-hover.png") 0 0 no-repeat;
    color: #049;
}

a.rollover-chef {
    background: url("../img/inlogg-chef.png") 0 0 no-repeat;
}
a.rollover-chef:hover {
    background: url("../img/inlogg-chef-hover.png") 0 0 no-repeat;
    color: #049;
}

a.rollover-hr {
    background: url("../img/inlogg-hr.png") 0 0 no-repeat;
}
a.rollover-hr:hover {
    background: url("../img/inlogg-hr-hover.png") 0 0 no-repeat;
    color: #049;
}

.film-div {
    float:left;
}

span.right {
    float: right;
}

.h1-spacing {
    line-height: 28px;
}
/* Till Fancyox*/

#medarbetarfilm {
    display:none;
}

chef-film {
    display:none;
}

/* Färgklasser*/

.red {
    color:#fe6758;
}

/* Inställningar för hover funktion */

#LotusFilmen {
    height: 123px;
    width: 300px;
}
#hover {
    width: 300px;
    height: 20px;
    background-color: gray;
    margin-bottom: 0px;
    float:left;
    z-index: -1;
}

.column1 {
    width: 50%;
    float: left;
}

.column2{
    width: 50%;
    float: left;
}

/* LotusTV CSS */

#tv-content {
    margin-top: 10px;
    background: #fff;
    width: 600px;
    float: left;
    margin-right: 10px;
    border: none;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/css/border-radius.htc);
}

#tv-content h1 {
    padding: 5px;
}

#tv-content #social {
    float: left;
    width: 600px;
    padding: 6px;
}

#twitter-root {
    width: 60px;
}

#fb-root, #twitter-root, #likebot-root {
    float: left;
}

#tv-menu {
    margin-top: 10px;
    background-color: #ecffc2;
    float: left;
    width: 210px;
    padding:5px;
    font-size: 12px;


    border: none;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    -khtml-border-radius: 8px;
    border-radius: 8px;
    behavior: url(/css/border-radius.htc);
}

#lq, #switch-hq {
    display: none;
}

#hq, #lq span{
    font-size: 10px;
    color: #ccc;
}


/* REHAB DEL */

#rehab-auth {
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border: 1px solid #dddddd;
    background: #b2e1ff;
    padding: 5px;
    font-size: 14px;

}

#rehab-auth a {
    font-size: 10px;
    color:#000;
}

.download-link {
    color: #ccc;
    font-size: 12px;
    text-decoration: underline;
}

.download-link:hover {
    color: #fa6868;
}

#tabs {
    font-size: 12px;
}

#rehab-menu {
    margin-bottom: 10px;
}

#rehab-menu li {
    float:left;
}

#rehab-menu a {
    text-align: center;
    padding-top:5px;
}

.sprite-bg {
    background: url(../img/rehab-sprite.png) no-repeat top left;
    height: 30px;
    width: 200px;
    float: left;
}


#rehab-film {

}

.rehab-menu-bg {


}

.rehab-sprite:hover{ background-position: 0 -40px; width: 200px; height: 30px; }
.rehab-sprite { background-position: 0 0; width: 200px; height: 30px;}

.rehab-addiction {
    width: 820px;
}

#center {
    margin: 0 auto;
    width: 640px;
}

#expectations form textarea {
    width: 400px;
    height: 80px;
}

.infoText { line-height: 150%; font-size: 14px; font-family: Tahoma, sans-serif}

#writeBlogg {
    display: none;
    background: #ebe9e9;
    -moz-border-radius: 4px;
    -webkit-border-radius:4px;
    border:1px solid #7c7a7a;
}

#writeBlogg form {
    padding: 10px;
}

#writeBlogg form textarea {
    width: 600px;
    height: 200px;
    padding: 5px;
    margin: 5px;
}

#writeBlogg form input[type=input] {
    margin: 5px;
    width: 300px;
}

.pubDate {
    font-size: 10px;
    color: #ccc;
    margin: 0px;
    border-bottom: 1px dashed #ccc;
}

.blogPost h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 300;
    color: #9cd7fa;
}

.post {
    font-size: 12px;
    font-family: verdana, sans-serif;
    color: #000;
}

#value {
    border:0; 
    color:#7bbdd9; 
    font-weight:bold; 
    font-size: 22px;
    background: transparent; 
    width: 26px;
    -moz-border-radius: 4px; 
    border: 1px solid #ccc;
    margin-bottom: 6px;
    display: inline;
}

/* CSS för UL LI MENY i utbildningen */


#edu {
    height: 70px;
}

#edu ul li {
    float: left;
    text-align: center;
    vertical-align: middle;
    background: #C4E876; /* old browsers */
    background: -moz-linear-gradient(top, #C4E876 0%, #DCFF90 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#C4E876), color-stop(100%,#DCFF90)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#C4E876', endColorstr='#DCFF90',GradientType=0 ); /* ie */    margin: 4px;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    border: 1px solid #ccc;
}

#edu ul li:hover {
    float: left;
    background: #9BD6FA; /* old browsers */
    background: -moz-linear-gradient(top, #9BD6FA 0%, #BDE3F9 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#9BD6FA), color-stop(100%,#BDE3F9)); /* webkit */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9BD6FA', endColorstr='#BDE3F9',GradientType=0 ); /* ie */

}

#edu ul li a {
    display: block;
    padding: 8px;
    margin: 8px;
    text-decoration: none;
    color: #000;
    font-weight: 600;
}

/* Text som skall kunna ändra storlek */

#resize {
    display: block;
    margin: 20px 0 0 0 ;
}

.resizeable {
    font-size: 14px;
    line-height: 150%;
}

/* En class för att styra H-taggar inom utbildningen */
.eduHeading {
    font-size: 26px;
    line-height: 120%;
    font-weight: 600;
    margin-left: 6px;
    padding: 10px 0px 10px 4px;
}

/* Brödsmulor */
#breadcrumbs {
    font-size: 10px;
}

#breadcrumbs a {
    color: #9cd7fa;
}

#breadcrumbs a:hover{
    color: #bde3f9;
}

/* Kommunsidor */

.h2Style {
    margin-bottom: 10px;
    margin-top: 10px;
    font-size: 20px;
}

.h3Style {
    font-size: 16px;
    margin-bottom: 5px;
}

.faq {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
    border: 1px solid #ccc;
    background: #fff;
    margin: 10px;
    padding: 10px;
}

.faq p {
    margin-bottom: 10px;
}

.movie {
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius:10px;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #444;
    height: 90px;
}

.movie h3 {
    display: inline-block;
}

.movie img {
    float: left;
    margin-right: 10px;
}

.padding6 {
    padding: 6px;
}