* {
	margin:0;
	padding:0
}

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,figure,footer,header,hgroup,menu,nav,section,menu,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;font-style:normal;background:transparent}

@font-face {
	font-family: Sawasdee;
	src: url('Sawasdee.ttf');
}

a, a:visited { color:#00BBFF; text-decoration:none; outline:none; }
a:hover{ text-decoration:underline; }
a:active {text-decoration:none;}
.clear{	clear:both; }
a:hover,a:active,a:focus{outline:none}
a{text-decoration:none;-webkit-transition-property:color, opacity;-moz-transition-property:color, opacity;-o-transition-property:color, opacity;transition-property:color, opacity;-webkit-transition-duration:0.2s;-moz-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;-webkit-transition-timing-function:ease-out;-moz-transition-timing-function:ease-out;-o-transition-timing-function:ease-out;transition-timing-function:ease-out}

body{ font-size:0.825em; color:#000; background: #fff;}
#gameover{ width:100%; height:80px; background:#fff; no-repeat center bottom; margin-bottom:10px; position:fixed; border:0px solid #000; z-index:9998; top: -0.5px; }

#logo1 { position:absolute; left: 2em; top:0.5em; border:0px solid #000;}
#logo1 li{ list-style:none; padding:3px;}
#logo1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#logo1 a{ background:url('img/nav/header2.png') no-repeat; height:80px; width:80px; display:block; position:fixed;}
#xlogo1 a:hover span{ width:200px; height:60px; padding:0 10px; overflow:visible; }
#logo1 a:hover{ text-decoration:none; width: 80px; height:80px; z-index:9999;}
#logo1 .alt {	background-position:-0px -0px;}
#logo1 .alt:hover { background-position:-80px -0px;}
#logo1 .alt span{ background-color:#07da315; color:#FFFFFF; text-shadow:1px 1px 0 #000000; position:absolute; top:310px}

#gallery1 { position:absolute; border:0px solid #000; top:1.4em; left: 8em; }
#gallery1 li{ list-style:none; padding:3px;}
#gallery1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#gallery1 a{ background:url('img/nav/menu2.png') no-repeat; height:31px; width:38px; display:block; position:fixed; }
#gallery1 a:hover span{ font-family:'Sawasdee', Helvetica, sans-serif; font-size:15px; font-weight:bold; width:65px; height:20px; overflow:visible; border:0px solid #000;}
#gallery1 a:hover{ text-decoration:none; width: 38px; height:31px; z-index:9997; border-bottom:7px solid #000;}
#gallery1 a:active{ text-decoration:none;}
#gallery1 .alt {	background-position:-6px -8px;}
#gallery1 .alt:hover { background-position:-6px -8px;}
#gallery1 .alt span{ color:#000; position:absolute; top:2.5em; left: -0px;}

#leak1 { position:absolute; left: 11.3em; top:1.2em; border:0px solid #000;}
#leak1 li{ list-style:none; padding:3px;}
#leak1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#leak1 a{ background:url('img/nav/menu6.png') no-repeat; height:31px; width:38px; display:block; position:fixed; }
#leak1 a:hover span{ font-family:'Sawasdee', Helvetica, sans-serif; font-size:15px; font-weight:bold; width:65px; height:20px; overflow:visible; border:0px solid #000; }
#leak1 a:hover{ text-decoration:none; width: 38px; height:31px; z-index:9999; border-bottom:7px solid #000;}
#leak1 .alt { background-position:-4px -0px;}
#leak1 .alt:hover { background-position:-4px -0px;}
#leak1 .alt span{ color:#000; position:absolute; top:2.6em; left: -42px;}

#archiv1 { position:absolute; left: 14.5em; top:1.4em; border:0px solid #000;}
#archiv1 li{ list-style:none; padding:3px;}
#archiv1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#archiv1 a{ background:url('img/nav/menu1.png') no-repeat; height:31px; width:37px; display:block; position:fixed; }
#archiv1 a:hover span{ font-family:'Sawasdee', Helvetica, sans-serif; font-size:15px; font-weight:bold; width:65px; height:20px; overflow:visible; border:0px solid #000; }
#archiv1 a:hover{ text-decoration:none; width: 38px; height:31px; z-index:9999; border-bottom:7px solid #000;}
#archiv1 .alt {	background-position:2px -2px;}
#archiv1 .alt:hover { background-position:2px -2px;}
#archiv1 .alt span{ color:#000; position:absolute; top:2.4em; left: -88px;}

#about1 { position:absolute; left: 17.5em; top:1.5em; border:0px solid #000;}
#about1 li{ list-style:none; padding:3px;}
#about1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#about1 a{ background:url('img/nav/menu3.png') no-repeat; height:28px; width:38px; display:block; position:fixed; }
#about1 a:hover span{ font-family:'Sawasdee', Helvetica, sans-serif; font-size:15px; font-weight:bold; width:65px; height:20px; overflow:visible; border:0px solid #000; }
#about1 a:hover{ text-decoration:none; width: 38px; height:28px; z-index:9999; border-bottom:7px solid #000;}
#about1 .alt {	background-position:-1.5px -6px;}
#about1 .alt:hover { background-position:-1.5px -6px;}
#about1 .alt span{ color:#000; position:absolute;top:2.3em; left: -130px;}

#news1 { position:absolute; left: 20.5em; top:1.5em; border:0px solid #000;}
#news1 li{ list-style:none; padding:3px;}
#news1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#news1 a{ background:url('img/nav/menu5.png') no-repeat; height:28px; width:38px; display:block; position:fixed; }
#news1 a:hover span{ font-family:'Sawasdee', Helvetica, sans-serif; font-size:15px; font-weight:bold; width:110px; height:20px; overflow:visible; border:0px solid #000; }
#news1 a:hover{ text-decoration:none; width: 38px; height:28px; z-index:9999; border-bottom:7px solid #000;}
#news1 .alt {	background-position:3px 0.8px;}
#news1 .alt:hover { background-position:3px 0.8px;}
#news1 .alt span{ color:#000; position:absolute; top:2.4em; left: -168px;}

#contact1 { position:absolute; left: 23.3em; top:1.3em; border:0px solid #000;}
#contact1 li{ list-style:none; padding:3px;}
#contact1 span{ width:0px; left:7px; padding:0; position:relative; overflow:hidden;}
#contact1 a{ background:url('img/nav/menu4.png') no-repeat; height:30px; width:38px; display:block; position:fixed; }
#contact1 a:hover span{ font-family:'Sawasdee', Helvetica, sans-serif; font-size:15px; font-weight:bold; width:110px; height:20px; overflow:visible; border:0px solid #000; }
#contact1 a:hover{ text-decoration:none; width:38px; height:31px; z-index:99999; border-bottom:7px solid #000;}
#contact1 .alt {	background-position:-0px -3px;}
#contact1 .alt:hover { background-position:-0px -3px;}
#contact1 .alt span{ color:#000; position:absolute; top:2.6em; left: -205px;}

article,aside,figure,footer,header,hgroup,nav,section,time{display:block}img,object,embed{max-width:100%}
html{overflow-y:scroll}

blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}

.ie7 img{-ms-interpolation-mode:bicubic}
.ie6 html{filter:expression(document.execCommand("BackgroundImageCache", false, true))}

.clearfix:before,.clearfix:after{content:"\0020";display:block;height:0;overflow:hidden}

.clearfix:after{clear:both}
.clearfix{zoom:1}

@import url(tools/jquery.flexslider.css);p,section#project .meta ul,section#contact ul,section#contact h3{font-size:12px;text-align:justify;margin-bottom:21px;line-height:21px}

p:last-child,section#project .meta ul:last-child,section#contact ul:last-child,section#contact h3:last-child{margin-bottom:0}
p a,section#project .meta ul a,section#contact ul a,section#contact h3 a{color:#79978c}
p a:hover,section#project .meta ul a:hover,section#contact ul a:hover,section#contact h3 a:hover{color:#e3e3e3}

hgroup{text-align:center}
hgroup h1{color:#000; font-family:Sawasdee, serif;font-weight:900;letter-spacing:-4px;text-transform:uppercase}
hgroup h2{color:#000; font-family:Sawasdee, serif;font-weight:bold;letter-spacing:-1px;white-space:nowrap}
hgroup h7{font-size:50px; color:#fff; font-family:Sawasdee, serif;font-weight:900;letter-spacing:-4px;text-transform:uppercase}

img{vertical-align:bottom}

.code,section#project .code_notes{font-family:'Courier New', Courier, monospace;color:#79978c;line-height:inherit}body{background:#fff;font-family:nimbus-sans-1,nimbus-sans-2,Helvetica,sans-serif}


#background{top:0;left:0;width:100%;position:fixed;height:auto;z-index:-1}
#container{width:90%;max-width:1400px;margin:0em auto}
#container section{position:relative;overflow:hidden;padding:0.5%}


h1{font-size:50px}
h2{font-size:18px}@media (max-width:1240px){hgroup h1{font-size:45px}hgroup h2{font-size:17px}}@media (max-width:1100px){hgroup h1{font-size:40px}hgroup h2{font-size:15px}}@media (max-width:1024px){hgroup h1{font-size:45px}
hgroup h2{font-size:17px}}@media (max-width:900px){hgroup h1{font-size:40px}
hgroup h2{font-size:14px}}@media (max-width:750px){hgroup h1{font-size:38px}
hgroup h2{font-size:14px}}@media (max-width:600px){hgroup h1{font-size:30px}
hgroup h2{font-size:12px}}@media (max-width:550px){hgroup h1{font-size:45px}
hgroup h2{font-size:15px}}@media (max-width:400px){hgroup h1{font-size:35px}
hgroup h2{font-size:14px}}@media (max-width:300px){hgroup h1{font-size:25px}
hgroup h2{font-size:11px}}

h6{font-size:10px; color:#000; font-family:arial;}

h4{font-size:13px; font-family:arial; color:#000; font-weight:900;letter-spacing:-0px;text-transform:normal}
h5{font-size:12px; font-family:arial; color:#000; font-weight:normal;letter-spacing:-0px;text-transform:normal}@media (max-width:1240px){hgroup2 h4{font-size:11px}hgroup h5{font-size:17px}}@media (max-width:1100px){hgroup2 h4{font-size:10px}hgroup2 h5{font-size:15px}}@media (max-width:1024px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:17px}}@media (max-width:900px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:14px}}@media (max-width:750px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:14px}}@media (max-width:600px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:12px}}@media (max-width:550px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:15px}}@media (max-width:400px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:14px}}@media (max-width:300px){hgroup2 h4{font-size:13px}
hgroup2 h5{font-size:11px}}

html.touch .flexslider .flex-direction-nav{display:none}

#home{background:#000;color:#e3e3e3;padding-bottom:0, }
#home .note{color:#666}
#home .highlight{margin-bottom:1.5%}
#home .highlight a{position:relative}#home .highlight a img{width:100%}
#home .highlight a .title{position:absolute;right:20px;bottom:20px;text-align:right;text-transform:uppercase;text-shadow:1px 1px 10px rgba(0,0,0,1)}
#home .highlight a .title h1,#home .highlight a .title h2{color:#e3e3e3}
#home .highlight a .title h1{font-size:34px}
#home .highlight a .title h2{font-size:26px}
#home a:hover,a:active,a:focus {text-decoration:none;}

.line{ border-bottom:0.2px solid #7b7b7b; margin:0.5em 2.9em 0.6em 1.9em; overflow:hidden;}
.line2{ border-bottom:0px solid #7b7b7b; margin:0em 0.5em 0.3em 0.1em; overflow:hidden;}
#page5{	top:0.2em; width:100%; height: 6em; margin:0 auto; position:relative; border:0px solid #142830;}

section#projects{font-size:24px }
section#projects a:hover,a:active,a:focus {text-decoration:none;}


section#projects{background:#fff;background:rgba(0,0,0,0);color:#e3e3e3;padding-left:0;padding-right:1.3%;padding-top:0;padding-bottom:0}
section#projects .note{color:#666}section#projects hgroup,section#projects .thumbnail{position:relative;float:left;width:23.454%;margin-left:1.546%;margin-top:1.546%}
section#projects hgroup{color:#e3e3e3;padding-top:5%}section#projects .thumbnail img{width:100%}section#projects .thumbnail .overlay,section#projects .thumbnail .overlay .bg,section#projects .thumbnail .overlay .title{position:absolute;left:0;width:100%;height:100%}section#projects .thumbnail .overlay{top:0;overflow:hidden}
section#projects .thumbnail .overlay .bg{background:#000;background:rgba(0,0,0,0.7);-webkit-transition:all 0.15s ease-in;-moz-transition:all 0.15s ease-in;-o-transition:all 0.15s ease-in;transition:all 0.15s ease-in}
section#projects .thumbnail .overlay .title{color:#e3e3e3;text-align:center;text-transform:uppercase;text-shadow:0px 0px 25px rgba(0,0,0,0.8);-webkit-transition:all 0.2s ease-out;-moz-transition:all 0.2s ease-out;-o-transition:all 0.2s ease-out;transition:all 0.2s ease-out}
section#projects .thumbnail .overlay .title h1{margin-top:28%;font-size:24px;font-weight:500}section#projects .thumbnail .overlay .title h2{font-size:16px;font-weight:500}section#projects .thumbnail .overlay .bg{bottom:-100%}section#projects .thumbnail .overlay .title{top:-100%}section#projects .thumbnail.active .overlay .bg,section#projects .thumbnail:hover .overlay .bg{bottom:0}section#projects .thumbnail.active .overlay .title,section#projects .thumbnail:hover .overlay .title{top:0}@media (max-width:1024px){section#projects hgroup,section#projects .thumbnail{width:48.454%}
section#projects hgroup2{padding-top:12%;padding-bottom:12%}
section#projects .thumbnail a{display:block;overflow:hidden}}@media (max-width:550px){section#projects hgroup{padding-top:6%;padding-bottom:0}section#projects .thumbnail .overlay .title{top:-200%}
section#projects .thumbnail .overlay .title h5{font-size:18px;line-height:17px}
section#projects .thumbnail .overlay .title h6{display:none}
section#projects .thumbnail.active .overlay .title,section#projects .thumbnail:hover .overlay .title{top:-20%}}

html.touch section#projects{overflow:hidden;padding-top:1.5%}
html.touch section#projects .inner{-webkit-transition:transform 1s ease-out;-moz-transition:transform 1s ease-out;-o-transition:transform 1s ease-out;transition:transform 1s ease-out}html.touch section#projects hgroup,html.touch section#projects .thumbnail{padding:0;margin:0;margin-right:6px}
html.touch section#projects hgroup{padding-top:60px;width:220px;height:90px}
html.touch section#projects .thumbnail{width:300px;height:217px}
html.touch section#projects .thumbnail.active .overlay .bg,html.touch section#projects .thumbnail.active .overlay .title,html.touch section#projects .thumbnail:hover .overlay .bg,html.touch section#projects .thumbnail:hover .overlay .title{display:none}
html.overflowscrolling section#projects{white-space:nowrap;overflow:scroll;overflow-y:hidden !important}
html.overflowscrolling section#projects hgroup,html.overflowscrolling section#projects .thumbnail{float:none;vertical-align:top;display:inline-block}


section#blogposts p{font-size:12.4px; color:#000; font-family:arial, serif;font-weight:normal; letter-spacing:-0px; line-height: 16px; text-transform:normal;}
section#blogposts{background:#fff;color:#333}
section#blogposts .note{color:#b2b2b2}
section#blogposts .index{width:23.5%;float:left}
section#blogposts .index hgroup{margin:10% 0}
section#blogposts .index ul li{width:100%;margin-bottom:10px}
section#blogposts .show{background:#000;background:rgba(0,0,0,0.7);color:#000;background-color:#fff;overflow:hidden;float:right;top:0;padding:1.546%;width:72%}section#blogposts .show .note{color:#666}
section#blogposts .show .image{width:90%;padding:5%;margin-bottom:1.5%;text-align:center;background:-webkit-gradient(radial, 0% 0%, 0, 0% 0%, 100, color-stop(0%, #4d4d4d), color-stop(100%, #333));background:-webkit-radial-gradient(top left, #4d4d4d, #333);background:-moz-radial-gradient(top left, #4d4d4d, #333);background:-o-radial-gradient(top left, #4d4d4d, #333);background:-ms-radial-gradient(top left, #4d4d4d, #333);background:radial-gradient(top left, #4d4d4d,#333333)}

section#blogposts .show .description{width:100%;-webkit-column-count:2;-moz-column-count:2;-o-column-count:2;column-count:2}section#blogposts .show .description .code,section#blogposts .show .description section#project .code_notes,section#project section#blogposts .show .description .code_notes{padding:1.5%;background:rgba(0,0,0,0);display:inline}

section#blogposts .show .inner.with-download .download{float:right;width:25%;text-align:right}
section#blogposts .show .inner.with-download .download a{float:right;background-image:url(arrow-right-medium-green.png);background-position:10px center;width:140px}section#blogposts .show .inner.with-download .download a:hover{background-image:url(arrow-right-medium-dark.png)}section#blogposts .show .inner.with-download .download a,section#blogposts .show .inner.with-download .download a:hover{font-size:20px;cursor:pointer;padding:5px 10px;cursor:pointer}

section#blogposts .show .inner.with-download .download p,section#blogposts .show .inner.with-download .download section#project .meta ul,section#project .meta section#blogposts .show .inner.with-download .download ul,section#blogposts .show .inner.with-download .download section#contact ul,section#contact section#blogposts .show .inner.with-download .download ul,section#blogposts .show .inner.with-download .download section#contact h3,section#contact section#blogposts .show .inner.with-download .download h3{text-align:right;margin-top:0;margin-right:10px}

section#blogposts .show .inner.with-download .description{width:70%;float:left;-webkit-column-count:2;-moz-column-count:2;-o-column-count:2;column-count:2}@media (max-width:1024px){section#blogposts .index{width:48.5%}section#blogposts .show{width:47%}section#blogposts .show .description{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1}section#blogposts .show .inner.with-download .description{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1;width:100%;float:none}section#blogposts .show .inner.with-download .download{width:50%}section#blogposts .show .inner.with-download .download p,section#blogposts .show .inner.with-download .download section#project .meta ul,section#project .meta section#blogposts .show .inner.with-download .download ul,section#blogposts .show .inner.with-download .download section#contact ul,section#contact section#blogposts .show .inner.with-download .download ul,section#blogposts .show .inner.with-download .download section#contact h3,section#contact section#blogposts .show .inner.with-download .download h3{margin-right:10px}}@media (max-width:550px){section#blogposts .index,section#blogposts .show{float:none;clear:both}section#blogposts .index{width:100%}section#blogposts .show{width:97%}}

section#blogpost2 h1{color:#fff}
section#blogpost2 p{font-size:12.4px; color:#fff; font-family:arial, serif;font-weight:normal; letter-spacing:-0px; line-height: 16px; text-transform:normal;}
section#blogpost2{background:#000;color:#333}
section#blogpost2 .note{color:#b2b2b2}
section#blogpost2 .index{width:23.5%;float:left}
section#blogpost2 .index hgroup{margin:10% 0}
section#blogpost2 .index ul li{width:100%;margin-bottom:10px}
section#blogpost2 .show{background:#000;background:rgba(0,0,0,0.7);color:#000;background-color:#000;overflow:hidden;float:right;top:0;padding:1.546%;width:72%}section#blogpost2 .show .note{color:#666}
section#blogpost2 .show .image{width:90%;padding:5%;margin-bottom:1.5%;text-align:center;background:-webkit-gradient(radial, 0% 0%, 0, 0% 0%, 100, color-stop(0%, #4d4d4d), color-stop(100%, #333));background:-webkit-radial-gradient(top left, #4d4d4d, #333);background:-moz-radial-gradient(top left, #4d4d4d, #333);background:-o-radial-gradient(top left, #4d4d4d, #333);background:-ms-radial-gradient(top left, #4d4d4d, #333);background:radial-gradient(top left, #4d4d4d,#333333)}

section#blogpost2 .show .description{width:100%;-webkit-column-count:3;-moz-column-count:3;-o-column-count:3;column-count:3}section#blogpost2 .show .description .code,section#blogposts .show .description section#project .code_notes,section#project section#blogposts .show .description .code_notes{padding:1.5%;background:rgba(0,0,0,0);display:inline}

section#blogpost2 .show .inner.with-download .download{float:right;width:25%;text-align:right}
section#blogpost2 .show .inner.with-download .download a{float:right;background-image:url(arrow-right-medium-green.png);background-position:10px center;width:140px}section#blogpost2 .show .inner.with-download .download a:hover{background-image:url(arrow-right-medium-dark.png)}section#blogpost2 .show .inner.with-download .download a,section#blogpost2 .show .inner.with-download .download a:hover{font-size:20px;cursor:pointer;padding:5px 10px;cursor:pointer}

section#blogpost2 .show .inner.with-download .download p,section#blogpost2 .show .inner.with-download .download section#project .meta ul,section#project .meta section#blogpost2 .show .inner.with-download .download ul,section#blogpost2 .show .inner.with-download .download section#contact ul,section#contact section#blogpost2 .show .inner.with-download .download ul,section#blogpost2 .show .inner.with-download .download section#contact h3,section#contact section#blogpost2 .show .inner.with-download .download h3{text-align:right;margin-top:0;margin-right:10px}

section#blogpost2 .show .inner.with-download .description{width:70%;float:left;-webkit-column-count:2;-moz-column-count:2;-o-column-count:2;column-count:2}@media (max-width:1024px){section#blogpost2 .index{width:48.5%}section#blogpost2 .show{width:47%}section#blogpost2 .show .description{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1}section#blogpost2 .show .inner.with-download .description{-webkit-column-count:1;-moz-column-count:1;-o-column-count:1;column-count:1;width:100%;float:none}section#blogpost2 .show .inner.with-download .download{width:50%}section#blogpost2 .show .inner.with-download .download p,section#blogpost2 .show .inner.with-download .download section#project .meta ul,section#project .meta section#blogpost2 .show .inner.with-download .download ul,section#blogposts .show .inner.with-download .download section#contact ul,section#contact section#blogpost2 .show .inner.with-download .download ul,section#blogposts .show .inner.with-download .download section#contact h3,section#contact section#blogpost2 .show .inner.with-download .download h3{margin-right:10px}}@media (max-width:550px){section#blogpost2 .index,section#blogpost2 .show{float:none;clear:both}section#blogpost2 .index{width:100%}section#blogpost2 .show{width:97%}}


#foota {
    position:fixed;
    bottom:0px;
	color:#fff;
	background:#000;
	height:45px;
	width:100%;
	z-index:9999;
	float:left;
}

#content_containa {
float:right;
padding-top:4px;
	padding-right:3em;
    padding-bottom:2em;
}