tablet.css

@font-face {
    font-family: 'RobotoRegular';
    src: url('fonts/Roboto-Regular-webfont.eot');
    src: url('fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Regular-webfont.woff') format('woff'),
         url('fonts/Roboto-Regular-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}


@font-face {
    font-family: 'RobotoBoldCondensed';
    src: url('fonts/Roboto-BoldCondensed-webfont.eot');
    src: url('fonts/Roboto-BoldCondensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-BoldCondensed-webfont.woff') format('woff'),
         url('fonts/Roboto-BoldCondensed-webfont.ttf') format('truetype'),
         url('fonts/Roboto-BoldCondensed-webfont.svg#RobotoBoldCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoBoldCondensedItalic';
    src: url('fonts/Roboto-BoldCondensedItalic-webfont.eot');
    src: url('fonts/Roboto-BoldCondensedItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-BoldCondensedItalic-webfont.woff') format('woff'),
         url('fonts/Roboto-BoldCondensedItalic-webfont.ttf') format('truetype'),
         url('fonts/Roboto-BoldCondensedItalic-webfont.svg#RobotoBoldCondensedItalic') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoCondensed';
    src: url('fonts/Roboto-Condensed-webfont.eot');
    src: url('fonts/Roboto-Condensed-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Condensed-webfont.woff') format('woff'),
         url('fonts/Roboto-Condensed-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Condensed-webfont.svg#RobotoCondensed') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoThin';
    src: url('fonts/Roboto-Thin-webfont.eot');
    src: url('fonts/Roboto-Thin-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Thin-webfont.woff') format('woff'),
         url('fonts/Roboto-Thin-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Thin-webfont.svg#RobotoThin') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'RobotoMedium';
    src: url('fonts/Roboto-Medium-webfont.eot');
    src: url('fonts/Roboto-Medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/Roboto-Medium-webfont.woff') format('woff'),
         url('fonts/Roboto-Medium-webfont.ttf') format('truetype'),
         url('fonts/Roboto-Medium-webfont.svg#RobotoMedium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'wisdom_script_airegular';
    src: url('fonts/wisdom/wisdom_script-webfont.eot');
    src: url('fonts/wisdom/wisdom_script-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/wisdom/wisdom_script-webfont.woff') format('woff'),
         url('fonts/wisdom/wisdom_script-webfont.ttf') format('truetype'),
         url('fonts/wisdom/wisdom_script-webfont.svg#wisdom_script_airegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
	font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: -1px;
  font-weight: normal;
  font-size: 35px;
	color: #4f5256;
  line-height: 10px;
}


h2 {
	font-family: 'RobotoThin', sans-serif;
	font-size: 18px;
  font-weight: normal;
	color: #999;
  line-height: 15px;
}

h3 {
   font-family: 'Open Sans Condensed', sans-serif;
   font-size: 10pt;
   font-weight: 300;
   color: #f3f0f0;
   text-align: justify;
}


h4{
  font-family: 'RobotoThin', sans-serif;
  font-size: 13px;
  font-weight: normal;
  color: #999;
  padding-top: 0px;
  line-height: 15px;
}


a {
   font-family: 'RobotoThin', sans-serif;
   font-size: 14pt;
   font-weight: normal;
   color: #fff;
   text-decoration: none;
}

.fancylink {
  font-size: 14px;
}


a:link {color:#ffffff;}      /* unvisited link */

a:visited {color:#ffffff;}  /* visited link */

a:hover {color:#ff66cc;}  /* mouse over link */

a:active {color:#ff33cc;}  /* selected link */

.slides_container a:hover {color:#fff;}  /* mouse over link */

p {
	font-family: 'RobotoThin', sans-serif;
	font-size: 11pt;
	color: #666666;
	text-align: justify;
  line-height: 25px;
}


ul li{
   font-family: arial;
   font-size: 14px;
   color: #ffffff;
   text-align: left;
   list-style: none;
}

html,
body {
   margin:0;
   padding:0;
   height:100%;
}

.divider {
  width: 100%;
  margin: 0 auto;
  padding-top: 25px;
}

.wrapper {
   min-height:100%;
   width: 100%;
   background-image: url("images/gplaypattern.png");
   background-repeat: repeat;
   margin-right: auto;
   margin-left: auto;
   margin-top: 0px;
   margin-bottom: -300px;
   overflow-x: hidden;
}

.navtop {
   float: right;
   font-family: sans-serif;
   font-size: 10px;
   color: #000;
}

.nav {
  display: none;
}

#footerlogo {
  width: 400px;
  height: 150px;
  padding-left: 5%;
}

.social {
   display: none;
}

.footer_social {
  width: 220px;
  height: 40px;
  padding-top: 10px;
  display: block;
  z-index: 8888;
}

.header {
   background-image: url("images/header_tablet.png");
   background-repeat: no-repeat;
   background-color: #f1f1f1;
   background-position: center;
   margin-right: auto;
   margin-left: auto;
   height: 100px;
   width: 100%;
   border-bottom: 5px solid;
   padding-bottom: 0px;
   border-color: #403c3c;
   position: relative;
}

#tablet_hero {
  display: block;
  width: 90%;
  height: auto;
  padding: 10px;
  margin: 0 auto;
  margin-top: 25px;
  -moz-box-shadow: 0px 3px 8px -1px #888888;
  -webkit-box-shadow: 0px 3px 8px -1px #888888;
  box-shadow: 0px 3px 8px -1px #888888;
  background-color: #fff;
}

#tablet_hero img {
  max-width: 100%;
}

.content {
   width: 100%;
   margin: 0 auto;
   background-repeat: no-repeat;
}

#portfolio {
   width: 80%;
   margin: 0 auto;
   background-repeat: no-repeat;
}

.story {
   width: 600px;
   margin-right: auto;
   margin-left: auto;
}

.story_left {
   width: 80%;
   padding-left: 10%;
   padding-right: 10%;
   margin: 0 auto;
   margin-top: 50px;
   background: rgba(255, 255, 255, .6);
}

.story_left a {
  font-family: 'RobotoThin', sans-serif;
  font-size: 11pt;
  color: #666666;
  text-align: justify;
  text-decoration: underline;
  line-height: 25px;
}

.story_left a:hover {
  font-family: 'RobotoThin', sans-serif;
  font-size: 11pt;
  color: #a3a2a2;
  text-align: justify;
  text-decoration: underline;
  line-height: 25px;
}

.story_right {
   width: 80%;
   padding-left: 10%;
   padding-right: 10%;
   padding-top: 10%;
   margin: 0 auto;
   background: rgba(255, 255, 255, .6);
}

#portfolio_fancybox {
   width: 80%;
   padding-left: 10%;
   padding-right: 10%;
   margin: 0 auto;
}

a.fancybox {
  padding: 2px;
}


#contact {
  width: 100%;
  margin: 0 auto;
  padding: 25px 0px 150px 0px;
}

.contact h1{
  margin-left: 50px;
}

form {
  width: 60%;
  padding-left: 20%;
  padding-right: 20%;
  margin: 0 auto;
}

form h2 {
  float: left;
}

input {
  height: 30px;
  margin: 0 auto;
}

#message {
  height: 150px;
  margin-bottom: 15px;
  width: 70%;
  padding-right: 15%;
  padding-left: 15%;
}

input[type=text] {
  font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  font-size: 15px;
  color: #4f5256;
  margin: 0 auto;
  width: 70%;
  padding-right: 15%;
  padding-left: 15%;
}

input[type=name] {
  font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  font-size: 15px;
  color: #4f5256;
  margin: 0 auto;
  width: 70%;
  padding-right: 15%;
  padding-left: 15%;
}

input[type=email] {
  font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  font-size: 15px;
  color: #4f5256;
  margin: 0 auto;
  width: 70%;
  padding-right: 15%;
  padding-left: 15%;
}

button {
  width: 75px;
  height: 30px;
  background-color: #f4f4f4;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  font-family: 'RobotoThin', sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #404040;
  float: left;
}

button:hover {
  width: 75px;
  height: 30px;
  background-color: #e0dfdf;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  font-family: 'RobotoThin', sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #404040;
}

button:active {
  width: 75px;
  height: 30px;
  background-color: #cbcbcb;
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
  font-family: 'RobotoThin', sans-serif;
  font-size: 18px;
  font-weight: normal;
  color: #404040;
}

/* SLIDER STYLES START HERE */

#container {
   background-repeat: no-repeat;
   width: 1125px;
   height: 450px;
   margin-right: auto;
   margin-left: auto;
   margin-top: auto;
}

/*
   Slideshow
*/

#slides {
   margin-right: auto;
   margin-left: auto;
   padding-top: 125px;
   overflow: hidden;
   display: none;
}

.footer {
   width: 100%;
   background: #474849;
   margin-bottom: 0;
   margin-right: auto;
   margin-left: auto;
}

.footcontent {
   margin: 0 auto;
}

.clearfooter {
   height: 300px;
   clear: both;
}

.clearfix:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

.clearfix {
   display: inline-block;
}