html, body, div, span, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, img, small, strong, ol, ul, li {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {	line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}


/* STRUCTURE */
body {
min-width:1044px;
width: 100%;
margin: 0;
background-color: #fff;
}
body, html, #container  {height: 100%;}
#header {
background:none repeat scroll 0 0 #FFFFFF;
clear:both;
float:left;
height:80px;
left:0;
padding-left:20px;
padding-top:10px;
position:fixed;
top:0;
width:100%;
z-index:600;
min-width: 980px;
}
.colmask {
clear:both;
float:left;
position:relative;
width:100%;
height: 100%;
}
.fitmask {
clear:both;
float:left;
position:relative;
width:100%;
overflow: hidden;
}
.leftmenu .colright {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
left:520px;
position:relative;
width:160%;
}
.leftmenu .col1wrap {
float:right;
padding-bottom:1em;
position:relative;
right:195px;
width:50%;
}
.leftmenu .col1 {
margin:0 15px 0 215px;
overflow:hidden;
position:relative;
right:100%;
}
.leftmenu .col2 {
float:left;
position:relative;
right:500px;
width:480px;
}
.leftmenu {
background:none repeat scroll 0 0 #89BFCB;
}
.rightmenu {
background:none repeat scroll 0 0;
}
.rightmenu .colleft {
background:none repeat scroll 0 0 #FFFFFF;
float:left;
margin-left:-200px;
position:relative;
right:100%;
width:200%;
height: 100%;
}
.rightmenu .col1wrap {
float:left;
left:50%;
position:relative;
width:50%;
height: 100%;
}
.rightmenu .col1 {
margin:100px 0 0 200px;
padding-left: 20px;
overflow:hidden;
min-height: 100%;
}
.rightmenu #sidebar {
position: fixed;
right: 0px;
top: 0;
width: 180px;
padding: 10px 0px 0px 10px;
z-index: 1200;
height: 100%;
}
.rightmenu .col2 {
float:right;
padding-top: 16px;
left:185px;
position:relative;
width:170px;
}
#content {margin-top: 90px;padding-top:20px;}
#content-wrap {
background:none repeat scroll 0 0 #FFF;
clear:left;
float:left;
height: 100%;
width:100%;
}
#content.first {
background:none repeat scroll 0 0 #89BFCB;
float:left;
position:relative;
right:50%;
width:100%;
min-height: 100%;
}
#mainnav {float:left;width:140px;}
#tags {float: left;width:480px;}
#tags li {
width: 140px; /* take away */
padding-right: 20px;
float: left;
}
/* #lan {clear: both;font-weight: bold;} before */
/*
#lan {
clear:both;
font-weight:bold;
position:absolute;
top:73px;
}
*/
.post img {margin-bottom: 19px;}
abbr, small {
clear:both;
float:left;
font-size:16px;
font-weight:bold;
width:220px;
margin-left: -240px;
padding-top:2px;
}
h2 {clear:both;}
#content.about h2 {
float: left; 
width: 220px;
margin-right:20px;
margin-left: 0px;
}
h2 {margin-left: 240px; margin-right: 20px;}
.about p {float: left; margin-top:13px;}
.post {margin-left: -10px; padding-left: 10px;}
.post-content, #content.about .post, #blog .blog, #projects .project {margin-bottom:57px;clear: both;}
.clear {clear: both;}
.clearfix:after {
content: '.';
display: block;
height: 0;
visibility: hidden;
clear: both;
/* *zoom: 1; */
}
.push {margin-left: 240px;}
.pull {margin-left: -240px;}
#infsrc-loading {clear: both;margin: 19px 0px;}
#loadmore {display: block;}
#load {
text-align: center;
border-bottom: 1px solid;
clear: both;
margin: 0px 20px 20px 0px;
}
#nav {
margin:16px 10px -30px 0px;
float: right; 
text-align: right;
}

/* Typography & Links */
body {
color: #333;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 100%;
line-height: 1.3em;
}
p, span.p {font-size: 14px; margin-bottom: 19px;width: 480px;}
h1 {
float:left;
font-size:1.2em;
width:220px;
margin-top:-3px;
margin-right: 20px;
}
h2, .h2, #content h2 a {
font-size: 21px;
line-height: 1.2em;
font-weight: bold;
margin-bottom: 11px;
margin-right: 170px;
padding-top:8px;
text-decoration: none;
}
h3 {
font-size: 18px;
line-height: 1.3em;
font-weight: normal;
margin-bottom: 12px;
}
#content {font-size: 14px;}
a {
color: #333;
text-decoration: none;
font-size: 14px;
font-weight: bold;
}
a:hover, a.sel, a.lsel {color: #89BFCB;}
#header li {line-height: 0.925em;}
#header a {font-size: 12px; padding: 2px 0px;}
#mainnav a, #tags a {font-weight: bold;display: block;}
#header #tags .active {background-color:#EFF1F1;}
#header #tags .sel {background-color:#FFF;}
#tags li a:hover, #tags .sel.active, #tags .sel, #tags li a.active:hover {color: #89BFCB;}
#tags li a {color: #666;}
#tags li a.active {color: #333;}

#content a {font-size: 14px;text-decoration: underline;}
#content a.more, .count, #content #loadmore, #nav a, #content a.readmore {
color:#333333;
font-size:12px;
font-weight:bold;
text-decoration:none;
text-transform:uppercase;
}
#content a.readmore {display:block;}
#sidebar a:hover, #sidebar a.sel, a.lsel {color: #fff;}
#content a:hover {color: #89BFCB;}
#content {background-color: #fff;color: #000;}
#blog .blog span {display: block;}
#content div.active {background-color:#EFF1F1;}
#rel li.active {background-color: #98C6D0;}

#nav a {
width: 126px;
padding: 0px 20px 0px 0px;
height: 15px;
line-height:19px;
display: block;
background-image: url(../img/a24.png);
background-repeat: no-repeat;
background-position: 130px -29px;
}
#nav a:hover {background-position: 130px 1px;}

#content a.more {
height: 15px;
line-height:19px;
padding-right: 30px;
padding-top: 3px;
margin-bottom: 20px;
background-image: url(../img/au24.png);
background-repeat: no-repeat;
background-position: 90px -45px;
}
#content a.more:hover {background-position: 90px -15px;}
#content a.open {background-position: 90px -30px;}
#content a.open:hover {background-position: 90px 0px;}

.bw, .blogimg {
width:550px;
}
.bh {height: 550px;}
.th1 {height: 150px;}
.th2 {width: 220px;}
.th3 {width: 220px;height: 150px;}

/* Related Projects */
#filterThumb {margin-bottom: 20px;}
#filterThumb h3 {display: inline;}
#filterThumb li {float: left; margin-right: 20px;}
#filterThumb li a {font-size: 12px; text-decoration: none;}

#sidebar h3, #filterThumb h3 {
color:#000000;
font-family: Helvetica,Arial,Verdana,sans-serif;
font-size:12px;
font-style:normal;
font-weight:bold;
line-height:1em;
margin-bottom:0;
padding-top:4px;
text-transform:uppercase; 
}
#sidebar a {font-size: 12px; font-weight: normal;}
#sidebar li {line-height: 1em;}
#sidebar h3 {color: #333;}
#sidebar a:hover {color: #fff;}
#sidebar .active {background-color: #fff;}
#sidebar {background-color: #89BFCB;}
#sidebar ul {margin-bottom: 20px;}


#rel {max-height: 600px; overflow: hidden;}
#rel.blog {max-height: 295px;}
#rel li {margin: 2px 0px;}
#rel img, #relpro img {display: block; margin: 5px 0px 15px 0px;}
#rel .th1, #relpro .th1 {width: 150px; height: auto;	}
#rel .th2, #relpro .th2 {width: 150px;}

/*
#rel li.active {display: block;}
#rel li {display: none;}
*/

/* Views */
#view li a {
height: 12px;
display: block;
background-repeat: no-repeat;
margin: 3px 0px;
padding-bottom: 3px;
background-image: url(../img/vi24.png);
}
#view li.lan a {display: inline;}
#thumb {background-position: 124px -55px;}
#sidebar #thumb:hover, #sidebar #thumb.sel {background-position: 124px -109px;}
#list {background-position: 124px -73px;}
#list:hover, #list.sel {background-position: 124px -127px;}
#scroll {background-position: 124px -91px;}
#scroll:hover, #scroll.sel {background-position: 124px -145px;}
#content.list-view h2 {cursor: pointer;}

.thumb, .fthumb {
cursor:pointer;
float:left;
height:150px;
width:220px;
margin: 0px 20px 20px 0px;
overflow:hidden;
position:relative;
}
.thumbtitle, .thumbtitle a {
z-index: 400;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 19px 0px 0px 19px;
width: 190px;
}
.thumbhover {width: 220px;}
.thumbhover, .thumbtitle {
position: absolute;
top: 0;
left: 0px;
height: 150px;
display: none;
}
.thumbhover {
background: #89BFCB;
opacity: 0.85;
z-index: 200;
filter: alpha(opacity=85);
-ms-filter: "alpha(opacity=85)"; 
-moz-opacity: .85;
}
.morecontent, .thumb {display: none;}

.morecontent li {margin-bottom:20.8px;}
.morecontent p {float: left; clear: both;}
.group, .morecontent ul li {margin-right: 20px;  margin-top: 10.5px; width: 220px; float: left; }
.group {min-height:140px;}
.group ul {font-size: 12px; font-weight: bold; text-transform: uppercase;}
.group li, .morecontent ul li {border-bottom: 1px solid #ccc; padding: 1px 0px 2px 0px}
.group ul li a {font-size: 12px !important; text-transform: none; margin-right: 20px; ; font-weight: normal; text-decoration: none !important;}

.morecontent {margin-top: -22px;}
.morecontent ul li, .morecontent ul li a {font-size: 13px !important;}
.morecontent ul li a {text-decoration: underline !important; font-weight: normal;}
.morecontent ul {/* width: 480px; */ width:740px;}


/* Slideshow */
.slide {
width: 880px;
/* height:560px; */
height: 520px;
overflow: hidden;
margin-top: 19px;
clear: both;
}
.slide p {
font-size:12px;
line-height:1.2em;
width:800px;
}
.slidenav {float: right;}
.slidenav a {
display: block;
height: 15px;
text-indent: -9999px;
background-image: url(../img/a24.png);
background-repeat: no-repeat;
width: 15px;
float: left; 
margin-right: 12px;
}
.count {
float: left;
width: 30px;
text-align: center;
margin-top: -2px;
margin-right: 12px;
}
.next {cursor: pointer;}
.slidenav .next {background-position: 0 -30px;}
.next:hover {background-position: 0 0px;}
.prev {background-position: 0 -45px;}
.prev:hover {background-position: 0 -15px;}
.sh2, .sh1 {height: 450px;}

/* FIRSTPAGE */
#projects {
max-width: 1080px;
}
#blog p, #projects p {
width: 420px;
}
h2.front-title  {
text-transform: uppercase;
font-weight: bold;
margin-right: 0;
}
#blog h2.front-title a, #projects h2.front-title a  {
font-family: Helvetica, Arial, sans-serif;
text-decoration: none;
font-size: 12px;
}
#blog h2.front-title, #blog h2.front-title a {color: #fff;}
.firstItem {clear: both;margin-bottom: 45px;position: relative;}
.firstItem h2 {float: left; width: 340px;}
#blog .active h2 a, #blog .active .meta {color: #fff;}
.firstItem .meta {position: absolute; right: 0; top: 13px;}
.firstItem .th1, .firstItem .th2, .firstItem .th3 {height: 300px; margin-bottom: 19px;} 
.rss-link {display: block; margin-bottom: 10px;}

/* search */
.noshow {display: none;}
#searchform {margin-bottom: 10px;}
#searchdiv {position: relative;}
#searchdiv label {position: absolute; font-size: 12px; padding: 2px 0px 0px 4px;}
.qr {width: 220px; margin-right: 20px; float: left; min-height: 240px; max-height: 300px; word-wrap:break-word; overflow: hidden;}
.qr a {display: block;}
#search #lan, #search .lanh3 {display: none;}
input {font-family:Helvetica, Arial, sans-serif; border: 0; width: 140px; font-size: 12px; height: 18px; padding: 2px 2px;}


#ipadmenu {display: none;}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
#header {position: absolute;}
#relpro, #rel {display: none;}
.colleft {width: 1024px;}
.col1wrap {width: 1024px; float: none; margin: 0;}
#content {width: 1014px;}
#sidebar {display: none;}
#ipadmenu {width: 120px; float: right; display: block;}
#ipadmenu .lsel {color: #89BFCB;}
#ipadmenu input {border: 1px solid #ccc; height: 12px;margin-bottom: 2px;}
#ipadmenu #view li {float: left;}
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
body {width: 600px; min-width: 600px;}
#header {position: absolute; width: 600px; min-width: 600px;}
#relpro, #rel {display: none;}
.rightmenu .colleft {width: 600px; margin: 0; margin-left: 10px; float: none; left: 0;}
.rightmenu .col1wrap {width: 600px; float: none; margin: 0; left: 0;}
#content {width: 580px; margin-top: 70px;}
#sidebar {display: none;}
.rightmenu .col1 {margin-left: 0px;}
h2 {margin-left: 0px;}
h2 small {float: none; display: block; margin: 0;}
.push {margin-left: 0px;}
#tags {clear:both;width:480px; display: none;}
.slide {width: 570px;}
.slide img {width: 570px;}
.slidenav {float:right;margin-top:-36px;}
.more {display: block; margin: 0; margin-bottom: 15px; float: none;}
.morecontent {margin-top: 0px;}
.morecontent ul {width:480px;}
.iphoneCard {width: 180px; font-size: 12px; float: right; margin-right: 10px; color: #333; font-weight: bold;} 
.iphoneCard li {padding: 2px 0;}
.iphoneCard li a {display: block;}
}