﻿html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; border:0; font-size:100%; font:inherit; vertical-align:baseline;}
html, body { height:100%;}
body {line-height:1;background:#fff;}
ol, ul {list-style:none;}
body {-webkit-text-size-adjust:none;}
*:link, *:visited, *:hover, *:active, *:focus {-o-transition:color .20s linear, background-color .20s linear, border-color .20s linear;-webkit-transition:color .20s linear, background-color .20s linear, border-color .20s linear;-moz-transition:color .20s linear, background-color .20s linear, border-color .20s linear;transition:color .20s linear, background-color .20s linear, border-color .20s linear;}
b {font-weight:bold;}

#sBanner {background-color:#000;color:rgba(255, 255, 255, 0.75);background-attachment:fixed;background-image:url("images/banner.jpg");background-repeat:no-repeat;background-size:cover;background-position:left top;text-align:center;height:100%;}
@media screen and (max-width:480px) { #banner {background-position:45% top;background-size:300%;} }
#sHeader {background:#000;border-bottom:1px solid #333;color:rgba(255, 255, 255, 0.15);height:55px;line-height:55px;cursor:default;position:fixed;left:0;top:0;z-index:10001;width:100%;}
#Logo {width:112px; height:46px; margin-left:15px;margin-top:4px;position:absolute; background:url(images/asrock.png) no-repeat;}

#Menu {display:none;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
#nav {float:right;display:block;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
#nav li{position:relative;float:left;color:#fff;display:block;padding:0 15px;height:55px;text-decoration:none;text-shadow:1px 1px #555;border-left:1px solid #333;}
#nav li:hover {color:#FF9900;text-shadow:1px 1px #000;cursor:pointer;}
#nav li ul {background:#c00;display:none;position:absolute;top:100%;}
#nav li:hover ul {display:block;right:0;left:0;top:100%;}
#nav li ul li {border-left:5px solid #f00;width:240px;background:#c00;}
#nav .subarrow {position:absolute;top:25px;right:15px;border-top:5px solid #fff;border-right:5px solid transparent;border-left:5px solid transparent;width:1px;height:1px;}
@media screen and (max-width: 1420px) { #nav li {padding:0 10px;}}
@media screen and (max-width: 960px) {
	#Menu {display:inline-block;background:#666;padding:0 1em;color:#fff;float:right;text-shadow:1px 1px #000;font-size:1.1em;cursor:pointer;}
	#nav {display:none;position:absolute;width:100%;margin-top:56px;}
	#nav li {float:none;background:#000;}
	#nav li {padding:0 15px;}
	#nav li:hover ul {position:relative;display:block;background:transparent;}
	#nav li:hover ul li{background:transparent;}
	#nav li:hover ul li a{padding-left:30px;}
}
@media screen and (max-width: 480px) {
	#Logo {width:240px;}
}
.wrapper {padding:3em 0 2em 0;position:relative;}
.wrapper > .inner {margin:0 auto;width:80em;}
.wrapper h1 {color:#555;font:700 2.2em "Trebuchet MS", arial, helvetica, sans-serif;line-height:1.2em;text-shadow:2px 2px #eee;padding-top:1em;padding-bottom:0.2em;}
.wrapper h2 {color:#555;font:400 2em "Trebuchet MS", arial, helvetica, sans-serif;line-height:1em;text-shadow:2px 2px #eee;padding-top:3em;padding-bottom:0.2em;}
.wrapper h3 {color:#555;font:400 1.6em "Trebuchet MS", arial, helvetica, sans-serif;line-height:1em;text-shadow:2px 2px #eee;padding:0.5em 0;}

.wrapper li {color:#666;line-height:1.5em;font-size:1.2em;font-family: arial, helvetica, sans-serif;}
.wrapper p {color:#666;line-height:1.5em;font-size:1.2em;font-family: arial, helvetica, sans-serif;padding: 5px 35px 5px 15px;}

.wrapper li {list-style:circle;margin-left:1.2em;}
.wrapper p a, .wrapper li a, .wrapper td a {color:#00f;text-decoration:none}
.wrapper p a:hover, .wrapper li a:hover, .wrapper td a:hover {color:#0aa;}
.wrapper input[type="submit"], .wrapper input[type="reset"], .wrapper input[type="button"], .wrapper button, .wrapper .button {-moz-appearance: none;-webkit-appearance: none;-ms-appearance: none;appearance: none;border-radius: 2.5em;border: 0;cursor: pointer;display: inline-block;font-weight: 700;height: 2.85em;line-height: 2.95em;min-width: 10em;margin:0.5em;padding: 0 1.5em;text-align: center;text-decoration: none;white-space: nowrap;background-color: #555;border:1px solid #666;box-shadow: none;color: #eee !important;}
.wrapper input[type="submit"].icon:before, .wrapper input[type="reset"].icon:before, .wrapper input[type="button"].icon:before, .wrapper button.icon:before, .wrapper .button.icon:before { color: #bbb; }
.wrapper input[type="submit"]:hover, .wrapper input[type="reset"]:hover, .wrapper input[type="button"]:hover, .wrapper button:hover, .wrapper .button:hover { background-color: #777;text-shadow:1px 1px #000; border:1px solid #888; }
.wrapper input[type="submit"]:active, .wrapper input[type="reset"]:active, .wrapper input[type="button"]:active, .wrapper button:active, .wrapper .button:active { background-color: #444;}
@media screen and (max-width: 1280px) {
	.wrapper > .inner {width: 90%;}
}
@media screen and (max-width: 980px) {
	.wrapper > .inner {width: 95%;}
}
@media screen and (max-width: 480px) {
	.wrapper {padding:1em 0;}
	.wrapper > .inner {width: 99%;}
}
table {border-collapse:collapse;border-spacing:0;width:100%;}
table td {font:100 1.2em arial;border-bottom:1px solid #ccc;color:#666;padding:1em;}

.grid-6 {width:50%;float:left;}
.grid-5-3 {width:60%;float:left;}
.grid-5-2 {width:40%;float:left;}
.grid-4 {width:25%;float:left;}
.grid-3 {width:50%;float:left;}
.grid-2 {width:50%;float:left;}
.grid-1 {width:100%;}
.grid-5-3 .image, .grid-5-2 .image{width:100%;}
.grid-3 .image{
	width:100%;
	max-width: 500px;
	display:block;
	margin: auto;
	}
.grid-6 .image{
	width:100%;
	max-width: 460px;
	display:block;
	margin: auto;
	}
.grid-2 .image{
	width:100%;
	max-width: 506px;
	display:block;
	margin: auto;
	}
.grid-1 .image{
	width:100%;
	max-width: 960px;
	display:block;
	margin: auto;
	}
.grid-4 .image{
	width:100%;
	max-width: 100px;
	display:block;
	margin: auto;
	}
@media screen and (max-width: 980px) {
	.grid-4, .grid-3 {width:33.3%;}
	.grid-2, .grid-6 {width:50%;}
}
@media screen and (max-width:736px) {
	.grid-4, .grid-3, .grid-2 {width:50%;}
}
@media screen and (max-width: 480px) {
	.grid-5-3, .grid-5-2, .grid-4, .grid-3, .grid-2, .grid-6 {width:100%;}
}

.image {border-radius: 0;border: 0;display: inline-block;position: relative;}
.image img {border-radius: 0;display: block;}
.image.left, .image.right {max-width: 50%;}
.image.left img, .image.right img {width: 100%;}
.image.left {	float: left; padding: 0 1.5em 1em 0; top: 0.25em;}
.image.right {float: right; padding: 0 0 1em 1.5em; top: 0.25em;}

#footer {background-color: #1E2832;color: rgba(255, 255, 255, 0.75);text-align: center;}
#footer .inner {padding: 6em 0 4em 0;	border-top: solid 1px rgba(255, 255, 255, 0.1);margin: 0 auto;width: 75%;font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;}
@media screen and (max-width: 980px) {
	#footer .inner {padding: 5em 0 3em 0;width: 100%;}
}
@media screen and (max-width: 736px) {
	#footer .inner {padding: 3em 0 1em 0;}
}
@media screen and (max-width: 480px) {
	#H2Rsmall {display:none;}
	#footer .inner {padding: 2em 0 0.1em 0;}
}

.transhover {filter:alpha(opacity=50);-moz-opacity:0.5;opacity: 0.5;}

#GoTop {width:80px;height:80px;position:fixed;right:1em;bottom:1em;;z-index:10005;background:url(images/arrow.png);display:none;cursor:pointer;}

