@import 'reset.css';

body{
font-family:sans-serif;
/*background:#f9f9f9 url(../image/bg.png) 0 0 repeat-x;*/
background: #fff;
font-size:13px;
color:#666;
line-height:19px;
}

ol{
margin-left:20px;
}

pre{
border:1px solid #AAA;
background:#EEE;
border-radius:5px;
padding:15px;
margin-bottom:10px;
}

a:link { color:#0071BC; }
a:hover { color:#0F89D9; }
a:active { color:#0F89D9; }
a:visited { color:#A400BC; }

.lead {
  font-weight: bold;
}

.block {
  display:block;
}

.centeredBlock {
  margin-left: auto;
  margin-right: auto;
}

#bodyContent div{
background:#fff9a1 !important;
border:1px solid #ffb923 !important;
border-radius:5px !important;
padding:15px !important;
color:#000 !important;
margin-bottom:10px;
}

#wrap{
width:980px;
margin:0 auto;
}

#header{
height:98px;
width:100%;
background: url(../image/border-horizontal.png) no-repeat bottom center
}

#header h1 a{
background:url(../image/logo.png) 0 50% no-repeat;
text-indent:-9999px;
line-height:98px;
width:186px;
float:left;
}

#header #decc-logo a{
background:url(../image/decc-logo-menu.png) 0 50% no-repeat;
text-indent:-9999px;
line-height:98px;
width:85px;
margin-left:140px;
float:left;
}

#header ul#nav{
float: left;
width:550px;
height:98px;
font-size:16px;
}

#header ul#nav li{
display:inline;
float:right;
height:98px;
line-height:98px;
}

#header ul#nav li a{
padding:0 10px;
font-weight:bold;
color:#888;
text-decoration:none;
line-height:98px;
float:left;
text-shadow:0 1px 0 rgba(255,255,255,1);
}

#header ul#nav li#active a{
color:#000;
}

#header ul#nav li a:hover{
color:#000;
}

#main{
padding:10px 0;
}

#main h1{
color:#f88216;

font-size:20pt;
line-height:38px;
}

#main h2{
color:#f9a527;

font-size:18pt;
line-height:38px;
}

#main h3{
color:#808080;
font-weight:bold;
font-size:16px;
line-height:38px;
}

#main h4{
color:#808080;
font-weight:bold;
font-size:14px;
line-height:38px;
}

#main p{
margin:0 0 1.5em 0;
}

#main p em{
color:#000;
}

#main #col1{
width:31%;
float:left;
padding:1% 1% 1% 0;
}

#main #col2{
width:31%;
float:left;
padding:1%;
}

#main #col3{
width:31%;
float:right;
padding:1% 0 1% 1%;
}

#main ul{
list-style:disc outside;
margin-left:20px;
}

#main ul li{
margin:0.3em 0;
}

#scroller{
width:972px;
height:300px;
border:4px solid #DDD;
border-radius:6px;
position:relative;
margin-top:10px;
}

#scroller h1{
color:#000;
font-size:30px;
text-shadow:#FFF 0 1px 5px;
font-weight:normal;
}

#scroller h2{
color:#222;
text-shadow:#FFF 0 1px 5px;
font-weight:normal;
}

#scroller .scrollItem{
padding:20px;
width:682px;
height:260px;
overflow:hidden;
z-index:9001;
position:absolute;
top:0;
left:0;
}

#activeTab{
position:absolute;
}

.button {
  border-color: #999999;
  border-radius:3px;
  border-width: 1px;
  border-style: solid;
  color:#0071BC;
  font-weight: bold;
  font-size: 16px;
  padding:5px 10px;
  text-align: center;
  text-decoration: none;
  text-shadow:0 1px 0 rgba(255,255,255,1);
  box-shadow:0 0 3px rgba(0,0,0,0.3), inset 0 0 1px rgba(255,255,255,1);

  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;  

  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #dbdbdb 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dbdbdb));
  background: -webkit-linear-gradient(top, #ffffff 0%,#dbdbdb 100%);
  background: -o-linear-gradient(top, #ffffff 0%,#dbdbdb 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#dbdbdb 100%);
  background: linear-gradient(top, #ffffff 0%,#dbdbdb 100%);  
}

.button:hover {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  background: #ffffff;
  background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#e5e5e5));
  background: -webkit-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
  background: -o-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
  background: -ms-linear-gradient(top, #ffffff 0%,#e5e5e5 100%);
  background: linear-gradient(top, #ffffff 0%,#e5e5e5 100%);  
}

.button:active {
  -webkit-transition: all 0.2s ease-in-out;
  -moz-transition: all 0.2s ease-in-out;
  -o-transition: all 0.2s ease-in-out;
  -ms-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;

  background: #e5e5e5;
  background: -moz-linear-gradient(top, #e5e5e5 0%, #ffffff 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e5e5), color-stop(100%,#ffffff));
  background: -webkit-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
  background: -o-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
  background: -ms-linear-gradient(top, #e5e5e5 0%,#ffffff 100%);
  background: linear-gradient(top, #e5e5e5 0%,#ffffff 100%);  
}

.button a:link,
.button a:hover,
.button a:active,
.button a:visited,
a.button:link,
a.button:hover,
a.button:active,
a.button:visited {
  text-decoration: none;
  color: #0071BC;
}

  .button img {
    vertical-align: middle;
  }

.button.green {
  border-color: #0a0;
  color: #FFFFFF;
  text-shadow:0 -1px 0 rgba(0,0,0,0.2);

  background: #8fc800;
  background: -moz-linear-gradient(top, #8fc800 0%, #53ad00 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8fc800), color-stop(100%,#53ad00));
  background: -webkit-linear-gradient(top, #8fc800 0%,#53ad00 100%);
  background: -o-linear-gradient(top, #8fc800 0%,#53ad00 100%);
  background: -ms-linear-gradient(top, #8fc800 0%,#53ad00 100%);
  background: linear-gradient(top, #8fc800 0%,#53ad00 100%);
}

.button.green:hover {
  border-color: #0c0;
  background: #a0e000;
  background: -moz-linear-gradient(top, #a0e000 1%, #57b500 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#a0e000), color-stop(100%,#57b500));
  background: -webkit-linear-gradient(top, #a0e000 1%,#57b500 100%);
  background: -o-linear-gradient(top, #a0e000 1%,#57b500 100%);
  background: -ms-linear-gradient(top, #a0e000 1%,#57b500 100%);
  background: linear-gradient(top, #a0e000 1%,#57b500 100%);
  box-shadow:0 0 10px rgba(160,224,0,1), inset 0 0 1px rgba(255,255,255,1); 
}

.button.green:active {
  border-color: #0c0;
  background: #57b500;
  background: -moz-linear-gradient(top, #57b500 0%, #a0e000 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#57b500), color-stop(100%,#a0e000));
  background: -webkit-linear-gradient(top, #57b500 0%,#a0e000 100%);
  background: -o-linear-gradient(top, #57b500 0%,#a0e000 100%);
  background: -ms-linear-gradient(top, #57b500 0%,#a0e000 100%);
  background: linear-gradient(top, #57b500 0%,#a0e000 100%);
  box-shadow:0 0 10px rgba(160,224,0,1), inset 0 0 1px rgba(255,255,255,1), inset 0 0 10px rgba(0,0,0,0.1);
}

.button.green a:link ,
.button.green a:hover,
.button.green a:active,
.button.green a:visited,
a.button.green:link,
a.button.green:hover,
a.button.green:active,
a.button.green:visited {
  text-decoration: none;
  color: #FFFFFF;
}

#footer {
  clear: both;
  text-align: center;
  background: url(../image/border-horizontal.png) no-repeat top center;
  padding-top: 20px;
  margin: 20px 0 40px 0;
}

  #footer-decc {
    width: 850px;
    margin: 0 auto;
  }

  #footer img {
    float: left;
    margin-right: 20px;    
  }

  #footer p {
    font-size: 9pt;
    line-height: 14pt;
    padding-top: 11px;
  }

/******************
 * Home
 ******************/

#home-download-box {
  border-radius: 10px;
  color: #E6E6E6;
  float: left;
  min-height: 300px;  
  position: relative;
  text-align: center;
  width: 645px;
  margin-top: 20px;

  background: #122a4f;
  background: -moz-linear-gradient(top, #122a4f 0%, #091527 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#122a4f), color-stop(100%,#091527));
  background: -webkit-linear-gradient(top, #122a4f 0%,#091527 100%);
  background: -o-linear-gradient(top, #122a4f 0%,#091527 100%);
  background: -ms-linear-gradient(top, #122a4f 0%,#091527 100%);
  background: linear-gradient(top, #122a4f 0%,#091527 100%);  
}
 
#home-download-box-copy {
  float: left;  
  width: 285px;
  padding: 10px;
}

  #home-download-box-copy h1 {
    color: #eee;
    font-size: 20pt;
    line-height: 25pt;
    text-shadow: 0 3px 5px rgba(0,0,0,0.4);
    margin: 5px 0 10px 0; 
  }

  #home-download-box-copy p {
    font-size: 10pt;
    line-height: 13pt;
    margin-bottom: 10pt;
  }

  #home-download-box-version {
    font-family: 'Times New Roman', serif;
    font-style: italic;
    font-size: 7pt;
    padding-top: 2px;
  }

  #home-download-box .button {
    display: inline-block;
    font-size: 14pt;
  }

    #home-download-box .button img {
      margin: 0 5px 3px 0
    }

#home-main-image {
  width: 340px;
  height: 300px;
  float: right;
  position: relative;

}

  #home-main-image-glows-1 {
    width: 340px;
    height: 300px; 
    position: absolute;
    top: 0;
    left: 0;   
    background: url(../image/fox-box-glows-1.png) 0 0 no-repeat;
    -webkit-animation: glow-cycle 10s infinite normal linear forwards 0s; 
    -moz-animation: glow-cycle 10s infinite normal linear forwards 0s;          
  }

  #home-main-image-glows-2 {
    width: 340px;
    height: 300px;  
    position: absolute;
    top: 0;
    left: 0;       
    background: url(../image/fox-box-glows-2.png) 0 0 no-repeat;
    -webkit-animation: glow-cycle 10s infinite normal linear forwards 4s;
    -moz-animation: glow-cycle 10s infinite normal linear forwards 4s;    
    opacity: 0;
  } 

  #home-main-image-glows-3 {
    width: 340px;
    height: 300px;  
    position: absolute;
    top: 0;
    left: 0;       
    background: url(../image/fox-box-glows-1.png) 0 30px no-repeat;
    -webkit-animation: glow-cycle 10s infinite normal linear forwards 7s;
    -moz-animation: glow-cycle 10s infinite normal linear forwards 7s;    
    opacity: 0;
  }   

  #home-main-image-box {
    width: 340px;
    height: 300px;  
    position: absolute;
    top: 0;
    left: 0;       
  background: url(../image/fox-box.png) top center no-repeat;
  } 

  @-webkit-keyframes glow-cycle {
    0% {
      /*background-position: 0px 20px;*/
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      /*background-position: 0px -50px;*/
      opacity: 0;
    }
  }

  @-moz-keyframes glow-cycle {
    0% {
      /*background-position: 0px 20px;*/
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      /*background-position: 0px -50px;*/
      opacity: 0;
    }
  }  

#home-solution-box {
  width: 310px;
  height: 300px;
  margin-top: 20px;
  float: right;
}

  #home-solution-box p.lead {
    margin-bottom: 0.6em;
  }

  #home-solution-box ul {
    margin: 0 0 1em 2em;
  }

#home-users-box {
  padding-top: 30px;
  clear: both;
}

  #home-users-box h2 { 
    float: left;
    margin-right: 1em;
  }

  ul#home-users {
    font-size: 11pt; 
    font-weight: bold;
    color: #666666;
  }

    ul#home-users li {
      display: inline-block;
      list-style-type: disc;
      margin: 0.1em 0;
    }

    ul#home-users li:before {
      content: "\00A0\2022\00A0\00A0";
      color: #B3B3B3;
    }  

    ul#home-users li:first-child:before,
    ul#home-users li:nth-child(3):before {
      content: none;
    }

    ul#home-users a:link,
    ul#home-users a:hover,
    ul#home-users a:active,
    ul#home-users a:visited {
      text-decoration: none;
    }

/******************
 * Changelog
 ******************/    
.cl-date {
  font-weight: bold;
  font-size: 1.2em;
  color: #AAAAAA;
  padding-bottom: 0.6em;
}

/******************
 * Cookie bar
 ******************/ 
#cookieInfo {
  display: none;
  width: 960px;
  position: fixed;
  left: 50%;
  margin-left: -490px;
  bottom: 0px;
  color: #ddd;
  background-color: #222;
  border-radius: 8px 8px 0 0;
  padding: 6px 12px;
}

#cookieInfo a {
  color: #fff;
}

a.closeBar {
  text-decoration: none;
  color: #666;
  float: right;
  font-weight: bold;
  font-family: Verdana, sans-serif;
}