*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,Helvetica,sans-serif}
.txt{margin:auto;width:100%}
/*
@media only screen and (max-width:600px){.txt{background:pink}}
@media only screen and (min-width: 600px){.txt{background:tan}}
@media only screen and (min-width: 768px){.txt{background:khaki}}
@media only screen and (min-width: 992px){.txt{background:lightblue;max-width:1000px}}
@media only screen and (min-width:1200px){.txt{background:palegreen;max-width:1000px}} */
@media only screen and (min-width: 992px){.txt{max-width:1000px}}
@media only screen and (min-width:1200px){.txt{max-width:1000px}}

html,body{height:100%}
html,body,pre{font-size:16px;line-height:26px}
pre{overflow:auto}
body{background-color:#fff;color:#000}
body:before{content:"";height:100%;float:left;width:0;margin-top:-32767px}

a:link, a:visited{transition-duration:250ms;-webkit-transition-duration:250ms;
 color:#205070;text-decoration:none;font-style:normal;border-bottom:1px dotted #888}
a:hover, a:active{background:#e0f0ff;color:#000}
a img{border:0;text-decoration:none}

a.linkedin:hover{position:relative;top:19px;left:1px;padding:0 74px 3px 0;width:74px;height:13px;background:url("linkedin.gif") no-repeat}

a.vleft{position:fixed;top:200px;left:-27px;padding:6px 10px;/* padding within each menu item */
 border-radius:5px 5px 0 0;
 border:2px solid #c0d0e0;
}
a.vright{position:fixed;top:100px;right:-39px;height:36px;z-index:10;padding:6px 10px;/* padding within each menu item */
 border-radius:5px 5px 0 0;
 border:2px solid #c0d0e0;
}

h1,h2,h3,h4{width:100%;color:#205080;font-weight:100;letter-spacing:.2ex;text-shadow:0 1px 1px #d0e0ea}
h1{font-size:24px}
h1:before{content:"- ";/* fallback *//* content:'\2022\2002';•*//* content:'\2013\2002';medium "-" */
 content:'\203a\2002'} /* small ">" */
h2{width:99%;font-size:20px;line-height:40px;border-bottom:2px solid #c0d0e0}
h3{margin:auto}
h3,h4{font-size:17px;text-transform:uppercase}
h4{font-size:15px}

hr{border:none;margin:9px 0;height:1px;color:#ccc;background-color:#ccc}

img{border:0;vertical-align:middle}
p, ul, ol{text-align:justify}
ul, ol{list-style-position:inside;padding:8px 0 8px 24px} /* top right bottom left */
ul{list-style:circle} /* disk square */
.columns ol, .columns li{float:left;width:19em}

tt, code, pre{color:#678;font-family:Consolas,"Courier New",Monaco,Courier,monospace;line-height:20px;font-weight:bold}
tt{color:#678;padding:0 3px}

span{font-family:inherit}

/* responsive iframe */
.iframe-wrap-element{position:relative;overflow:auto;padding-top:135%}
.iframe-wrapped{position:absolute;top:0;left:0;width:100%;height:100%;border:0}

.bgdtxt{position:relative;top:330px;font:2em Times, serif;letter-spacing:.1em;
 color:#ccc;opacity:.01;z-index:-99}

/* ----- tabs -------------------------------------------------------------- */
.tab_hide{display:none;position:fixed}
.tab_page{position:relative}
ul.tabs:before{content:""}
ul.tabs{list-style:none;float:left;position:relative;left:-24px;top:8px;z-index:100}
ul.tabs li{float:left}
ul.tabs li a{display:block;border:1px solid #bbb;border-radius:5px 5px 0 0;background:#eee;padding:7px 17px 0 17px;text-decoration:none;color:#999;
}
ul.tabs li a:hover{background:#f0f0f0;color:#777}
.tab_txt{float:left;width:95%;padding:20px;border:1px solid #ccc;border-radius:0 5px 5px 5px;background:#fff;position:relative;z-index:10;display:none;clear:left;top:-1px;
 box-shadow:0 3px 3px rgba(0,0,0,0.1);
}
/* change tab to selected style */
ul.tabs li a.active,
#tab1:target ~.tab_page .tabs li a.active,
#tab2:target ~.tab_page .tabs li a.tab2,
#tab3:target ~.tab_page .tabs li a.tab3,
#tab4:target ~.tab_page .tabs li a.tab4,
#tab5:target ~.tab_page .tabs li a.tab5,
#tab6:target ~.tab_page .tabs li a.tab6,
#tab7:target ~.tab_page .tabs li a.tab7,
#tab8:target ~.tab_page .tabs li a.tab8,
#tab9:target ~.tab_page .tabs li a.tab9,
#tab10:target ~.tab_page .tabs li a.tab10,
#tab11:target ~.tab_page .tabs li a.tab11,
#tab12:target ~.tab_page .tabs li a.tab12,
#tab13:target ~.tab_page .tabs li a.tab13,
#tab14:target ~.tab_page .tabs li a.tab14,
#tab15:target ~.tab_page .tabs li a.tab15
{background-color:#fff;border-bottom:1px solid #fff;color:#000}
/* show tab contents */
div.active,
#tab1:target ~.tab_page div.active,
#tab2:target ~.tab_page div#view2,
#tab3:target ~.tab_page div#view3,
#tab4:target ~.tab_page div#view4,
#tab5:target ~.tab_page div#view5,
#tab6:target ~.tab_page div#view6,
#tab7:target ~.tab_page div#view7,
#tab8:target ~.tab_page div#view8,
#tab9:target ~.tab_page div#view9,
#tab10:target ~.tab_page div#view10,
#tab11:target ~.tab_page div#view11,
#tab12:target ~.tab_page div#view12,
#tab13:target ~.tab_page div#view13,
#tab14:target ~.tab_page div#view14,
#tab15:target ~.tab_page div#view15
{display:block}
/* reset the unclicked tabs to active */
#tab2:target ~.tab_page .tabs li a.active,
#tab3:target ~.tab_page .tabs li a.active,
#tab4:target ~.tab_page .tabs li a.active,
#tab5:target ~.tab_page .tabs li a.active,
#tab6:target ~.tab_page .tabs li a.active,
#tab7:target ~.tab_page .tabs li a.active,
#tab8:target ~.tab_page .tabs li a.active,
#tab9:target ~.tab_page .tabs li a.active,
#tab10:target ~.tab_page .tabs li a.active,
#tab11:target ~.tab_page .tabs li a.active,
#tab12:target ~.tab_page .tabs li a.active,
#tab13:target ~.tab_page .tabs li a.active,
#tab14:target ~.tab_page .tabs li a.active,
#tab15:target ~.tab_page .tabs li a.active
{background-color:#eee;border:1px solid #ccc;color:#999}
/* hide active tab when selection changed */
#tab2:target ~.tab_page div.active,
#tab3:target ~.tab_page div.active,
#tab4:target ~.tab_page div.active,
#tab5:target ~.tab_page div.active,
#tab6:target ~.tab_page div.active,
#tab7:target ~.tab_page div.active,
#tab8:target ~.tab_page div.active,
#tab9:target ~.tab_page div.active,
#tab10:target ~.tab_page div.active,
#tab11:target ~.tab_page div.active,
#tab12:target ~.tab_page div.active,
#tab13:target ~.tab_page div.active,
#tab14:target ~.tab_page div.active,
#tab15:target ~.tab_page div.active
{display:none}

/* ----- li-menu --------------------------------------------------------------
<div id="header" class="page"><div class="tabmenu">
<a href="http://gwan.com/" class="title">G-WAN server</a>
<ul>
  <li><a class="current" href="/about">About</a></li>
  <li><a href="/buy">Support</a></li>
  <li><a href="/api">API</a></li>
  <li><a href="/faq">FAQ</a></li>
  <li><a href="/developers">Developers</a></li>
  <li><a href="/en_timeline.html">Updates</a></li>
  <li><a class="green" href="/download">Download</a></li>
  <li><a href="/blog" target="_blank">Blog</a></li>
</ul>
</div></div> */

.tabmenu{padding:0;width:100%;border-top:5px solid #70a0bb;background:transparent;position:fixed;z-index:9999}
.tabmenu ul{float:right;margin:0;padding:0;list-style:none;font-size:18px;line-height:34px}
.tabmenu li{display:inline}
.tabmenu a:link, .tabmenu a:visited{float:left;display:block;background-color:#9abccf;color:#fff;
 border-bottom:0;margin-left:0;padding:0 8px;border-radius:0 0 5px 5px;box-shadow:0 3px 3px rgba(0,0,0,.5)}

.tabmenu a.current, .tabmenu a:hover, .tabmenu a:active{background-color:#70a0bb;color:#fff;padding:4px 8px}
.tabmenu a.green{background-color:#accf4a}
.tabmenu a.green:hover, .tabmenu a.green.current{background-color:#98bf21}

.tabmenu a.fushia{background-color:#c0a1bb}
.tabmenu a.fushia:hover, .tabmenu a.fushia.current{background-color:#b091ab}

.tabmenu .title{color:#fff;letter-spacing:.2ex;border-bottom:0;line-height:34px}

/* make font-size relative to screen width so all tabs fit on screen's width */
@media screen and (max-width:720px){
 .tabmenu a{font-size:2.3vw;font-weight:bold;line-height:9vw;padding:0}
 .tabmenu .title{display:none;visibility:hidden;line-height:0;height:0}
} 

/* ----- tootips -------------------------------------------------------- */

a.tooltip:link, a.tooltip:visited{color:#204070;border-bottom:1px dashed #888}
a.tooltip{outline:none}
a.tooltip:hover{text-decoration:none;cursor:help} 
a.tooltip span{z-index:9;display:none;padding:12px;margin-top:32px;
 margin-left:-41px;line-height:120%;text-align:left;font-size:85%;
 border-radius:4px;box-shadow:5px 5px 8px #aaa}
a.tooltip:hover span{display:inline;position:absolute;border:1px solid #bbb;color:#000;background:#f8f8f0}

/* ----- H2 note ----------------------------------------------------------- */

.hnote{
 position:relative;top:-30px;
 float:right;padding:6px;background:#fff;color:#70a0bb;
 text-align:center;overflow:hide;border:1px solid #c0d0e0}
.hnote:hover{cursor:pointer;background:#eee;color:#555}
.hnote .month, .hnote .year, .hnote .small{
 text-transform:uppercase;font-size:12px;line-height:12px}
.hnote .day, .hnote .big{font-weight:bold;font-size:17px;
 letter-spacing:.1ex;line-height:18px}

/* ----- bubble ------------------------------------------------------ */

.bubble{position:relative;padding:17px;margin:.3em;max-width:90%;border:3px solid #bbb;border-radius:9px}

.bubble.lf{margin-left:30px}  /* left triangle */
.bubble.rg{margin-right:30px} /* right triangle */

/* THE TRIANGLE */
/* default variant: bottom */
.bubble:before{
 content:"";position:absolute;
 bottom:-18px;/* value = - border-top-width - border-bottom-width */
 left:40px;/* horizontal position */
 border-width:18px 18px 0;border-style:solid;border-color:#bbb transparent;
 display:block;/* reduce the damage in FF3.0 */
 width:0;
}
.bubble:after{ /* the smaller  triangle */
 content:"";position:absolute;
 bottom:-13px;/* value = - border-top-width - border-bottom-width */
 left:45px;/* value = (:before left) + (:before border-left) - (:after border-left) */
 border-width:13px 13px 0;border-style:solid;border-color:#fff transparent;
 display:block;width:0}

/* Variant: top */
.bubble.up:before{ /* the larger triangle */
 top:-18px;/* value = - border-top-width - border-bottom-width */
 bottom:auto;
 left:40px;/* controls horizontal position */
 border-width:0 18px 18px;
}
.bubble.up:after{ /* the smaller triangle */
 top:-13px;/* value = - border-top-width - border-bottom-width */
 bottom:auto;
 left:45px;/* value = - border-left-width - border-right-width */
 border-width:0 13px 13px;
}

/* Variant: left */
.bubble.lf:before{ /* the larger triangle */
 top:12px;/* controls vertical position */
 bottom:auto;
 left:-30px;/* value = - border-left-width - border-right-width */
 border-width:13px 30px 13px 0;
 border-color:transparent #bbb;
}
.bubble.lf:after{ /* the smaller triangle */
 top:16px;/* value = (:before top) + (:before border-top) - (:after border-top) */
 bottom:auto;
 left:-22px;/* value = - border-left-width - border-right-width */
 border-width:9px 22px 9px 0;
 border-color:transparent #fff;
}

/* Variant: right */
.bubble.rg:before{ /* the larger triangle */
 top:12px;/* controls vertical position */
 bottom:auto;
 left:auto;
 right:-30px;/* value = - border-left-width - border-right-width */
 border-width:13px 0 13px 30px;
 border-color:transparent #bbb;
}
.bubble.rg:after{ /* the smaller triangle */
 top:16px;/* value = (:before top) + (:before border-top) - (:after border-top) */
 bottom:auto;
 left:auto;
 right:-22px;/* value = - border-left-width - border-right-width */
 border-width:9px 0 9px 22px;
 border-color:transparent #fff;
}

/* ----- AJAX -------------------------------------------------------------- */

.hide{display:none;visibility:hidden;line-height:0;height:0}
.error {border:2px solid #ff0000}
.small {font-size:95%;line-height:1.3}
.smaller{font-size:85%;line-height:1.3}
.larger {font-size:105%}
p.left {text-align:left}
p.center {text-align:center}
p.leftmargin {margin-left:32px}
div.leftmargin {margin-left:32px}
p.right {text-align:right}
.caps {text-transform:uppercase}
.norm {text-transform:none}
.shadow {text-shadow:1px 1px 1px #ccddff}
.rshadow,.note.rshadow{
 box-shadow:0 3px 3px #ddd;
}
.transp{opacity:.5}
.noselect{
 -webkit-user-select:none;
 -khtml-user-select:none;
 -moz-user-select:-moz-none;
 -o-user-select:none;
 user-select:none;
}
.dlink:hover{padding:10px;background-color:rgba(0,0,0,.03);
 border:1px solid rgba(0,0,0,.08);border-radius:7px;
}
.llink:hover{padding:10px;background-color:rgba(255, 255, 255, 0.3);
 border:1px solid rgba(255, 255, 255, 0.5);border-radius:7px;
}
.darker{padding:10px;background-color:rgba(0,0,0,.03);
 border:1px solid rgba(0,0,0,.08);border-radius:7px;
}
.lighter{padding:10px;background-color:rgba(255, 255, 255, 0.3);
 border:1px solid rgba(255, 255, 255, 0.5);border-radius:7px;
}
.clearall {margin:0;padding:0;clear:both}
.clear {clear:both}
.x2{
 -webkit-transform:scale(2);
 -moz-transform:scale(2);
 -o-transform:scale(2);
 -ms-transform:scale(2);
 transform:scale(2);
}
.rotr{
 -webkit-transform:rotate(90deg);
 -moz-transform:rotate(90deg);
 -o-transform:rotate(90deg);
 -ms-transform:rotate(90deg);
 transform:rotate(90deg);
}
.rotl{
 -webkit-transform:rotate(-90deg);
 -moz-transform:rotate(-90deg);
 -o-transform:rotate(-90deg);
 -ms-transform:rotate(-90deg);
 transform:rotate(-90deg);
}

/* ----- colors ------------------------------------------------------------ */

.cyellow{color:#ffff80}
.cgreen {color:#97b400}
.cmgreen{color:#372}
.cred {color:#ff7070}
.cmred{color:#e00}
.cblue {color:#70a0bb}
.corange{color:#d19038}
.clorange{color:#d45500}
.cbrown {color:#aa8360}
.cviolet{color:#a08cc9}
.clgrey {color:#ccc}
.cgrey {color:#999}
.cdgrey {color:#555}
.cgww32 {color:#758611}
.cblack {color:#222}
.cmagenta{color:#630030}
.cdred {color:#872300}
.cwhite {color:#fff}

.bgreen{background:#e0f0d0}
.blgreen{background:#accf4a}
.bmgreen{background:#98bf21}
.bdgreen{background:#7a991a}
.bblue {background:#daeaf0}
.blblue{background:#e0f0ff}
.bmblue{background:#9abccf}
.bdblue{background:#70a0bb}
.bred {background:#ffe0d0}
.blred{background:#ffefdf}
.bgrey {background:#eaeaea}
.blgrey{background:#f8f8f8}
.bmgrey{background:#999}
.bdgrey{background:#777}
.bblack{background:#000}
.bwhite{background:#fff}
.blyellow{background:#fffbf0}
.byellow{background:rgba(255,255,112, .7)}
.borange{background:#faeaca}

.forange{background:#fc9200}
.fbluegr{background:#2daebf}
.ffushia{background:#a9014b}
.fggreen{background:#b8d30b}

/* ----- forms ------------------------------------------------------------- */

fieldset, input, label, select, textarea{
 font-family:Arial,Helvetica,'Helvetica Neue',Verdana,sans-serif;
 font-size:100%;
 line-height:26px;
 border-radius:12px;
}
input[type=submit], input[type=checkbox], input[type=radio], label, select{
 cursor:pointer;
}
input:focus, textarea:focus {
 outline:none;
}
fieldset{width:90%;font-size:90%;color:#555;border:1px solid #ddd;padding:24px}
select {font-size:100%;background:#fff;border:1px solid #ddd;padding:2px}
legend {padding:0 10px;color:#888}
label {width:15%;vertical-align:top;text-align:right;margin-right:10px;display:inline-block}
textarea, input{font-size:100%;border:1px solid #e0e0e0;padding:2px 7px;margin-bottom:2px}
select:hover, textarea:hover, input:hover{border:1px solid #90d0f0}
select:focus, textarea:focus, input:focus{background:#eff8ff;border:1px solid #90d0f0}

.button {
 padding:2px 10px;
 background:#fff;
}
.button:hover, .button:focus{
 border:1px solid #80c0e0;
 background:#e0f0f0;
 color:#000;
 cursor:pointer;
}

.button[disabled]:hover, .button[disabled]:focus{
 border:1px solid #ddd;background:#eee;color:#777;cursor:default}

input[type=submit]{transition-duration:250ms;
-webkit-transition-duration:250ms;
 padding:2px 10px;display:block;border:1px solid #bbb;background:#fff;color:#555}
input[type=submit]:hover, input[type=submit]:focus{
 border:1px solid #80c0e0;background:#e0f0f0;color:#000}

/* <input type="text" disabled="disabled"> */
input[disabled], input[readonly], select[disabled], select[readonly], 
checkbox[disabled], checkbox[readonly], textarea[disabled], textarea[readonly]
{background:#eee;color:#777;cursor:default} 

/*
fieldset{
 overflow:hidden;
 position:relative;
}
input[type=checkbox]{
}
input[type=checkbox] + label{
 display:block;
}
input[type=checkbox]:checked + label{

}

input.text:focus{
 background-color:#90d0f0;
 color:#666;
}
input[type=checkbox]:focus + label, input[type=radio]:focus + label{
 background-color:#90d0f0;
 color:#000;
} */

/* ----- buttons -----------------------------------------------------------
 
.button, .button a, .button a:link, .button a:visited{
 cursor:pointer;
 padding:1px 2px;
 margin-top:3px;
 border:outset 1px #444;
 background:#999;
 color:#666;
 
 background:#e8e8e8;
 background-image:-webkit-gradient(linear, top, bottom, from(#fff), to(#e8e8e8));
 background-image:-webkit-linear-gradient(top, #fff, #e8e8e8);
 background-image:-moz-linear-gradient(top, #fff, #e8e8e8);
 background-image:-ms-linear-gradient(top left, #fff, #e8e8e8);
 background-image:-o-linear-gradient(top left, #fff, #e8e8e8);
 background-image:linear-gradient(top left, #fff, #e8e8e8);
} 
.button:hover, .button:focus{
 color:#444;
 border:outset 1px #000;
 
 background:#d8e8f8;
 background-image:-webkit-gradient(linear, top, bottom, from(#eafaff), to(#d8e8f0));
 background-image:-webkit-linear-gradient(top, #eafaff, #d8e8f0);
 background-image:-moz-linear-gradient(top, #eafaff, #d8e8f0);
 background-image:-ms-linear-gradient(top left, #eafaff, #d8e8f0);
 background-image:-o-linear-gradient(top left, #eafaff, #d8e8f0);
 background-image:linear-gradient(top left, #eafaff, #d8e8f0);
}
.button[disabled]{
 background:#999;
 cursor:default;
 color:#888;
}
.button[disabled]:hover{
 border:1px outset #ccc;
}
*/
/* ----- Data URI imgs ----------------------------------------------------- */

.bimg {background-image:url("gwan.gif");background-size:100%}
.scaled {min-width:100%;min-height:100%;width:auto;height:auto}

.lmargin {margin-left:1em}
.llmargin{margin-left:2em}
.rmargin {margin-right:1em}
.rrmargin{margin-right:2em}
.pad16{padding:16px}
.mar16{margin:16px}
.marb16{margin-bottom:16px}

.linkedin {position:relative;top:18px;padding:0 74px 3px 0;width:74px;height:13px;background:url("linkedin.gif") no-repeat}
.gwan_pw {padding-right:54px;width:54px;height:15px;background:url("gwan_pw.gif") no-repeat}
.gwan_rulez{padding-right:80px;width:80px;height:15px;background:url("gwan_rulez.gif") no-repeat}
.gwan16 {padding-right:16px;width:16px;height:16px;background:url("gwan16.gif") no-repeat}
.gwan32 {position:relative;top:6px;padding:14px 40px 0 0;width:32px;height:32px;background:url("gwan32.gif") no-repeat}
.rss  {position:relative;top:13px;left:4px;padding:16px 16px 0 0;width:16px;height:16px;background:url("rss.png") no-repeat}

/* .tpixel{width:1px;height:1px;background:url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==) no-repeat} */

/* ----- tags -------------------------------------------------------------- */
/* <b class="rtag">Hello</b> */
.rtag {text-align:center;width:auto;padding:3px 10px;
 background:#d8e8f8;
 background-image:-webkit-gradient(linear, top, bottom, from(#eafaff), to(#d8e8f8));/* Saf4+, Chrome */
 background-image:-webkit-linear-gradient(top, #eafaff, #d8e8f8);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-linear-gradient(top, #eafaff, #d8e8f8);/* FF3.6 */
 background-image:-ms-linear-gradient(top left, #eafaff, #d8e8f8);/* IE10 */
 background-image:-o-linear-gradient(top left, #eafaff, #d8e8f8);/* Opera 11.10+ */
 background-image:linear-gradient(top left, #eafaff, #d8e8f8);
 
 border:1px solid #a0c0d0;
 border-radius:12px;
 text-shadow:1px 1px #e0e0f0;
 box-shadow:0 3px 3px #ddd;
}
.rttag {text-align:center;width:auto;padding:3px 10px;background:#e8e8e8;
 background-image:-webkit-gradient(linear, top, bottom, from(#fff), to(#e8e8e8));/* Saf4+, Chrome */
 background-image:-webkit-linear-gradient(top, #fff, #e8e8e8);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-linear-gradient(top, #fff, #e8e8e8);/* FF3.6 */
 background-image:-ms-linear-gradient(top left, #fff, #e8e8e8);/* IE10 */
 background-image:-o-linear-gradient(top left, #fff, #e8e8e8);/* Opera 11.10+ */
 background-image:linear-gradient(top left, #fff, #e8e8e8);

 border:1px solid #bebebe;
 border-radius:12px;
 text-shadow:1px 1px #e0e0e0;
 box-shadow:0 3px 3px #ddd;
}

.ctag{
 font-family:Consolas,"Courier New",Monaco,Courier,monospace;
 font-size:95%;line-height:20px;color:#567;text-align:center;width:auto;padding:0 3px;
 background:#ebefff;border:1px solid #e0e0e0;
 border-radius:3px;
}

/* ----- gradients --------------------------------------------------------- */

.lmgrad{
 background:#e8e8e8;
 background-image:-webkit-gradient(linear, top, bottom, from(#eee), to(#ddd));/* Saf4+, Chrome */
 background-image:-webkit-linear-gradient(top, #eee, #ddd);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-linear-gradient(top, #eee, #ddd);/* FF3.6+ */
 background-image:-ms-linear-gradient(top left, #eee, #ddd);/* IE10 */
 background-image:-o-linear-gradient(top left, #eee, #ddd);/* Opera 11.10+ */
 background-image:linear-gradient(top left, #eee, #ddd);
}

.lgrad{
 background:#f8f8f8;
 background-image:-webkit-gradient(linear, top, bottom, from(#fff), to(#eee));/* Saf4+, Chrome */
 background-image:-webkit-linear-gradient(top, #fff, #eee);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-linear-gradient(top, #fff, #eee);/* FF3.6+ */
 background-image:-ms-linear-gradient(top left, #fff, #eee);/* IE10 */
 background-image:-o-linear-gradient(top left, #fff, #eee);/* Opera 11.10+ */
 background-image:linear-gradient(top left, #fff, #eee);
}

.llgrad{
 background:#fff;
 background-image:-webkit-gradient(linear, top, bottom, from(#fff), to(#f8f8f8));/* Saf4+, Chrome */
 background-image:-webkit-linear-gradient(top, #fff, #f8f8f8);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-linear-gradient(top, #fff, #f8f8f8);/* FF3.6+ */
 background-image:-ms-linear-gradient(top left, #fff, #f8f8f8);/* IE10 */
 background-image:-o-linear-gradient(top left, #fff, #f8f8f8);/* Opera 11.10+ */
 background-image:linear-gradient(top left, #fff, #f8f8f8);
}

/* ----- text bulles ------------------------------------------------------- */

.bule p{position:relative;top:3px;text-align:center;margin:0;padding:0 8px;
 color:#555}
 
.bule{width:auto;border:2px solid #ddd;margin:0;padding:2px 0;
 border-radius:12px;
}
/* bulle V tick (exterior grey background) */
.bule em{
 position:relative;top:10px;
 display:block;
 width:0;height:0;
 margin:0 0 0 20px;padding:0;
 color:#fff;
 overflow:hidden;
 border-top:10px solid #ddd;
 border-left:8px dotted transparent;
 border-right:8px dotted transparent;
}
/* bulle V tick (interior white foreground) */
.bule tt{
 position:relative;top:10px;
 display:block;
 width:0;height:0;
 margin:-13px 0 0 20px;padding:0;
 overflow:hidden;
 border-top:10px solid #fff;
 border-left:8px dotted transparent;
 border-right:8px dotted transparent;
}

/* ----- tables ------------------------------------------------------------ */
/*
<style type="text/css">
table.simple{
 font-size:15px;
 color:#222;
 border-width:1px;
 border-color:#aaa;
 border-collapse:collapse;
}
table.simple th{
 padding:4px;
 border:1px solid #aaa;
 background-color:#a0b0c0;
}
table.simple td{
 padding:4px;
 border:1px solid #aaa;
 background-color:#d0e0f0;
}
</style>

<!-- Table goes in the document BODY -->
<table class="simple">
<tr>
 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>
*/

table.clean{font-size:14px;border:2px solid #ccc;border-collapse:collapse;margin-left:16px}
table.clean th{border-width:1px;font-size:90%;padding:2px;border-style:none dotted dotted none;border-color:#eee;
 background-color:#999;letter-spacing:.1ex;line-height:140%;color:white}
table.clean td{text-align:right;font-size:90%;padding:0 4px;border-width:1px;border-style:solid dotted none none;
 border-color:#ccc;background-color:transparent}
tr.d0 td{background-color:white;color:#777}
tr.d1 td{background-color:#f4f4f4;color:#777}
tr.do td{background-color:white;color:#333}
tr.di td{background-color:#e8e8e8;color:#333}
tr.da td{text-align:left;font-weight:bold;text-transform:uppercase;background-color:#efefef;color:#777}
tr.db td{text-align:left;border-width:1px;background-color:#fff;color:#888}
 
/* ----- C source code ----------------------------------------------------- */
/*
<abbr>    abbreviation
<acronym> acronym
<cite>    citation
<code>    computer code
<dfn>     definition
<em>      emphasis
<kbd>     text to type
<samp>    output of program
<strong>  strong emphasis
<var>     variable
*/
.colnum {color:#aaa;text-align:center;min-width:32px;padding:20px 0}
abbr,cite,code,dfn,def,em,kbd,samp,var{font-family:inherit}

.source{border:1px dotted #ccc;vertical-align:top;
 background-image:url("/imgs/code.gif");
 background-repeat:repeat;
 /* position:relative;z-index:-2;*/

 background-color:#fff;
 background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, #f0f4fd), color-stop(.5, transparent), to(transparent));
 background-image:-webkit-linear-gradient(#f0f4fd 50%, transparent 50%, transparent);
 background-image:-moz-linear-gradient(#f2f4f6 50%, transparent 50%, transparent);
 background-image:-ms-linear-gradient(#f0f4fd 50%, transparent 50%, transparent);
 background-image:-o-linear-gradient(#f0f4fd 50%, transparent 50%, transparent);
 background-image:linear-gradient(#f0f4fd 50%, transparent 50%, transparent);
 height:100%;width:100%;padding:20px 0 20px 5px;margin:0;
 background-size:40px 40px;
}

.shell cite{font-style:normal;font-weight:bold;color:#ffff80} /*error (yellow)*/
.shell samp{font-style:normal;font-weight:bold;color:#fff} /*line error (bold white)*/

.code cite{font-style:normal;color:#608060} /*comments (green)*/
.code var {font-style:italic;color:#5070a0} /*keywords (blue)*/
.code samp{font-style:normal;font-weight:bold} /* bold black */
.code dfn {font-style:normal;color:#6040b0} /*defines (violet)*/
.code kbd {font-style:normal;color:#a04040} /*strings (red)*/

.code .source cite{color:#80a080} /*comments (green)*/
.code .source dfn {color:#8060c0} /*defines (violet)*/
.code .source kbd {color:#c07070} /*strings (red)*/
.code .source samp{color:#6060a0} /*functions (dark blue bold)*/
.code .source var {font-style:normal;color:#5050a0} /*keyword (blue)*/
.code .source abbr{color:#5090c0} /*constants (light blue)*/

table.code{color:#555;border:1px solid #ccc;border-spacing:0;border-style:solid;
 border-color:#ccc;border-collapse:collapse;margin-left:10px}
table.code th{border-width:1px;border-style:none;border-color:#ccc;
 background-color:#f0f0f0;color:#aaa}
table.code td{font-family:inherit;border-width:1px;border-style:dotted;
 border-color:#ccc;background-color:transparent}

/* ----- misc. ------------------------------------------------------------- */

img.grayscale{
    filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");/* Firefox 10+, Firefox on Android */
    filter:gray;/* IE6-9 */
    -webkit-filter:grayscale(100%);/* Chrome 19+, Safari 6+, Safari 6+ iOS */
}

.note.radiance{
 box-shadow:0 0 5px 5px #eeeeff;
}

.imgl{float:left;margin:.5em 1.5em .5em .5em}
.imgr{float:right;margin:.5em .5em .5em 1.5em}

.floating img{float:left;width:46%;height:auto;margin:.5em 1.5em .5em .5em}
.floating:after{clear:both}
@media only screen and (max-width:600px)
{.floating img{float:none;width:95%;height:auto;margin-left:.2em}
}

.photo{float:left;display:inline;position:relative;background-color:#fff;border:1px solid #ccc;
 box-shadow:1px 1px 3px #ccc;
 border-radius:5px;
 margin-right:10px;padding:6px;color:#777;font-size:10px;line-height:2px}
 
.photo p{text-align:center;padding:13px 0 4px 0}

.note{width:auto;padding:5px;border:1px solid #b8c8d0;overflow:auto;
 border-radius:7px;box-shadow:1px 1px 1px #eee;
}
.cnote{width:auto;padding:7px;border:1px solid #c8d8e0;overflow:auto;
 border:1px solid #c0d0e0;
 border-top:2px solid #c0d0e0;
 border-radius:0 0 9px 9px;
 box-shadow:1px 1px 1px #eee;
}
/* .note p+p { margin-top:10px} */
.quote,.quote span,.quote a,.quote i,.quote u,.quote b,.author a{font-family:"Times New Roman",Times,Georgia,Serif;font-size:20px;text-align:justify}
.quote.txt{font-style:italic}
.quote.txt:before{content:'\201c';font-size:140%}
.quote.txt:after{content:'\201d';font-size:140%}
.quote.author:before{content:'\2002\2013'}

.bborders{background:#f8fafd;padding:8px;margin:7px 2px;border-top:4px solid #d0e0f0;
 border-bottom:2px solid #d0e0f0}

.gquote,.rdquote,.blquote,.grquote,.gequote{margin:0;margin-bottom:3px;margin-left:10px;padding-top:9px;padding-bottom:9px;padding-left:1em;border-left:.2em solid #bbb;color:#333}
.rdquote{border-color:#e09080}
.blquote{border-color:#90b0f0}
.grquote{border-color:#80e080}
.gequote{border-color:#909090}

pre.code, pre.shell{
 color:#222;width:85%;margin-left:10px;padding:7px;overflow:auto;
 border-radius:7px;
}
pre.shell{background:#616161;color:#ccc;text-shadow:0 1px 1px rgba(0,0,0,.3)}

.onecol{width:100%} /* don't redefine margin-left-right: preserve .txt margin:auto to center .txt */
.layout{width:100%;overflow:auto}
.layout .lgcol{float:left;width:66%}
.layout .mdcol{float:left;width:50%}
.layout .smcol{float:left;width:33%}
.layout .page{padding:0 20px}
.margin{padding-top:20px}

#wrap{min-height:100%}
#main, #bgmain{position:relative;background:#fff;width:100%;overflow:auto;
 padding-bottom:100px} /* for the footer height */

#bgmain{background:#f5f5f5}

#bighead{position:relative;width:100%;overflow:auto;background-color:#c0dae8;
 background-image:-webkit-gradient(radial, left top, left bottom, from(#ffe1d2), to(#afdcff));/* Saf4+, Chrome */
 background-image:-webkit-radial-gradient(top left, #ffe1d2, #afdcff);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-radial-gradient(top left, #ffe1d2, #afdcff);/* FF3.6 */
 background-image:-ms-radial-gradient(top left, #ffe1d2, #afdcff);/* IE10 */
 background-image:-o-radial-gradient(top left, #ffe1d2, #afdcff);/* Opera 11.10+ */
 background-image:radial-gradient(top left, #ffe1d2, #afdcff);
}
#bighead .page{width:1000px;margin:0 auto;position:relative;top:40px} /* room for tabmenu */
#bighead .pitch{position:absolute;top:21px;left:52%;color:#205080;font-size:27px;
 line-height:33px;text-shadow:1px 1px 1px #fff}
.pitch a:link, .pitch a:visited{color:#2080a0;/* light blue */
 text-decoration:none;border-bottom:1px dotted #888}
.pitch a:hover, .pitch a:active{background:transparent;color:#205080} /* dark blue */
.pitch u{text-decoration:none;color:#305040} /* green */

#header{width:100%;height:54px;font-size:16px;line-height:54px;overflow:hidden}
#header .page{width:1000px;margin:0 auto;position:relative}

#footer{position:relative;margin-top:-60px;/* == #footer height, see #main padding */
 width:100%;height:120px;color:#fff;text-shadow:1px 1px 1px #6688aa;
 font-size:12px;line-height:19px;border-top:1px solid #baccff;clear:both;overflow:hidden;
 
 background-color:#9abccf;
 background-image:-webkit-gradient(linear, top, bottom, from(#9ebfcf), to(#94b4c0));/* Saf4+, Chrome */
 background-image:-webkit-linear-gradient(top, #9ebfcf, #94b4c0);/* Chrome 10+, Saf5.1+ */
 background-image:-moz-linear-gradient(top, #9ebfcf, #94b4c0);/* FF3.6 */
 background-image:-ms-linear-gradient(top left, #9ebfcf, #94b4c0);/* IE10 */
 background-image:-o-linear-gradient(top left, #9ebfcf, #94b4c0);/* Opera 11.10+ */
 background-image:linear-gradient(top left, #9ebfcf, #94b4c0);
}

#footer img, p{padding:10px}
#footer a{color:inherit;border-bottom:0}
#footer a:hover, .pitch a:active{background:transparent}
#footer p.left{float:left}
#footer p.right{float:right;text-align:right}