@media screen{
*{margin:0;padding:0;}
body{font-size:75%;line-height:1.3;font-weight:normal;font-family:Arial, Helvetica, sans-serif;}

#wrapper{width: 960px;margin-left: 25%;margin-bottom:100px;}

img#logo{position: relative;left: -129px;top: 12px;}

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

/*global navigation*/
#globalnav{position:relative;height:30px;width:899px;top: -60px;left: -10px;}
#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;}

h1, h2, h3, h4{font-weight: lighter;letter-spacing: 2px;}
h2, h3{font-size: 3em;padding-bottom:20px;position:absolute;}
h1{font-size:4em;left: 300px;position:relative;}
h2{top: 230px;left: 650px;}
h3{top: 234px;left: 1035px;}
h4{font-size: 3em;margin-left: 260px;margin-bottom: 100px;}

#javascript, #php{width:960px;height:1000px;position: relative;}
#javascript{top: 98px;}
#php{top: 100px;}
#javascript img, #php img{width:100%;margin-bottom:30px;}

a #javascript, a #php{text-decoration:none;}
a:hover #javascript, a:hover #php{text-decoration:none;}
}

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

#wrapper{width: 960px;margin-left:0px;}

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

/*global navigation*/
#globalnav{position: relative;height: 30px;top: -60px;left: 80px;}
#globalnav a{font-size:2em;
position:absolute;line-height:30px;display:inline;width:250px;}
#html{position:absolute;left: 95px;}
#website{position:absolute;left: 290px;}
#graphic{position:absolute;left: 500px;}
#programming{position:absolute;left: 710px;}

h1{left: 370px;}
h2{left: 250px;}
h3{left: 650px;}

#javascript, #php{left: 20px;}
#javascript{}
#php{}
#javascript img, #php img{width: 98%;}

}