body,html {
	margin:0;
	padding:0;
	color:#333333;
	font-size:9pt;
	background:white;
	font-family:Verdana, sans-serif;
}
img { border: none; }
a  {color:#FF6600; text-decoration:none;}
a:visited { color:none; }
a:hover { color:#FF9900; }
a:active { color:#CC6600; }
h1{font-family: 'Roboto', sans-serif;font-style: thin;font-weight:100;color:#48D7CF;font-size: 40pt;display:inline;line-height:100%;}
h2{color:#547515;margin:0;font-size: 13pt;font-weight: normal; display: inline;}
h3{color:#1E7AB0;margin:0;font-size: 13pt;font-weight: normal; display: inline;}
p{line-height:150%;}

.orange{margin:0;padding:0;background:#48D7CF;}
.gray{margin:0;padding:0;background:#333333;}
.white{margin:0;padding:0;background:white;}
.shadow{background-image: url(images/shadow.png); background-position:center;background-repeat: repeat-y;}
.shell-texture{background-image: url(images/shell_pattern2.png); background-position:center;background-repeat:repeat;}
#header-wrap{
	width:900px;
	margin:0 auto;
    	background:#48D7CF;
}
#header {
	padding-left:40px;
	padding-right:20px;
	padding-top:40px;
	padding-bottom:10px;
	height:80px;
	background-image: url(images/top.png); background-position:center;background-repeat:no-repeat;
}
#header h1{display:block;margin: 30px 0px 0px -20px;color:white;}
#nav-wrap{
	width:900px;
	margin:0 auto;
	background:white;
	height:50px;
}
.nav {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
  	background-color: #333333;
}
.nav li {float: left;}

.nav li a {
  display: inline-block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
.nav li a:hover {background-color: #555555;}
.nav li a.current{background:#51B7AA;}
.nav li a.current:hover{background:#8BCFC7;}
.nav li.icon {display: none;}


#footer-wrap{
	width:900px;
    	height:140px;
	margin:0 auto;
    	background:#333333;
}
#footer {
	clear:both;
    height:140px;
    background-image: url(images/tuppy-stamp.png); background-position:center;background-repeat:no-repeat;
}
.title-wrap{
    clear:both;
    width:900px;
    margin:0 auto;
    background:white;
    overflow: hidden;
}
.title {
    padding-left:20px;
    padding-right:20px;
    padding-top:70px;
    padding-bottom:5px;
    line-height:10%;
}
.title p{margin: 0px;padding-top:4px;}
/*.title p::first-line { text-transform: uppercase }*/

.subtitle-wrap{
	width:900px;
	margin:0 auto;
    	background:#48D7CF;
}
.subtitle {
    height:13px;
}
.subtitle h1{font-weight:normal;color:white;margin:0;padding:0;font-size: 13pt;display: inline;}
/* artwork */
.image-gallery-wrap{width:900px;margin:0 auto;background:white;}
.image-gallery {padding-bottom:0px;font-size:0;} 
.image-gallery IMG {vertical-align: bottom;}
/* games & e-learning */
.game-box-wrap{width:900px;margin:0 auto;background:white;}
.game-box{width:450px;height:133px;float:left;margin:0px;padding:0px;line-height: 0px;}
.game-box .left{width:133px;height:133px;float:left;}
.game-box .right{width:317px;height:133px;float:left;line-height:150%;position:relative}
.game-box .right .title{width:317px;height:32px;line-height:32px;float:left;color:white;font-size:12pt;background:#51B7AA;padding:0px;margin-bottom:5px;}
.game-box .icon1{position: absolute;right:10px;bottom:0px;}
.game-box .icon2{position: absolute;right:50px;bottom:0px;}
.game-box .right .title div{padding-left:10px;padding-right:10px;}
.game-box .right .title div,.game-box .right p{padding-left:10px;padding-right:10px;}
.game-box .right h2{padding-left:10px;color:white;font-size:12pt;}
.orange-spacer{clear:both;width:900px;height:10px;background:#D77337;}
.color-spacer{clear:both;width:100%;height:2px;background:#48D7CF;}
.game-box .border{border-left:solid #333333 2px;}
.hidden{display:none;}
/* resume */
.resume-wrap{width:900px;margin:0 auto;background:white;}
.resume-wrap .title {padding-left:20px;padding-right:20px;padding-top:40px;padding-bottom:5px;}
.resume-wrap .gray-line{clear:both;width:900px;height:7px;background:#333333;}
.resume-wrap .job-title{width:900px;margin:0 auto;background:#333333;color:white;font-size: 14px;font-style:italic;}
.resume-wrap .job-title .left{float:left; padding: 7px 0px 7px 20px;}
.resume-wrap .job-title .right{float:right; padding: 7px 20px 7px 0px;}
.resume-wrap .company{padding-left: 20px;padding-top: 15px; }
.resume-wrap ul{padding-left: 80px; line-height:150%;}
.resume-wrap .list-left{float:left;}
.resume-wrap .education{padding-left: 20px;}
.resume-wrap .stamp{text-align:center;padding-top: 30px;padding-bottom: 20px;}
.clear{clear:both;}
/* about */
.about-wrap{width:900px;margin:0 auto;background:white;}
.about{padding-left:40px;padding-right:20px;padding-top:20px;padding-bottom:5px;}
.about .left{float:left;width: 470px;}
.about .right{float:right; width: 350px;}
.about .right img{border-style: solid;border-width: 1px;border-color: #999999; }
.photo-text{text-align:center;}

/* contact */
.row { position:relative; float:left; height: 30px; line-height: 30px;text-align: center; padding-bottom:10px;}
.row .contact-icon { float: left; margin-top:-4px;}

.contact-bottom { background-image: url(images/contact2.jpg); height:450px; background-repeat: no-repeat;}
.contact-wrap{width:900px;margin:0 auto;background:#2E918B;}
.email-form{color:white;padding: 20px 75px 0px 75px;}
button[type=submit] {
background:white;color:#51B7AA;font-size:20px;
padding: 4px 10px 4px 10px;
-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 6px;
text-decoration:none;border:0;
}
button[type=submit]:hover {background:#51B7AA;color:white;box-shaow: 0px 0px 10px #777;}
.mail-sent{width: 50%;margin: 0 auto;margin-top:20px;margin-bottom:20px;padding: 10px 10px 10px 15px;background:#C4E0BA;border-style: solid;border-width: 3px;border-color: #325B24;}
.mail-error{width: 50%;margin: 0 auto;margin-top:20px;margin-bottom:20px;padding: 10px 10px 10px 15px;background:#F5E4E4;border-style: solid;border-width: 3px;border-color: #D56060;}
.mail-error img,.mail-sent img{padding: 3px 5px 3px 0;vertical-align:top;}
.mail-error h1, .mail-sent h1{font-size: 25px;margin:0px;padding:0px;font-weight: normal;color:#333333;}


 
    
#main-background{
	margin:0;
	padding:0;
	background-image: url(images/pattern.jpg); background-repeat: repeat-y; background-position:center;
	margin:0 auto;
}
#main-wrap{
	width:900px;
	margin:0 auto;
	background:#FAF4D8;
}
#main {
	padding:0px 15px;
}
	
#nav-bottom-background{
	clear:both;
	margin:0;
	padding:0;
	background-image: url(images/nav-pattern.jpg); background-repeat: repeat-x;
	height:24px;
}
#nav-bottom-wrap{
	width:900px;
	margin:0 auto;
}
#nav-bottom {
	clear:both;
	padding:0px 15px;
}
	
#footer-background{
	clear:both;
	margin:0;
	padding:0;
	background-image: url(images/footer-pattern.jpg); background-repeat: repeat-x;
	height:172px;
}



/*Screen Sizes*/
@media only screen and (max-width: 920px) {
    .shell-texture{background-image: none;}
    #header-wrap{
        width:100%;
    }
    #nav-wrap{
    	width:100%;
    	height:100%;
    }
    .title-wrap{
        clear:both;
    	width:100%;
    }
    .title {
        padding-top:70px;
        padding-bottom:5px;
   }
   .subtitle-wrap{width:100%;}
   #footer-wrap{
   	width:100%;
       	height:40px;
   }
   #footer {
	clear:both;
	height:40px;
	background-image:none;
   }
   /* artwork */
   .pop-row3-2{display:none;}
   .pop-row3-1{display:none;}
   .pop-row2-2{display:none;}
   .pop-row2-1{display:none;}
   .image-gallery img{width:25%;height:25%;}
   .image-gallery-wrap{
      	width:100%;
   }
   /* games & e-learning */
  .game-box-wrap{width:100%}
  .game-box{width:100%}
  .game-box .right{width:initial;margin:0px 0px 0px 133px;height:100%;float:none;position:relative;background:white;}
  .game-box .right .title{width:initial;float:none;}
  .orange-spacer{clear:both;display:none;}
  .game-box .border{display:none;}
  /* about */
  .about-wrap{width:100%;}
  .about{padding-left:20px;padding-right:10px;}
  .about .left{width: 60%;}
  .about .left p{padding-right:10px}
  .about .right{width: 40%;}
  .about .right img{max-width:100%;height:auto;width:100%;}
  /* resume */
  .resume-wrap {width:100%;}
  .resume-wrap .gray-line{width:initial;}
  .resume-wrap .job-title{width:initial;}
  /* contact */
  .contact-wrap{width:100%;}
  .email-form{padding: 20px 20px 0px 20px;}
}
@media only screen and (max-width: 650px) {
    #header {
         height:100%;
    }
    #header img{width:80%;}
    .nav li:not(:first-child) {display: none;}
    .nav li.icon {
	float: right;
        display: inline-block;
    }
    .nav.responsive {position: relative;}
    .nav.responsive li.icon {
        position: absolute;
        right: 0;
        top: 0;
    }
    .nav.responsive li {
        float: none;
        display: inline;
    }
    .nav.responsive li a {
          display: block;
          text-align: left;
    }
    /* artwork */
    .pop-row3-2{display:initial;}
    .pop-row3-1{display:initial;}
    .pop-row2-2{display:none;}
    .pop-row2-1{display:initial;}
    .image-gallery img{width:33.33%;height:33.33%;}
    /* contact */
    .contact-bottom { background-image: none; height:20px;}
    .contact-wrap{width:100%;}
    .email-form{padding: 20px 20px 0px 20px;}
    .mail-sent{width: 90%;}
    .mail-error{width: 90%;}
}
@media only screen and (max-width: 480px) {
    #header h1{font-size: 32pt;display:block;margin: 30px 0px 0px -20px;color:white;}
    h1{font-size: 26pt;color:#51B7AA;}
    .title {padding-left:10px;padding-top:40px;}
    /* artwork */
    .pop-row3-2{display:initial;}
    .pop-row3-1{display:none;}
    .pop-row2-2{display:initial;}
    .pop-row2-1{display:initial;}
    .image-gallery img{width:50%;height:50%;}
     /* games & e-learning */
    .game-box{height:100%;background:white;}
    .game-box .right{height:100%;}
    .game-box .right p{padding-bottom:20px;}
    /* about */
    .about .left{width: 100%;}
    .about .right{float:unset;width: 100%;}
    /* resume */
    .resume-wrap .job-title .left{padding: 7px 0px 0px 20px;}
    .resume-wrap .job-title .right{float:none; clear: both; display:block; padding: 0px 0px 7px 20px;}
    /* contact */
    .mail-error h1, .mail-sent h1{font-size: 15px;}
    
}