/*
	 *  @2010
	 * Screen CSS
	 *
	 *
	 */

@import 'clean.css';

html, body	{ width: 100%; height: 100%; font: normal 10px/20px Tahoma, Helvetica, sans-serif; }

html { }
body { color: #fff; background-color: #308203; }

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

a { color: #fff; }
a:hover,
a:focus { color: #4ad911; }

#aural-nav	{ position: absolute; top: 0; left: -500em; }
#aural-nav a:focus { position: absolute; left: 480em; top: 6em; padding: 0 3px; color: #aeef00; background: #3eb40e; font-weight: bold; text-decoration: none; white-space: nowrap }


#page { position: relative; min-height: 100%; min-width: 1100px; background: url(../images/bg-body3.png) no-repeat 100% 100% fixed, url(../images/bg-body2.png) repeat 100% 100% fixed; overflow: hidden }
#wrapper { width: 980px; float: right; margin: 4em 8em 0 0; padding-bottom: 6em; }

/* top */
#top { width: 28em; height: 4em; float: left; padding: 14em 0 0 4em; }
h1 { width: 280px; height: 40px; float: left; }
h1 a { display: block; width: 100%; height: 100%; background: url(../images/bg-logo.png) no-repeat 0 0; text-indent: -100em; overflow: hidden;  }
#lang { position: absolute; bottom: 2em; right: 64em; width: 12em; height: 2em;  white-space: nowrap }
#card { position: relative; float: left; width: 40em; height: 2em; margin: 6em 0 0 32em;  }
#card span { width: 12em; float: left; padding: 0 3em; background: url(../images/bg-body4.png) no-repeat 0 0; font-weight: bold; } 


/* content */
#content { width: 60em; min-height: 18em; float: right; margin: 4em 0 0; padding: 2em 2em 4em; background: url(../images/bg-mod.png) no-repeat 100% 0, rgba(0,0,0, .2); }
#content h2 { color: #fff; font-weight: bold; font-size: 1.2em; }
#content h3 { font-size: 1.1em; }
#content p { margin: 0 0 2em; }
#content a { color: #3eb40e; font-weight: bold; padding: 0 2px; text-decoration: underline; }
#content a:hover, 
#content a:focus { color: #aeef00; background-color: #3eb40e; text-decoration: none; }
#content abbr { padding: 0 .2em; color: #aeef00; background-color: #3eb40e; cursor: help; border: none;}


/* add:ie */
#ie-preview { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../images/bg-body2.png) repeat 0 0; overflow: hidden; z-index: 99 }
#ie-preview img { position: absolute; bottom: 0; left: 0; z-index: 99 }

#ie-note { position: absolute; top: -22px; width: 100%; height: 21px; line-height: 21px;  border-bottom: 1px solid #808080; color: #000; background: #ffffe1 url(../images/icon-warn.png) no-repeat 5px 2px; z-index: 101; }
#ie-note:hover { color: #fff; background-color: #0a246a; }
#ie-note:hover p a { color: #fff; }
#ie-note p { float: left; padding: 0 30px; cursor: pointer }
#ie-note p a { color: #000; }
#ie-note span { float: right; padding: 0 5px; font-size: 14px; font-weight: bold; cursor: pointer }


/* side-bar */
#side-bar { width: 940px; height: 240px; float: right; clear: both; margin: 60px 0 0; padding: 20px; background: url(../images/bg-mod.png) no-repeat 100% 40px, rgba(0,0,0, .2); }
#side-bar ul { width: 940px; height: 240px; margin: 0 auto; }
#side-bar li { position: relative; height: 100%; float: left; margin: 0 20px 0 0; color: #3eb40e; }
#side-bar li div { position: absolute; left: 0; bottom: 0; width: 300px; height: 4em; font-size: .9em; }
#side-bar li>a { display: block; height: 200px; overflow: hidden; }
#side-bar img { height: 200px; padding: 0 0 20px; }
#side-bar h6 { color: #fff; font-weight: bold; }
#side-bar h6 a { position: relative; top: -5px;  padding: 0 2px; font-weight: normal; text-decoration: none; }
#side-bar h6 a:before { color: #fff; content: '['; }
#side-bar h6 a:after { color: #fff; content: ']'; }
#side-bar em { float: left;  }
#side-bar time { float: right; }

.slideClip { position: relative; width: 100%; overflow: hidden; z-index: 1; }
.slideClip {  }
.slideClipA { position: absolute; left: 320px; top: 0; width: 300px; overflow: hidden; z-index: 9; }
.slideClipA ul { left: -320px; }
.slideClipB { z-index: 8; }
.slideNav { position: relative; top: -20px; width: 380px; height: 20px; margin: 0 auto; }
.slideNav .btn { display: block; position: absolute; top: 0; width: 20px; height: 20px; background: #3eb40e; text-indent: -100em; overflow: hidden; cursor: pointer; z-index: 10; }
.slideNav .btn:hover,
.slideNav .btn:focus { background: #aeef00 }
.slideNav .btn-prev { left: 0; }
.slideNav .btn-next { right: 0; }

/* footer */
footer { position: absolute; right: 14em; bottom: 2em; height: 2em; z-index: 10; }