*{margin:0; padding:0}

html, body{height:100%;font-family:Arial,Helvetica,'Helvetica Neue',Verdana,sans-serif;
 font-size:16px;line-height:26px}

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 */
 -o-border-radius:5px 5px 0 0;
 -ms-border-radius:5px 5px 0 0;
 -moz-border-radius:5px 5px 0 0;
 -webkit-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
 border:2px solid #c0d0e0;
}
a.vright{position:fixed; top:100px; right:-39px; height:26px; z-index:10; padding:6px 10px; /* padding within each menu item */
 -o-border-radius:5px 5px 0 0;
 -ms-border-radius:5px 5px 0 0;
 -moz-border-radius:5px 5px 0 0;
 -webkit-border-radius:5px 5px 0 0;
 border-radius:5px 5px 0 0;
 border:2px solid #c0d0e0;
}

h1, h2, h3, h4{color:#205080;font-weight:100;letter-spacing:0.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, h4{margin:8px 0 0 10px;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;font-weight:bold}

.bgdtxt{position:relative; top:330px; font:2em Times, serif; letter-spacing:0.1em;
 color:#ccc; zoom:1; filter:Alpha(opacity=1); 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}

/* ----- menu -------------------------------------------------------------- */

.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{
 transition-duration:70ms;
 -webkit-transition-duration:70ms;
 float:left;
 display:block;
 background-color:#9abccf; /* #80d0f0; */
 color:#fff;
/* text-shadow:1px 1px 1px #6688aa; */
 border-bottom:0;
 margin-left:0; /* margin between each menu item */
 padding:0 16px; /* padding within each menu item */

 -o-border-radius:0 0 5px 5px;
 -ms-border-radius:0 0 5px 5px;
 -moz-border-radius:0 0 5px 5px;
 -webkit-border-radius:0 0 5px 5px;
 border-radius:0 0 5px 5px;

 -o-box-shadow:0 3px 3px rgba(0, 0, 0, 0.5);
 -ms-box-shadow:0 3px 3px rgba(0, 0, 0, 0.5);
 -moz-box-shadow:0 3px 3px rgba(0, 0, 0, 0.5);
 -webkit-box-shadow:0 3px 3px rgba(0, 0, 0, 0.5);
 box-shadow:0 3px 3px rgba(0, 0, 0, 0.5);
}

.tabmenu a.current, .tabmenu a:hover, .tabmenu a:active{
 background-color:#70a0bb;
 color:#fff;
 padding-top:7px;
 padding-bottom:3px; 
}

.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;
}

/* ----- 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;
 -moz-border-radius:4px;
 -webkit-border-radius:4px;
 -moz-box-shadow:5px 5px 8px #aaa;
 -webkit-box-shadow:5px 5px 8px #aaa;
 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:-40px;
 float:right; padding:6px 8px; background:#fff; color:#70a0bb;
 text-align:center; overflow:hidden; 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}

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

.hide{display:none;visibility:hidden;line-height:0;height:0}
.error {border:2px solid #ff0000}
.small {font-size:95%}
.smaller{font-size:85%}
.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{
 -o-box-shadow:0 3px 3px #ddd;
 -ms-box-shadow:0 3px 3px #ddd;
 -moz-box-shadow:0 3px 3px #ddd;
 -webkit-box-shadow:0 3px 3px #ddd;
 box-shadow:0 3px 3px #ccc;
}
.transp{
 zoom:1;
 filter:alpha(opacity=50);
 opacity:0.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, 0.03); 
 border:1px solid rgba(0, 0, 0, 0.08);
 -o-border-radius:7px;
 -ms-border-radius:7px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;
}
.llink:hover{padding:10px; background-color:rgba(255, 255, 255, 0.3);
 border:1px solid rgba(255, 255, 255, 0.5);
 -o-border-radius:7px;
 -ms-border-radius:7px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;
}
.darker{padding:10px; background-color:rgba(0, 0, 0, 0.03); 
 border:1px solid rgba(0, 0, 0, 0.08);
 -o-border-radius:7px;
 -ms-border-radius:7px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;
}
.lighter{padding:10px; background-color:rgba(255, 255, 255, 0.3);
 border:1px solid rgba(255, 255, 255, 0.5);
 -o-border-radius:7px;
 -ms-border-radius:7px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 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:#ffffa0}
.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;
 -o-border-radius:12px;
 -ms-border-radius:12px;
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 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:32px}
.rmargin {margin-right:32px}
.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;
 -o-border-radius:12px;
 -ms-border-radius:12px;
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 border-radius:12px;
 text-shadow:1px 1px #e0e0f0;
 -o-box-shadow:0 3px 3px #ddd;
 -ms-box-shadow:0 3px 3px #ddd;
 -moz-box-shadow:0 3px 3px #ddd;
 -webkit-box-shadow:0 3px 3px #ddd;
 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;
 -o-border-radius:12px;
 -ms-border-radius:12px;
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 border-radius:12px;
 text-shadow:1px 1px #e0e0e0;
 -o-box-shadow:0 3px 3px #ddd;
 -ms-box-shadow:0 3px 3px #ddd;
 -moz-box-shadow:0 3px 3px #ddd;
 -webkit-box-shadow:0 3px 3px #ddd;
 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;
 -o-border-radius:3px;
 -ms-border-radius:3px;
 -moz-border-radius:3px;
 -webkit-border-radius:3px;
 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;
 -o-border-radius:12px;
 -ms-border-radius:12px;
 -moz-border-radius:12px;
 -webkit-border-radius:12px;
 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:15px;
 border:2px solid #ccc;
 border-collapse:collapse;
 margin-left:16px;
}
table.clean th{
 border-width:1px;
 padding:2px;
 border-style:none dotted dotted none;
 border-color:#eee;
 background-color:#a0c0d0;
 letter-spacing:0.1ex;
 font-weight:bold;
 line-height:140%;
 color:white;
 font-variant:small-caps}
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.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}
.cite,dfn,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;
 -webkit-background-size:40px 40px;
 -moz-background-size:40px 40px;
 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{
 -o-box-shadow:0 0 5px 5px #eeeeff;
 -ms-box-shadow:0 0 5px 5px #eeeeff;
 -moz-box-shadow:0 0 5px 5px #eeeeff;
 -webkit-box-shadow:0 0 5px 5px #eeeeff;
 box-shadow:0 0 5px 5px #eeeeff;
}

.title{color:#fff;font-size:18px;line-height:34px;letter-spacing:0.2ex;border-bottom:0}

.photo{float:left;display:inline;position:relative;background-color:#fff;border:1px solid #ccc;
 -o-box-shadow:1px 1px 3px #ccc;
 -ms-box-shadow:1px 1px 3px #ccc;
 -moz-box-shadow:1px 1px 3px #ccc;
 -webkit-box-shadow:1px 1px 3px #ccc;
 box-shadow:1px 1px 3px #ccc;

 -o-border-radius:5px;
 -ms-border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 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:7px;border:1px solid #b8c8d0;
 -o-border-radius:7px;
 -ms-border-radius:7px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;

 -o-box-shadow:1px 1px 1px #eee;
 -ms-box-shadow:1px 1px 1px #eee;
 -moz-box-shadow:1px 1px 1px #eee;
 -webkit-box-shadow:1px 1px 1px #eee;
 box-shadow:1px 1px 1px #eee;
}
.cnote{width:auto;padding:7px;border:1px solid #c8d8e0;
 border:1px solid #c0d0e0;
 border-top:2px solid #c0d0e0;
 -o-border-radius:5px;
 -ms-border-radius:5px;
 -moz-border-radius:5px;
 -webkit-border-radius:5px;
 border-radius:0 0 9px 9px;

 -o-box-shadow:1px 1px 1px #eee;
 -ms-box-shadow:1px 1px 1px #eee;
 -moz-box-shadow:1px 1px 1px #eee;
 -webkit-box-shadow:1px 1px 1px #eee;
 box-shadow:1px 1px 1px #eee;
}
/* .note p+p { margin-top:10px; } */
.quote{
 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:0;padding-left:1em;border-left:.3em 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;
 -o-border-radius:7px;
 -ms-border-radius:7px;
 -moz-border-radius:7px;
 -webkit-border-radius:7px;
 border-radius:7px;
}
pre.shell{background:#616161;color:#ccc;text-shadow:0 1px 1px rgba(0, 0, 0, 0.3)}

.onecol{width:95%;margin:20px 0 16px 10px} /* top right bottom left */
.layout{width:100%;overflow:hidden}
.layout .lgcol{float:left;width:66%}
.layout .mdcol{float:left;width:50%}
.layout .smcol{float:left;width:33%}
.layout .page{padding:0 20px;margin:0}
.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}
.txt{width:1000px;margin:0 auto}

#bighead{position:relative;width:100%;overflow:hidden;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:36px;right:40px;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:59px;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;width:20%}
#footer p.right{float:right;text-align:right;width:60%}