stylesheet.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: -2px;
  font-weight: normal;
  font-size: 45px;
	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%;
}


.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;
}

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

.nav {
   margin: 0 auto;
   padding-top: 55px;
   padding-right: 750px;
   width: 320px;
   height: 35px;
   z-index: 9000;
}

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

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

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

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

#footerlogo {
  width: 400px;
  height: 150px;
  float: left;
  padding-left: 20px;
}

.social {
   margin: 0 auto;
   width: 225px;
   height: 40px;
   margin-top: -28px;
   padding-left: 930px;
   z-index: 8500;
}

.footer_social {
  display: none;
}

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


.header {
   background-image: url("images/header_2.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: fixed;
   z-index: 9800;
}

#tablet_hero {
  display: none;
}

.content {
   width: 1125px;
   margin: 0 auto;
   background-repeat: no-repeat;
}

.story {
   width: 510px;
   margin-right: auto;
   margin-left: auto;
   padding: 25px 15px 75px 15px;
   float: left;
}

.story_left {
   width: 500px;
   height: 480px;
   margin-right: auto;
   margin-left: auto;
   padding: 25px 20px 75px 20px;
   float: left;
   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: 500px;
   height: 480px;
   margin-left: 40px;
   padding: 25px 20px 75px 20px;
   float: left;
   background: rgba(255, 255, 255, .6);
}

#portfolio_fancybox {
   width: 1100px;
   margin: 0 auto;
   padding: 25px 0px 25px 0px;
}

a.fancybox {
  padding: 2px;
}


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

input {
  width: 450px;
  height: 30px;
  margin-bottom: 15px;
}

#message {
  width: 450px;
  height: 150px;
  margin-bottom: 15px;
}

input[type=text] {
  font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  font-size: 15px;
  color: #4f5256;
}

input[type=name] {
  font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  font-size: 15px;
  color: #4f5256;
}

input[type=email] {
  font-family: "RobotoThin",sans-serif;
  font-style: normal;
  letter-spacing: 0px;
  font-weight: normal;
  font-size: 15px;
  color: #4f5256;
}

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;
}

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;
}


/*
   Slides container
   Important:
   Set the width of your slides container
   Set to display none, prevents content flash
*/

.slides_container {
   width:1120px;
   margin-right: auto;
   margin-left: auto;
   overflow:hidden;
   display:none;
   -moz-box-shadow: 0px 3px 8px -1px #888888;
   -webkit-box-shadow: 0px 3px 8px -1px #888888;
   box-shadow: 0px 3px 8px -1px #888888;
}


/*
   Each slide
   Important:
   Set the width of your slides
   If height not specified height will be set by the slide content
   Set to display block
*/

.slides_container a {
   width:1100px;
   height:300px;
   padding: 0px 0px 0px 0px;
   margin-left: auto;
   margin-right: auto;
   display:block;
   border: 10px solid;
}

.slides_container a img {
   display:block;
   top: 500px;
   overflow:hidden;
}

.slideframe {
   margin-top: 250px;
   position: relative;
}

/*
   Next/prev buttons
*/

#slides .prev {
   position: relative;
   padding-top: 5px;
   padding-left: 10px;
   padding-bottom: 20px;
   display:block;
   float: left;
   z-index:101;
}

#slides .next {
   padding-top: 5px;
   padding-right: 10px;
   padding-bottom: 20px;
   position: relative;
   float: right;
   z-index:101;
}

#slidenav {
   padding-right: 25%;
}

/*
   Pagination
*/

.pagination {
   margin:26px auto 0;
   width:100px;
}

.pagination li {
   float:left;
   margin:0 1px;
   list-style:none;
}

.pagination li a {
   display:block;
   width:12px;
   height:0;
   padding-top:12px;
   background-image:url(images/slide/pagination.png);
   background-position:0 0;
   float:left;
   overflow:hidden;
}

.pagination li.current a {
   background-position:0 -12px;
}

/* END SLIDER STYLES */


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

.footcontent {
   margin: 0 auto;
   padding-left: 500px;
}

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

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

.clearfix {
   display: inline-block;
}