@media screen{
/*general*/
body, h1, h2, h3, p, ul, image, li, span,a {margin:0;padding:0;}
body{font-size:75%;line-height:1.3;font-weight:normal;font-family:Tahoma, Geneva, sans-serif;}
p{margin-left:35px;line-height:2;padding-top:10px;}
h1,h2,h3{font-weight:normal;}
img#logo{position: relative;top: 12px;left: 362px;}
#wrapper{width: 900px;height: 1018px;position: absolute;top:230px;left: 25.5%;background: #fff;}

a{color:#000;text-decoration:none;width: 160px;}
a:hover{color:#000;text-decoration:none;}


/*global navigation*/
#globalnav{position:absolute;height:30px;width:899px;top: -180px;left: -30px;}
#globalnav a{font-size:2em;
position:absolute;line-height:30px;display:inline;width:250px;}
#html{position:absolute;left: 75px;}
#website{position:absolute;left: 280px;}
#graphic{position:absolute;left: 510px;}
#programming{position:absolute;left: 725px;}

/*header*/
#header{height:82px;width:100%;position:absolute;top:-100px;background:#B1BC37;}
#header #bar{position: absolute;background: #442503;width: 900px;height: 18px;z-index: 200;top: 82px;left: 0;}
#header #box{background:#99B800;position:relative;left:70px;top:-12px;height:130px;width:350px;z-index:200;}
#header #box img{background:url('../images/logo.png');position:absolute;top:46px;left:39px;}
#header #lines{background:url('../images/five-lines.png');background-repeat:repeat-x;width:100%;height:30px;position:absolute;top:10px;z-index:100;}
#header #bottom{background:#442503;position:relative;top:-48px;left:0;height:18px;width:100%;}
#icons{width:300px;margin-right:16px;float:right;position:absolute;left:585px;top:115px;}
#icons .icon{margin-left:40px;width:50px;height:50px;float:left;}
#icons #email{background:url('../images/icon-sprite.png') no-repeat 0 -115px}
#icons #twitter{background:url('../images/icon-sprite.png') no-repeat 0 -57px}
#icons #rss{background:url('../images/icon-sprite.png') no-repeat 0 0px}

/*nav*/
#nav {position:absolute;right:49px;top:53px;}
#nav li {margin-left:35px;display:inline;list-style:none;}
#nav li a, #nav li span{text-decoration:none;font-size:1.3em;color:#FFF}
#nav li a:hover{text-decoration:underline;}

/*content*/
#content {background:#F6EFC9;position:absolute;top: 0px;width:900px;}


/*left*/
#left{padding-right:10px;width:550px;}
#left h1{font-size:2.7em;color:#9C6421;margin-left:30px;padding-top:25px;}
#left h2{font-size:2em;color:#000;margin-left:30px;margin-bottom:}
#left h2#useful{margin-top:35px;margin-bottom:20px;}
.line{background:#CA6500;width:500px;margin:30px 20px 30px 30px;height:2px;overflow:hidden;}
#image1,#image2{float:right;height:144px;width:236px;margin-left:11px;}
#image1{background:url('../images/image_01.png') no-repeat 9px 9px;}
#image2{background:url('../images/image_02.png') no-repeat 9px 9px;}
#left p{margin-left: 35.5px;margin-top:13px;}
#useful

/*right*/
#right{position:absolute;top:70px;right:20px;width:300px;}
#right #post{background:#E3C66E;position:absolute;top:75px;right:20px;width:300px;}
p{margin:0;padding:0;}
p.border{background:#442503;width:300px;height:20px;position:absolute;top:75px;right:20px;z-index:100;}
p#bottom{background:#442503;width:300px;height:20px;position: absolute;top: 910px;right:20px;z-index:100;}
#right .line{width:231.5px;}
#post h3{margin-top:29px;margin-left:20px;font-size:1.6em;color:#000;font-weight:normal;}
#post h3, #post .post{margin-bottom:30px;}
#post .post{margin-left:34px;width:237px;margin-right:26px;line-height:24px;}
#post .date{margin-bottom:14px;color:#F4263E;}
.date, .title a{margin-left:30px;text-decoration:none;color:#2D961C;}
#post .title{margin-bottom:16px;color:#2D961C;}
#post .title a:hover{color:#2D961C;}

/*bottom*/
ul{margin-bottom:16px;}
ul #2{margin-bottom:13px;}
ul li{display:inline;list-style:none;text-decoration:none;margin-left: 70px;}
ul li a{font-size:1.2em;color:#666;text-decoration:none;}
ul li a:hover{text-decoration:underline;}

/*footer*/
#footer{position: absolute;top: 980px;height: 37.5px;width: 100%;background: #708120;color: #FFF;line-height: 37.5px;text-align: center;}
#footer p{height:37.5px;line-height:37.5px;}

}

@media screen and (max-width: 1023px){

#wrapper{position: absolute;top: 230px;left: 52px;}

img#logo{position: absolute;left: 40px;top: 12px;}

#container{margin-top: 140px;}
#container img{margin-left: 15px;}

/*global navigation*/
#globalnav{position:absolute;height:30px;top: -185px;left: 45px;}
#globalnav a{font-size:2em;
position:absolute;line-height:30px;display:inline;width:250px;}

#html, #website, #graphic, #programming{position:absolute;}

#html{top:;left: 95px;}
#website{top:;left: 290px;}
#graphic{top:;left: 500px;}
#programming{top:;left: 710px;}
}