@charset "UTF-8";

/*  openstyle.css v1.0 - open CSS stylesheet
 *
 *  Copyright (c) 2012 Tomas Bagdanavicius, http://www.lwis.net                      
 * 
 *	Dual licensed under the MIT and GPL licenses
 *	http://www.lwis.net/legal/licenses/MIT.txt
 *	http://www.lwis.net/legal/licenses/GPL.txt
 */


@import "reset.css";


/* -- Generic styling -- */

html, body { height: 100%; }
body { background: #fff url(../images/texture_misty.jpg); color: #333; font: .875em/normal Calibri, "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif; }

a,a:link { padding: 0 2px; color: #c6762f; }
a:visited { color: #715d4b; }
a:hover { border-bottom: solid 1px #c6762f; }

h1,h2,h3,h4,h5,h5 { margin-bottom: .5em; }
h1 { font-size: 2.136em; font-weight: normal; }
h2 { font-size: 1.781em; }
h3 { font-size: 1.284em; }

p,form { margin-bottom: 1em; }

code { font-size: 14px; }

blockquote { padding: 5px 0 0 27px; background: url(../images/quotes1-open.png) no-repeat; }
blockquote p { margin-bottom: .5em; }
blockquote .a { padding: 2px 27px 5px 0; background: url(../images/quotes1-close.png) 100% 100% no-repeat; white-space: nowrap; *display: inline-block; }
blockquote cite { display: block; }


/* -- Form & its elements -- */

input, select, textarea { vertical-align: middle; -webkit-appearance: none; border-radius: 0; }
input.text, input.smalltext, input.tinytext, textarea, select { padding: 7px 10px; border: solid 1px #ccc; border-width: 0 0 1px; background: #fff; color: #5a5a5a; font-family: Arial, Helvetica, sans-serif; font-size: 1em; }
input.text:focus, textarea:focus, select:focus { border-color: #ccc; outline: none; }
input.button { border: solid 1px #aaa; background: #eee; color: #000; font-size: 1em; font-family: Calibri, Arial, Helvetica, sans-serif; font-weight: bold; text-transform: uppercase; }
input.button:active { border-color: #828177 #f9f8f3 #f9f8f3 #828177; }
textarea { overflow: auto; height: 100px; resize: vertical; }

form { float: left; width: 100%; position: relative; }
form ul > li { position: relative; z-index: 1; float: left; width: 100%; margin-bottom: .5em; }
form ul > li label { float: left; width: 20%; }
form ul > li input.text, form ul > li textarea { position: relative; z-index: 2; }
form ul > li input.text:focus { z-index: 4; background-color: #fff; }
form .alert { border-color: #ff0000 !important; }
form .alert.inputgroup { padding: 5px; }
form .alert.inputgroup { padding: 5px 10px; }
form .alert-message { display: none; margin: 0 0 1em; padding: 5px 12px; background: #ff0000; color: #fff; }
form .alert-message * { vertical-align: baseline; }


/* -- Links & Buttons -- */

a.main-site { float: left; padding: 5px 0 5px 45px; background: url(../images/arrow1-leftwards.png) 0 50% no-repeat; }
a.main-site, a.main-site:link, a.main-site:visited { border: none; color: #000; text-decoration: none; }


/* -- Horizontal centering of floating elements -- */

.cf { overflow: hidden; position: relative; }
.cf > * { float: left; width: auto; position: relative; left: 50%; margin: 0; padding: 0; }
.cf > * > * { float: left; position: relative; right: 50%; }


/* -- Layout models -- */

.overlay { position: fixed; top: 0; left: 0; right: 0; height: 20000px; background: #000; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: alpha(opacity=65); -moz-opacity: .65; -khtml-opacity: .65; opacity: .65; }

.section { margin-bottom: 45px; }
.section.highlight { position: relative; float: left; width: 100%; margin: -11px -11px 0; padding: 10px; border: solid 1px #bbb; background: #fff !important; -webkit-box-shadow: 0 0 4px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 0 4px rgba(50, 50, 50, 0.75); box-shadow: 0 0 4px rgba(50, 50, 50, 0.75); }

.curtain { display: none; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 9999; background: #fff; }
.curtain .notice { display: none; }


/* -- Listings -- */

.listingA { list-style: none; float: left; width: 100%; margin-bottom: 1em; padding-left: 0; }
.listingA > li { clear: both; float: left; width: 98%; margin: 0; padding: 5px 1%; border-top: double 1px #bbb; }
.listingA > li:first-child { list-style: none; border-top: none; font-weight: bold; }
.listingA > li:hover { background-color: #ddd; }
.listingA > li > * { float: left; width: 33%; }
.listingA > li > code { background: none; }
.listingA > li > *:first-child { width: 20%; }
.listingA > li > *:first-child + * { width: 60%; }
.listingA > li > *:first-child + * + * { float: right; width: 15%; }

.listingB { list-style: none; padding: 0; }
.listingB > li { margin: .5em 0; border: solid 1px #bbb; }
.listingB > li > a { display: block; padding: 8px 8px 8px 15px; border: solid 1px #fff; background: #eee url(../images/grad1.png) 0 0 repeat-x; }
.listingB > li > a:hover, .listingB > li > a.on { border-color: #e3e3e3; }

.listingC { list-style: none; padding: 0; }
.listingC > li { margin: .5em 0; }
.listingC > li blockquote { margin-bottom: 1em; font-style: italic; }
.listingC > li ul { margin-left: 20px; padding-left: 7px; border-left: solid 1px #aaa; }


/* -- Faqs -- */

.faqs > * { clear: both;  }
.faqs > * > em:first-child { display: none; }
.faqs > dt { margin-bottom: 7px; font-weight: bold; }
.faqs > dd { margin-bottom: 1em; margin-left: 20px; padding-left: 7px; border-left: solid 1px #aaa; }


/* -- Combo Box -- */

.combo { position: relative; float: left; }
.combo:hover, .combo.hover { z-index: 1001; margin: -9px -15px; padding: 8px 14px; border: solid 1px #bbb; background-color: white; -webkit-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); }
.combo:hover > *:first-child, .combo.hover > *:first-child, .combo:hover > .combo-title, .combo.hover > .combo-title { position: relative; z-index: 1100; margin: 0 -14px -20px !important; padding: 0 14px 20px; background-color: white !important; }
.combo > .popup { display: none; }
.combo:hover > .popup, .combo.hover > .popup { display: block; position: absolute; top: 100%; left: -1px; z-index: 1000; width: 561px; padding: 15px 14px 14px; border: solid 1px #bbb; background: #fff; -webkit-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); -moz-box-shadow-bottom: none; box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); }

.combo + .overlay { display: none; }
.combo:hover + .overlay, .combo.hover + .overlay { display: block; z-index: 900; }


/* -- Google Ads -- */

.g-ads { clear: both; overflow: hidden; }
.g-ads-468x15 { width: 100%; height: 15px; margin-top: 2em; padding: 6px 3px; background: #fff; }
.g-ads-234x60 { height: 60px; margin: 1em 0; }
.g-ads-728x90 { width: 728px; height: 90px; margin: 0 auto; }


/* -- Story -- */

.story li { margin-bottom: .5em; }
.story ol { list-style: decimal; margin-bottom: 1em; padding-left: 2em; }
.story ul { list-style: disc; margin-bottom: 1em; padding-left: 2em; }


/* -- Structure -- */

#wrapper { position: relative; width: 100%; margin: 0 auto; min-height: 96%; padding: 2% 0; }
#sidebar { float: right; width: 30%; min-height: 150px; margin-bottom: 15px; }
#content { float: left; width: 65%; }


/* -- The Header -- */

#header { position: relative; z-index: 3; width: 960px; min-height: 85px; margin: 0 auto; border-bottom: solid 3px #bbb; font-family: Arial, sans-serif; }
#header > .hgroup { position: relative; float: left; width: 70%; margin: 0; padding-bottom: 15px; }
#header > .hgroup h1 { float: left; margin: 0; font-size: #000; font-weight: normal; letter-spacing: -2px; }
#header > .hgroup h1 + h1 { display: none; }
#header > .hgroup h1 > span { display: block; padding-right: 51px; background: url(../images/arrow1-downwards.png) 100% 50% no-repeat; }
#header > .hgroup > h2 { clear: both; margin: 0; padding-top: 7px; font-size: 15px; font-weight: normal; }
#header > .recommend { overflow: hidden; float: right; width: 29%; height: 40px; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); -moz-opacity: .4; -khtml-opacity: .4; opacity: .4; }
#header > .recommend:hover { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; }
#header > .recommend a:hover { border: none; }
#header .combo > .popup ul { overflow: hidden; margin: 0 -7px 0 -8px; }
#header .combo > .popup ul > li { position: relative; display: inline; float: left; width: 252px; margin: 0 7px 0 8px; padding-bottom: 20px; border: solid 1px #aaa; background: #ddd; }
#header .combo > .popup ul > li h2 { position: absolute; bottom: 0; left: 0; right: 0; margin: 0; padding: 5px 7px; background-color: #fff; font-size: .9em; font-weight: normal; font-family: "Arial", "Segoe UI"; }
#header .combo > .popup ul > li h2 a { padding: 0; }
#header .combo > .popup ul > li h2 a:hover { border: none; }
#header .combo:hover > h1:first-child { display: none; }
#header .combo:hover > h1 + h1 { display: block; }


/* -- Main Banner -- */

#banner { clear: both; position: relative; z-index: 2; padding-top: 20px; }
#banner.section { margin: 2em 0; padding: 1em 0; }
#banner > .footnote { width: 960px; min-height: 14px; margin: 0 auto; padding: 0 5px; color: #aaa; font-size: 12px; text-align: left; text-shadow: #fff -1px 1px 1px; }
#banner > .footnote em { float: left; }
#banner > .footnote code { float: right; }


/* -- Main Area -- */

#main { clear: both; width: 960px; margin: 0 auto; padding-top: 30px; }
#main h1, #main h2 { margin-bottom: .5em; font-weight: normal; }
#main h2 { padding-bottom: 7px; border-bottom: solid 3px #bbb; }


/* -- Download section -- */

#download-support.section { text-align: center; }
#download-support.section:hover { border-color: #248ae3; -moz-box-shadow: 0 0 5px #248ae3; -webkit-box-shadow: 0 0 5px #248ae3; -moz-box-shadow: 0 0 5px #248ae3; box-shadow: 0 0 5px #248ae3; }
#download-support.section a#download { position: relative; display: inline-block; padding: 7px 12px; background: #248ae3; color: #fff; text-transform: uppercase; }
#download-support.section a#download:hover { border: none; }
#download-support.section a#download > em { display: none; position: absolute; top: 0; right: 0; bottom: 0; left: 0; padding: 7px 12px; background: #248ae3; color: #fff; }
#download-support.section a#download:hover > em { display: block; }


/* -- The Footer -- */

#footer { clear: both; width: 960px; margin: 0 auto; padding: 20px 0 0; color: #aaa; border-top: solid 1px #ccc; text-align: center; text-shadow: #fff -1px 1px 1px; }

#subnav { clear: both; overflow: visible; float: left; width: 100%; padding-bottom: 2em; }
#subnav ul.links { float: left; }
#subnav ul.links > li { z-index: 950; display: inline; float: left; margin: 0 12px; }

#subnav ul.links > li > .trigger > a { float: left; padding: 6px 0 0; border-bottom: solid 1px #bbb; background: url(../images/arrow2.png) 50% 0 no-repeat; font: 13px Arial; }
#subnav ul.links > li > .trigger > a, #subnav ul.links > li > .trigger > a:link, #subnav ul.links > li > .trigger > a:visited { color: #000; }
#subnav ul.links > li > .trigger > a > span { position: relative; z-index: 1100; float: left; padding: 9px 15px; background-color: #fff; cursor: pointer; }
#subnav ul.links > li > .trigger > .section { top: auto; bottom: 100%; left: 50%; width: 480px; margin: 0 0 -12px -280px; padding: 40px; border: solid 1px #aaa; background: #fff; text-align: left; -webkit-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); }

#subnav ul.links > li > .trigger:hover, #subnav ul.links > li > .trigger.hover { z-index: 1200; margin: 0; padding: 0; border: none; }
#subnav ul.links > li > .trigger:hover > *:first-child, #subnav ul.links > li > .trigger.hover > *:first-child { position: static !important; margin: 6px -26px -7px !important; padding: 0; background: none; border: solid 1px #aaa; border-top: none; -webkit-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); }
#subnav ul.links > li > .trigger:hover > *:first-child > span, #subnav ul.links > li > .trigger.hover > *:first-child > span { margin: 0 0 0; padding: 9px 40px 15px; border-top: none; background-color: #fff; }

#subnav ul.links > li > .trigger > .section:hover { padding: 40px; }
#subnav ul.links > li > .trigger > .section form ul { float: left; width: 100%; margin-bottom: 2em; }
#subnav ul.links > li > .trigger > .section form ul > li > label { padding-top: 9px; }
#subnav ul.links > li > .trigger > .section form ul > li > input.text { width: 250px; font-size: 1.5em; }
#subnav ul.links > li > .trigger > .section form ul > li > textarea { width: 350px; resize: none; }
#subnav ul.links > li > .trigger > .section form input.submit { width: 80px; height: 35px; margin-left: 20%; }

#subnav ul.links + * { clear: both; }


/* -- @namespace 'Free CSS Drop-Down Menu Framework' -- */

html#free-css-drop-down-menu-framework #banner { width: 976px; margin: 0 auto; }
html#free-css-drop-down-menu-framework #banner > ul { list-style: none; padding: 0; }
html#free-css-drop-down-menu-framework #banner > ul > li { position: relative; z-index: 2; float: left; margin: 7px; width: 230px; height: 115px; padding: 0; }
html#free-css-drop-down-menu-framework #banner > ul > li:hover, html#free-css-drop-down-menu-framework #banner > ul > li.hover { z-index: 3; width: 258px; height: 136px; margin: 0 -7px -7px; border-color: #000; }
html#free-css-drop-down-menu-framework #banner > ul > li > div { overflow: hidden; float: left; width: 100%; height: 100%; background-color: #fff; border: solid 1px #aaa; }
html#free-css-drop-down-menu-framework #banner > ul > li > div > img { display: block; width: 100%; height: 100%; margin: 0; }
html#free-css-drop-down-menu-framework #banner > ul > li:hover > div, html#free-css-drop-down-menu-framework #banner > ul > li.hover > div { position: absolute; top: -7px; left: 0; height: auto; -webkit-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); -moz-box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); box-shadow: 0 0 5px rgba(50, 50, 50, 0.75); }
html#free-css-drop-down-menu-framework #banner > ul > li:hover > div > img, html#free-css-drop-down-menu-framework #banner > ul > li.hover > div > img { margin-bottom: 1em; }
html#free-css-drop-down-menu-framework #banner > ul > li:hover > div > ul, html#free-css-drop-down-menu-framework #banner > ul > li.hover > div > ul { margin: 0 12px 12px; }
html#free-css-drop-down-menu-framework #banner > ul > li:hover > div > ul > li, html#free-css-drop-down-menu-framework #banner > ul > li.hover > div > ul > li { margin: 6px 0; }


/* -- @namespace 'Plain Horizon' -- */

html#plain-horizon #header { border-bottom: 0; }
html#plain-horizon #banner .footnote { margin-top: 7px; }
html#plain-horizon #banner { padding-top: 0; }
html#plain-horizon #banner a:hover { border: none; }
html#plain-horizon #banner.section { padding: 1em 0; border-width: 1px 0; }