body{
    font-family: arial, sans-serif;
    font-size: 105%;
    font-style: normal;

    margin: 0; padding: 5px;
    background-color: #000;
    color: #d9d9d9;

    background-image:url(images/large-moon.jpg);
    background-position: 100% 0%;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
h1,h2,h3,h4 {
    font-family: times new roman, serif;
    font-size: 100%;
    color: #ffe;
}

.canvas, .canvas td{
    font-size: 2em;
    color: #eee;
}

body img, .box1{
    margin: 20px;
    border:1px #999 solid;
    box-shadow: 3px 3px 3px #222;
    font-size: 1em;
}

h1{
    font-size: 2em;
}

h2{
    font-size: 1.6em;
    font-weight: normal;
}

h4{
    margin:10px 0;
}

a:link{ color: #ccf; }
a:visited{ color: #fcf; }
a:hover{ color: #fff; }

ul.hor{ width: 800px; }
ul.hor li{ float:left; width: 46%; }

.box1, .code{
    filter:alpha(opacity='90'); opacity:0.9;
    background:#222;
    padding:20px;
    border:1px #333 solid;
    overflow: auto;
    clear:both;
}

.code {
    overflow-x: scrolling;
}

.box2{
    filter:alpha(opacity='90'); opacity:0.9;
    background:#222;
    margin:0;
    border:2px #666 solid;
    font-size: 1em;
    color: #eee;
}

.box1 ul {
    padding:0; margin:0;
    list-style-type:none;
}

.box1 ul li {
    background-position:0 .4em;
    padding-left:.8em;
    background-image:url(/images/raquo.gif);
    background-repeat:no-repeat;
}

xmp{
    font-size: 10pt;
    width:800px;
}

hor.ul{ clear:both; }
hor.ul li{ clear:both; }


#navlist{
    padding: 0 1px 1px;
    margin-left: 0;
    font: bold 12px Verdana, sans-serif;
    filter:alpha(opacity='80');
    opacity:0.9;
    background:#222;
}

#navlist li{
    list-style: none;
    margin: 0;
    border-top: 1px solid #333;
    margin-top: 1px;
    text-align: left;
}

#navlist li a{
    display: block;
    padding: 0.25em 0.5em 0.25em 0.75em;
    border-left: 1em solid #333;
    text-decoration: none;
}

#navlist li a:link { color: #448; }
#navlist li a:visited { color: #667; }

#navlist li a:hover{
    border-color: #FE3;
    color: #FFF;
    background: #332;
}

.contactMe{
    box-shadow: 10px 10px 5px #888;
    margin:0; padding:10px;
    position:fixed; top:20px; left:30px; z-index:1001;
    color:#ddd; background-color:#222;
    border:2px #ddd solid;
    width:500px; height:600px;
    overflow: scrolling;
}

.headingBreadcrumb{
    border:1px #444 solid;
    border-left:0;
    border-right:0;
    background: rgb(76,76,76); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(102,102,102,1) 25%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(43,43,43,1) 76%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(25%,rgba(102,102,102,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(76%,rgba(43,43,43,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(102,102,102,1) 25%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(43,43,43,1) 76%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

.brandHeading{
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
    background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */
}

.box-right {
    filter: alpha(opacity='90');
    opacity: 0.9;
    border: 2px #666 solid;
    font-size: 1em;
    float: right;
    border-radius: 15px;
}


/*
    CSS3 backgrounds based on examples from http://lea.verou.me/css3patterns/
*/
.japanese-cube {
    /* http://lea.verou.me/css3patterns/#japanese-cube */
    background-color:#556;
    background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445),
    linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a),
    linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a);
    background-size:80px 140px;
    background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
}

.diagonal-stripes {
    /* http://lea.verou.me/css3patterns/#diagonal-stripes */
    background-color: gray;
    background-image: repeating-linear-gradient(45deg, transparent, transparent 25px, rgba(200,200,200,.4) 25px, rgba(200,200,200,.4) 50px);
}

.microbial-mat {
    /* http://lea.verou.me/css3patterns/#microbial-mat */
    background:
    radial-gradient(circle at 0% 50%, rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px) 0px 10px,
    radial-gradient(at 100% 100%,     rgba(96, 16, 48, 0) 9px, #613 10px, rgba(96, 16, 48, 0) 11px),
    #8a3;
    background-size: 20px 20px;
}

.arrows {
    /* http://lea.verou.me/css3patterns/#arrows */
    background:
    linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
    linear-gradient(45deg, #92baac 45px, transparent 45px,transparent 91px, #e1ebbd 91px, #e1ebbd 135px, transparent 135px),
    linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
    background-color:#e1ebbd;
    background-size: 128px 128px;
}

.tartan {
    /* http://lea.verou.me/css3patterns/#tartan */
    background-color: hsl(2, 57%, 40%);
    background-image: repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
    repeating-linear-gradient(270deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
    repeating-linear-gradient(125deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
}

.steps {
    /* http://lea.verou.me/css3patterns/#steps */
    background-color: #FF7D9D;
    background-size: 58px 58px;
    background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px,
    0px 36px, 4px 2px, 29px 6px, 33px 30px;
    background-image:
    linear-gradient(335deg, #C90032 23px, transparent 23px),
    linear-gradient(155deg, #C90032 23px, transparent 23px),
    linear-gradient(335deg, #C90032 23px, transparent 23px),
    linear-gradient(155deg, #C90032 23px, transparent 23px),

    linear-gradient(335deg, #C90032 10px, transparent 10px),
    linear-gradient(155deg, #C90032 10px, transparent 10px),
    linear-gradient(335deg, #C90032 10px, transparent 10px),
    linear-gradient(155deg, #C90032 10px, transparent 10px);
}

.madras {
    /* http://lea.verou.me/css3patterns/#madras */
    background-color: hsl(34, 53%, 82%);
    background-image: repeating-linear-gradient(45deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 120px, hsla(197, 62%, 11%, 0.5) 120px, hsla(197, 62%, 11%, 0.5) 140px
      ),
    repeating-linear-gradient(135deg, transparent 5px, hsla(197, 62%, 11%, 0.5) 5px, hsla(197, 62%, 11%, 0.5) 10px,
      hsla(5, 53%, 63%, 0) 10px, hsla(5, 53%, 63%, 0) 35px, hsla(5, 53%, 63%, 0.5) 35px, hsla(5, 53%, 63%, 0.5) 40px,
      hsla(197, 62%, 11%, 0.5) 40px, hsla(197, 62%, 11%, 0.5) 50px, hsla(197, 62%, 11%, 0) 50px, hsla(197, 62%, 11%, 0) 60px,
      hsla(5, 53%, 63%, 0.5) 60px, hsla(5, 53%, 63%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 70px, hsla(35, 91%, 65%, 0.5) 80px,
      hsla(35, 91%, 65%, 0) 80px, hsla(35, 91%, 65%, 0) 90px, hsla(5, 53%, 63%, 0.5) 90px, hsla(5, 53%, 63%, 0.5) 110px,
      hsla(5, 53%, 63%, 0) 110px, hsla(5, 53%, 63%, 0) 140px, hsla(197, 62%, 11%, 0.5) 140px, hsla(197, 62%, 11%, 0.5) 160px
    );
}

.cicada-stripes {
    /* http://lea.verou.me/css3patterns/#cicada-stripes */
    background-color: #026873;
    background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%),
    linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%),
    linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%);
    background-size: 13px, 29px, 37px, 53px;
}

.sm-text {
    _ont-family: arial,sans-serif;
    font-size: .7em;
    color: #678;
}
.neg-top-sm {
    margin-top: -1px;
}
table.ad-placement {
    border-spacing: 0;
    border-collapse: separate;
}
.ad-placement td {
    margin:0; padding:0;
}
.ad-placement tr:first-child {
    outline: 1px #234 solid;
}
.ad-pl-flt-right {
    float: right;
    margin: 10px 0 10px 10px;
    padding: 10px 0 10px 10px;
    width: 305px;
    height: 255px;
}
.right {
    text-align: right;
}
.ad-blank {
    background: #993;
}
.ad-blank-728x90 {
    width: 728px;
    height: 90px;
}
.ad-blank-160x600 {
    width: 160px;
    height: 600px;
}
.ad-blank-300x250 {
    width: 300px;
    height: 250px;
}
.ad-blank-234x60 {
    width: 234px;
    height: 60px;
}
.center {
    text-align: center;
}
.vcenter {
    text-align: center;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.logo-start {
    opacity: 0.1;
    transition: opacity 4s ease-in-out;
    -moz-transition: opacity 4s ease-in-out;
    -webkit-transition: opacity 4s ease-in-out;
}
.logo-placement {
    background: #000;
    opacity: 1;
    transition: opacity .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
}

.puzzle {
    width: 600px;
    height: 500px;    
}