body { background: #FFF url("Images/bg.gif") repeat-x left top; }
#wrap { margin: 0 auto; padding: 0px; width: 1020px; text-align:left;  }
#wrap_bottom { margin: 0 auto; padding: 0px; width: 1020px; background: transparent url("Images/bg_wrap_bottom.png") no-repeat left bottom; height: 30px; clear:both; }
/* #wrap_bottom { margin: 0 auto; padding: 10px 0px 30px 0px; width: 1020px; background: transparent url("Images/bg_wrap_bottom_gray.png") no-repeat left bottom; clear:both; } */

/* ###############  H E A D E R  ############### */
#masthead, #masthead2, #footer { /* background-color: #313131; background-color: #FFF;*/  width: 100%; display: inline; float: left; }
#masthead { /* border-bottom: solid 1px #252525;*/ text-align: center; padding: 4px 0px 12px 0px; }
        #masthead img { display: inline; float: left; margin: 16px 0px 0px 21px; }
        #masthead ul { list-style: none; margin: 0px 20px 0px 0px; display: inline; float: right; }
        #masthead li { color: #777777; display:inline; font-size: 16px; }
        #masthead li a:link, #masthead li a:visited { color: #777777; color: #00c1e1; line-height: 30px; display:block; float: left; margin-top: 0px;
            text-decoration: none; font-weight: bold; padding: 20px 30px 0px 10px; padding: 20px 15px 0px 15px; 
            text-transform:uppercase; border-left: solid 1px #eaeaea;}
        #masthead li a.current { color: #FFF; background-color: #00c0e4; }
        #masthead li a.current:hover { color: #FAFAFA; background-color: #00c0e4; }
        #masthead li a:hover { text-decoration: underline; color: #009fda; }
/*
#masthead2 { text-align: center; background:none;}
    #header2 { background: #00c1e1; width: 980px; margin: 0 auto; padding: 7px 0px 7px 0px; text-align:left; }
        #header2 img { display: inline; float: left; }
        #header2 ul { list-style: none; margin: 30px 0px 0px 0px; display: inline; float: left;  width: 950px }
        #header2 li { color: #FFF; font-size:13px; display:inline; line-height: 28px; padding: 2px 8px 2px 12px; font-weight:bold; text-transform:uppercase;
                      background: transparent url("Images/li_delimeter_cyan.gif") no-repeat left center; }
        #header2 li.home { color: #FFF; font-size:13px; display:inline; line-height: 28px; padding: 10px 8px 0px 0px; margin-top: 10px; background-image: none; }
        #header2 li a:link { color: #FFF; text-decoration: none; font-weight:bold; }
        #header2 li a:hover { text-decoration: underline; }        
*/


#container { background-color: White; display: inline; float: left; clear:left; background: White url("Images/bg_wrap.jpg") repeat-y left top; width: 100%; }

.devider { width: 940px; display: inline; float: left; clear:left; line-height:1px;
    margin: 0px 0px 30px 40px; border-bottom: 1px solid #CECECE;
}
  



/* ###############  C O N T E N T  ############################################# */
#header  
{
    background: transparent url("Images/bg_wrap_top.jpg") no-repeat left top;
    display: inline; float: left; clear:left; height: 10px; width: 100%;
    padding: 1px 0px 0px 0px; display: inline; float: left; clear:left; height: 101px; width: 980px; width: 100%; /* 980 - (30px paddings) = 950 px */
}
#home-header {
    background: transparent url("Images/headerbanner.jpg") no-repeat left top;
    padding: 20px 0px 0px 0px; display: inline; float: left; clear:left; height: 257px; width: 980px; width: 100%; /* 980 - (30px paddings) = 950 px */
}
#header.title-loyalistic { background: transparent url("Images/headerbanner_loyalistic.jpg") no-repeat left top; }
#header.title-contact { background: transparent url("Images/headerbanner_contact.jpg") no-repeat left top; }
#header.title-service { background: transparent url("Images/headerbanner_service.jpg") no-repeat left top; }
#header.title-blogi { background: transparent url("Images/headerbanner_blogi.jpg") no-repeat left top; }
#header.title-solutions1 { background: transparent url("Images/headerbanner_solutions1.jpg") no-repeat left top; }
#header.title-solutions2 { background: transparent url("Images/headerbanner_solutions2.jpg") no-repeat left top; }
#header.title-solutions3 { background: transparent url("Images/headerbanner_solutions3.jpg") no-repeat left top; }
#header.title-career { background: transparent url("Images/headerbanner_career.jpg") no-repeat left top; }
#header.title-sol-gir { background: transparent url("Images/headerbanner_sol_gir.jpg") no-repeat left top; }
#header.title-sol-onni { background: transparent url("Images/headerbanner_sol_Onni.jpg") no-repeat left top; }
#header.title-asiakastarinat { background: transparent url("Images/headerbanner_asiakastarinat.jpg") no-repeat left top; }


#home-header .left, #header .left
{
     display: inline; float: left;  width: 700px; 
}
#home-header h1, #header h1
{
    color: #00c1e1;
    color: #009fda;
    margin: 0;
    padding: 0;
    text-transform:uppercase;
    position:absolute; top: -9999px; left: -9999px;
}
#home-header h2
{
    color: #00c1e1;
    color: #FFF;
    text-transform:uppercase;
    position:absolute; top: -9999px; left: -9999px;
}
#home-header h3
{
    color: #FFF;
    color: #00c1e1;
    text-transform:uppercase;
    position:absolute; top: -9999px; left: -9999px;
}

#home-header hr 
{
    color: #b4b4b4; color: #FFF;
    /* height: 0px; */
}
#home-header h4
{
    color: #FFF;
    text-transform:uppercase;
    font-size: 12px;
}
#home-header .contact-block, #header .contact-block { display: inline; float: right; margin-right: 37px;  color: #FFF; }
#home-header .contact-block h3 { font-size: 20px; line-height: 30px; color: #FFF; text-indent: 0px; }
#home-header .contact-block h4 { font-size: 16px; line-height: 22px; }
#home-header .contact-block hr { color: #eaeaea; height: 1px; margin-top: 10px; }
#home-header .contact-block p { padding: 4px 0px; }


#content {
    margin: 10px 0px 10px 40px; 
    width: 940px; /* 980 - (20px margins) = 960 px (lefting on the right 20px free space = 940px) */ 
    display: inline; float: left; clear:left;
}




#home-cols { background-color: #FFF;
    margin: 0px 0px 10px 45px; padding: 0px 0px 20px 0px; display: inline; float: left; clear:left; width: 940px;
    /* border-bottom: solid 1px #c3c5c6; */
}
.cols-3 {
    margin: 0px 0px 0px 0px; padding: 0px 15px 10px 25px; display: inline; float: left; width: 279px; border-left: solid 1px #ededed; 
} 
.first_col { margin: 0px 0px 10px 0px; padding: 0px 15px 10px 0px; border: none; }
.cols-4 {
    margin: 10px 0px 10px 0px; padding: 0px 5px 10px 15px; display: inline; float: left; width: 219px; color: #444; border-left: solid 1px #ededed; 
}
    /*
    .cols-4 h3, .cols-3 h3 {
        color: #00c1e1;
        line-height: 28px;
        text-transform:uppercase;
    }
    .cols-4 h3 span, .cols-3 h3 span { color: #c3c5c6; color: #545454;}
    
    .cols-4 h3 a:link, .cols-4 h3 a:visited, .cols-3 h3 a:link, .cols-3 h3 a:visited {
        font-weight:bold;
            color: #00c1e1;
        line-height: 28px;
        text-transform:uppercase; text-decoration: none;
    }
    */
    a.button-loyalistic, a.button-solutions, a.button-service { 
        background:url("Images/bg_title_loyalistic.gif") no-repeat 0px 0px; 
        width: 275px; 
        height: 38px; 
        display: block; 
    }
    a.button-solutions { background:url("Images/bg_title_solutions.gif") no-repeat 0px 0px; }
    a.button-service {   background:url("Images/bg_title_service.gif") no-repeat 0px 0px; }


    a.button-loyalistic h3, a.button-solutions h3, a.button-service h3 { display: none; }

    a.button-loyalistic:hover { background: url("Images/bg_title_loyalistic.gif") repeat 0px -37px; }
    a.button-solutions:hover { background: url("Images/bg_title_solutions.gif") repeat 0px -37px; }
    a.button-service:hover { background: url("Images/bg_title_service.gif") repeat 0px -37px; }
    
    .cols-4 h3, .cols-3 h3 {
        color: #00c1e1;
        line-height: 28px;
        text-transform:uppercase;
    }
    .cols-3 h3 { position:absolute; top: -9999px; left: -9999px; }
    .cols-4 h3 span, .cols-3 h3 span { color: #c3c5c6; color: #545454;}
    
    .cols-4 h3 a:link, .cols-4 h3 a:visited, .cols-3 h3 a:link, .cols-3 h3 a:visited {
        font-weight:bold;
            color: #00c1e1;
        line-height: 28px;
        text-transform:uppercase; text-decoration: none;
    }
    .cols-3 h3 a:hover, .cols-4 h3 a:hover { text-decoration: underline;}
    .cols-3 h3 a span, .cols-4 h3 a span { color: #c3c5c6; color: #545454; }
    /* .cols-4 h3 a:hover span { text-decoration: underline; } */
    
    .cols-3 p, .cols-4 p { padding-bottom: 0px; display: inline; float: right; width: 209px; }
    .cols-3 ul.col-list li a, .cols-3 ul.col-list li a:visited { color: #0b56a9; text-decoration: none;}
    .cols-3 ul.col-list li a:hover, .cols-4 p a, .cols-4 p a:visited { color: #0b56a9; text-decoration: underline;}
    .bg_image1 { background: url("Images/icon_bulb.png") no-repeat left top; padding: 0px; width: 70px; height: 64px; clear:left; float:left; }
    .bg_image2 { background: url("Images/icon_chart.png") no-repeat left top; padding: 0px; width: 70px; height: 64px; clear:left; float:left; }
    .bg_image3 { background: url("Images/icon_chart.png") no-repeat left top; padding: 0px; width: 70px; height: 64px; clear:left; float:left; }
    .bg_image4 { background: url("Images/icon_cloud.png") no-repeat left top; padding: 0px; width: 70px; height: 64px; clear:left; float:left; }
    .nomargins { margin: 10px 0px; padding: 0px; border: none; }
    .current_col { background-color: #F5F5F5; }
    ul.col-list {display: inline; float: right; width: 190px; color: #00c1e1; list-style-position: outside; }

    #content .content-col-wide { width:450px; margin: 5px 30px 5px 50px; padding: 0px 20px 20px 0px; display: inline; float: left;  }
    #content .content-col-wide h1.solutions { padding: 0px 0px 5px 0px; line-height: 20px; font-size: 15px; font-weight: bold; /* display: inline; float: right; */ color: #094DA2; font-family: Geneva, Lucida Sans, Trebuchet MS, Serif; text-transform:uppercase; }
    #content .content-col-wide h2 { padding: 12px 0 3px 0; font-family: Geneva, Lucida Sans, Trebuchet MS, Serif; }
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    #content .content-col-box { width:250px; padding: 20px;  margin: 20px 0px 5px 50px; display: inline; float: left; border: solid 1px #CCC; background-color: #FAFAFA; -moz-border-radius: 8px; -webkit-border-radius: 8px; }
    #content .content-col-box ul { font-size: 12px; color: #777; margin-left:10px; list-style-image: url("Images/li_circle.png"); }
    #content .content-col-box ul a { font-size: 12px; }
    #content .content-col-box h2 { font-size: 16px; font-weight: bold; }
    #content .content-col-box h3 { font-size: 13px; font-weight: bold; }

    #content h3.blog a {
        font-family: tahoma, arial, helvetica; font-size: 16px; font-size: 20px; font-weight: normal; line-height: 24px; color: #9DBD4F; text-decoration: none;
    }
    #content h3.blog img { padding: 0 0 0 8px; }
    h3.blog a:hover { text-decoration: underline; }
    .blog-intro { float: left; display:block; clear: right; width: 100%; margin: 5px 0px 0px 0px;  }
    .blog-intro img { float: left; display:block;   margin: 0px 3px 0px 0px; }
    
    ul.blog-list { list-style-type: circle; list-style-position: outside; margin: 10px 0px 0px 15px; padding-top: 10px; list-style-image: url("Images/li_circle_green.png"); }
    ul.blog-list li { color: #0080b6;  }
    ul.blog-list li a { color: #0b56a9; text-decoration: none; }
    ul.blog-list li a:hover { text-decoration: underline;  }
    
    
    .blog-rss { margin: 25px 0px 10px 0px; }
    .blog-rss img { float: left; display:block; width: 14px; height: 14px; padding:3px;  margin: 0px 3px 0px 10px; }
    .blog-rss a, .blog-rss a:visited { float: left;  display:block;  color: #0b56a9;  }
    .blog-rss a:hover { color: #0080b6; }
    
    
/* ###############  F O O T E R  ############### */
#footer {  /* border-top: solid 1px #252525; */ text-align: right; min-height: 100px; padding: 40px 0px 10px 0px; /* background-color: #313131; */
        background: #fff url("Images/bg_wrap_bottom.jpg") no-repeat center top;
}
    #footer-content  
    {
        color: #777777;
        -moz-border-radius-bottomleft:4px;
        -moz-border-radius-bottomright:4px;
        -moz-border-radius-topleft:4px;
        -moz-border-radius-topright:4px;
        border:1px solid #DDDDDD;
        margin:0 auto;
        /* width:978px; */ text-align:left; width: 980px;
    }
    #footer p { padding: 10px 15px 10px 0px; }
    #footer ul {  /* list-style: none;*/ padding: 0px 0px 0px 0px; display: inline; float: left; text-align:left; list-style-type: disc; }
    #footer img {padding: 10px 17px 10px 10px; }
    #footer li { color: #00c1e1; color: #545454; line-height: 28px; padding: 0px 0px 0px 0px; }
    #footer li span { color: #777777; color: #c3c5c6; }
    #footer h3 {
        font-size: 1em; 
        color:#666666; color:#545454;
        font-size:1em;
        font-weight:bold;
        line-height:18px;
        clear: left;
    }
    #footer dl { width: 200px; float: left; display: block; margin: 10px; }
    #footer dl dd { font-weight: bold;  margin: 0px; padding: 0px }
    #footer dl dt {  margin: 0px; padding: 0px; }
        #footer dl dt ul, #footer dl dt ul li { background-color: Transparent; margin: 0px; padding: 0px 0px 0px 0px; list-style-type:none; line-height: 16px; }
            
        #dirnav {
            -moz-background-clip:border;
            -moz-background-inline-policy:continuous;
            -moz-background-origin:padding;
            /* background:transparent url(./../nav/images/directory_bg.png) repeat-y scroll 0 0; */
            border-top:1px solid #E5E5E5;
            float:left;
            font-size:11px;
            margin-top:-4px;
            position:relative;
            width:100%;
        }
            #dirnav .col { float:left; padding:9px 0 4px 18px; }
            #dirnav .col ul, #dirnav .col ul li { color: #888888; background-color: Transparent; list-style-type:none; line-height: 16px; }
            #dirnav .col ul 
            {
                padding-bottom:9px;
                list-style-image:none;
                list-style-position:outside;
                list-style-type:none;
                clear: left;
            }
            #dirnav .col li:hover
            {
                color: #545454;
            }
        #globalfooter #breadory ol#breadcrumbs {
            -moz-background-clip:border;
            -moz-background-inline-policy:continuous;
            -moz-background-origin:padding;
            background:transparent none repeat scroll 0 0;
            clear:both;
            color:#666666;
            float:none;
            font-size:11px;
            font-weight:bold;
            height:3em;
            line-height:3em;
            list-style-image:none;
            list-style-position:outside;
            list-style-type:none;
            margin:0;
            text-shadow:0 1px 0 #FFFFFF;
        }
        #dirnav .col.first, #dirnav .col.last {
            margin-left:0 !important;
        }
        
        
        
        
        
        
        
        
        


.dev-ohje { color: #cacaca; font-style: oblique; }

.button {
    font-family: Tahoma, Arial, helvetica, Sans-Serif;
    margin: 0px 0px 0px 0px;
    background:  url("Images/button_r.png" ) no-repeat right top;
    padding: 0px 10px 0px 0px;
    /* background-color: red; */
    display: block;
    float: left;
    height: 39px;
}
/* LoVe/HAte */
/*  button a:link, .button a:visited, .button a:focus, .button a:hover, .button a:active { */
.button a:link, .button a:visited, .button a:focus, .button a:hover, .button a:active {
    font-weight:bold;
    font-size: 16px; 
    letter-spacing: 1px; 
    text-transform:uppercase;
    text-decoration:none;
    background:  url("Images/button_l.png" ) no-repeat left top;
    padding: 10px 15px 1px 25px;
    margin: 0px;
    font-weight:bold;
    display: block;
    float: left; 
    height: 39px;
    color: #FFF;
}