*{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;
/* text-rendering:optimizeLegibility; */ /* Google Chrome makes garbage 
 -webkit-font-smoothing:antialiased; but it accepts this one?? */
 background-text:
}

body:before{/* #wrap div:Opera Fix, thanks to Maleika (Kohoutec)*/
 content:"";
 height:100%;
 float:left;
 width:0;
 margin-top:-32767px;/* thank you Erik J - negate effect of float*/
}

a:link, a:visited{
 transition-duration:250ms;
 -webkit-transition-duration:250ms;
 color:#2080a0; /* light blue */
 text-decoration:none;
 font-style:normal;
 border-bottom:1px dotted #888; 
}
a:hover, a:active{
 background:#e0f0ff;
 color:#000; /* regular text */
}

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:16px 0;
 height:1px;
 color:#c0d0e0; /* IE */
 background-color:#c0d0e0; /* all others */
}

img{
 border:0;
 vertical-align:middle; /* kill the ghost */
}

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{
 /* background-color:#e4f4ff; */
 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:0.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;
}

/* ----- 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:hand;
 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{
 -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}
.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 #c8d8e0;

 -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{
 margin-left:10px; 
 padding-left:1em; 
 border-left:.3em solid #ece9e6; 
 color:#555; 
}

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

/* 
Sticky Footer Solution
by Steve Hatcher 
http://stever.ca
http://www.cssstickyfooter.com

*{margin:0;padding:0} 

html, body{height:100%}

#wrap{min-height:100%}

#main{overflow:auto;
 padding-bottom:150px} // must be same height as the footer

#footer{position:relative;
 margin-top:-150px; // negative value of footer height
 height:150px;
 clear:both} 


body:before{// Opera Fix thanks to Maleika (Kohoutec)
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;// thank you Erik J - negate effect of float
}

You also need to include this conditional style in the <head> of your HTML file 
to feed this style to IE 6 and lower and 8 and higher.

<!--[if !IE 7]>
 <style type="text/css">
 #wrap{display:table;height:100%}
 </style>
<![endif]-->
--------------------------
<div id="wrap">
 <div id="header"></div>
 <div id="main"></div>
</div>
<div id="footer"></div>
--------------------------
You must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser 
*/
#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;
 /* border-bottom:2px solid #eee; */
 
 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%;
}