/* reset browser */
body, h1, h2, h3, h4, h5, h6, p, img, ul, li, fieldset, form, dl, dt, dd { margin:0; padding:0; border:0; }
html { overflow: auto; }
a { outline:none; }

header, section, aside, article, nav, hgroup, footer { display: block; }

/* common */
body { 
    background: url(images/bg.png) repeat-x left top;
    background: url(images/bg2.png) no-repeat 50% top, url(images/bg.png) repeat-x left top;
    background-color: #fff;    
    font-family: "Segoe UI", Helvetica, Arial, sans-serif; font-size: 62.5%; color: #6e6e6e; text-align: center; }
.break { clear: both; }

/* fix of footer */
html, body, #wrapper { height: 100%; }
body > #wrapper { height: auto; min-height: 100%; } 
footer { position: relative; margin-top: -110px; height: 110px; clear:both; } 

#wrapper { width: 960px; margin: 0px auto; }

header { height: 212px; position: relative; }
    header a.logo { display: block; background: url(images/logo-wsoft.png) no-repeat left top; width: 182px; height: 150px;
            -webkit-background-size: 182px 150px;
            -moz-background-size: 182px 150px;
            -o-background-size: 182px 150px;
            background-size: 182px 150px;
           position: absolute; top: 30px; left: 20px; text-indent: -9000px; }
    header div.top { position: absolute; right: 0px; top: 45px; font-size: 1.2em; color: #aaa; }
    header div.top span { color: #666; }
    header div.top a { color: #666; text-decoration: none; }
    header div.top a:hover { color: #444; text-decoration: underline; }
   
nav { height: 62px; position: absolute; right: 0px; top: 88px; background: url(images/bg-nav.png) no-repeat left top; padding-left: 22px; }
    nav ul { list-style: none; height: 48px; background: url(images/bg-nav-ul.png) repeat-x left top; padding: 14px 14px 0px 0px; }
    nav ul li { float: left; height: 48px; }
    nav ul li a { font-size: 1.8em; color: #c9c9c9; text-decoration: none; text-transform: uppercase; padding: 0px 20px; 
                  height: 27px; display: block; float: left; line-height: 27px; font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; }
    nav ul li.active { background: url(images/bg-li-active.png) no-repeat 50% bottom; }
    nav ul li.active a { color: #fff; }
    nav ul li a:hover { color: #729cdd; }
    nav ul input.text { float: left; height: 25px; padding: 1px 8px; line-height: 25px; border: 0px; width: 140px; }

#intro { text-align: left; }
    
#slideshow { width: 960px; height: 320px; overflow: hidden; position: relative; margin-top: 10px; }
  #slideshow > div { position: absolute; }
  #slideshow img { position: absolute; top: 0px; left: 0px; }
  #slideshow span { position: absolute; top: 0px; left: 0px; z-index: 10; display: block; background: url(images/bg-intro-span.png); top: 180px; padding: 15px 30px;
         font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; font-size: 2.2em; color: #fff; width: 500px; text-align: left; }

#content { text-align: left; margin-top: 10px; padding-bottom: 120px; overflow: auto; }
    #content article { padding: 20px 30px; }
    #content article.home { float: left; width: 480px; }
    #news { width: 320px; background: #f1f1f1 url(images/bg-news.png) repeat-x left top; float: right; min-height: 200px; padding: 20px 30px; }
    #news h2 {font-size: 2.8em; font-weight: normal; color: #363535; font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; }
    #news ul { list-style: none; }
    #news ul li { font-size: 1.2em; margin-bottom: 10px; border-top: 1px solid #ccc; padding-top: 10px; padding-left: 23px; background: url(images/bg-news-li.png) no-repeat left 12px; }
    #news ul li:first-child { border: none; }
        
    article h1 { font-size: 2.8em; font-weight: normal; margin-bottom: 15px; color: #363535; font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif;}
    article h2 { font-size: 1.8em; margin-bottom: 15px; color: #305692; margin-top: 5px; }
    article h3 { font-size: 1.6em; margin-bottom: 15px; color: #555; }
    article p { font-size: 1.2em; margin-bottom: 8px; }
    article ul { margin-left: 20px; margin-bottom: 10px; }
    article ul li { font-size: 1.2em; }
    article ol { margin-left: 20px; margin-bottom: 10px; }
    article ol li { font-size: 1.2em; }
    article a { color: #305692; }
    article a:hover { color: #000; }
    article table { margin-bottom: 15px; }
    article table td { font-size: 1.2em; }
    article table td p { font-size: inherit; }
    article table.normal td { padding-right: 15px; }
    
footer { background: #343434; color:#aeaeae; }
  footer div { width: 900px; margin: 0px auto; padding-top: 25px; }
  footer address { font-size: 1.2em; float: left; text-align: left; font-style: normal; }
  footer address strong { font-family: 'Yanone Kaffeesatz', Helvetica, Arial, sans-serif; font-size: 1.6em; color: #fff; font-weight: normal; }
  footer p.right { float: right; text-align: right; font-size: 1.2em; padding-top: 22px; }
  footer a { color: #fff; text-decoration: none; }
  footer a:hover { color: #fff; text-decoration: underline; }
  
.blue { color: #305692; }

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    header a.logo {
        background-image: url('images/logo-wsoft@2x.png');
    }
}