@charset "UTF-8";
/* CSS Document */

*, *:before, *:after {
  -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
 }

/* For modern browsers */
.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}

.clearfix:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.clearfix {
    zoom:1;
}

::selection {
        background: #ed1c24; /* Safari */
        color: #e5e5e5;
        }
::-moz-selection {
        background: #ed1c24; /* Firefox */
        color: #e5e5e5;
}


/* --------------------------------------------
   Splinter Styles
-------------------------------------------- */

body { background:#ececec; font-family: "ff-meta-web-pro", Georgia, Arial, sans-serif; color: #4b4b4b; font-size: 62.5%; margin: 0; }
h1, h2, h3, h4, h5, h6 { font-weight:normal; font-family: "ff-din-web", Georgia, Arial, sans-serif; color:#ed1c24; }
	
	a { color: #ed1c24; text-decoration: none; }
	a:hover { text-decoration: underline; }

	#container { position:relative; }
		
		#header-wrapper { /*position:fixed; top:0;*/ z-index:10; width:100%; background:url(../img/bg-header.gif) repeat-x top left #ffffff; }
		#header-wrapper.sticky { position:fixed; top:-32px; }
		#header { width: 960px; margin: 0 auto; position: relative; }
			#header-left { float: left; width: 104px; position: relative; }
			#header-right { float: right; width: 856px; height: 72px; border-bottom: 1px solid #ed1c24;  }
			#header-sub { position: absolute; right: 0; top: 73px; width: 856px; clear:both; background: url(../img/bg-subnav.png); border-bottom: 1px solid #ed1c24; z-index:11;}
			
			#header h1 {width: 68px; height: 67px; overflow: hidden; position:absolute; top:38px; left:14px;  z-index:10;}
			#header h1 a {display: block; width: 68px; height: 67px; overflow: hidden; background:url(../img/logo-splinter.png) top left; text-indent:-2000px;}
			#header h1 a:hover {background-position: bottom left;}
			#header-right form { float: right; margin: 42px 0 0 0; border-bottom: 2px solid #ed1c24; }
			#header-right form input { border: none; background: none; outline: none; width:176px; color: #999; }
			#header-right form button { border: 0; background: transparent; cursor: hand; cursor: pointer; }
		
			#nav { float: left; margin: 32px 0 0 0; padding: 10px 0 0 0; }
			#nav li { float: left; margin: 0 16px 0 0; font-weight:normal; font-family: "ff-din-web", Georgia, Arial, sans-serif; font-size: 1.6em; text-transform:uppercase; }
			#nav li a { color: #4b4b4b; }
			#nav li a:hover { color: #ed1c24; }
			#nav li.current-menu-item a { color: #ed1c24; text-decoration:underline; }
			#header-right select { display: none; }
			
			#subnav { float: left; margin: 0 0 0 127px; padding: 10px 0 10px 0; }
			#subnav li { float: left; margin: 0 24px 0 0; font-weight:normal; font-family: "ff-din-web", Georgia, Arial, sans-serif; font-size: 1.4em; text-transform:uppercase; }
			#subnav li a { color: #4b4b4b; }
			#subnav li a:hover { color: #ed1c24; }
			#subnav li.current-menu-item a { color: #ed1c24; text-decoration:underline; }
			#header-sub select { display: none; }
		
		#masthead-wrapper { background:#ffffff; }
		#masthead { width: 960px; margin: 0 auto 0 auto; position: relative; }
		#masthead.sticky { margin: 72px auto 0 auto; };
			.slides_container { width:100%; height:500px; }
				.slides_container div.slide { position:relative; width:960px; height:500px; display:block;  }
				.slides_container div.slide-inner {padding: 72px 0 0 104px; }
				.slides_container div.slide img { position:absolute; top:0; left:0; z-index:-1; }
				.slides_container div.slide h3 {font-size: 4.4em; line-height: 0.9em; margin: 0; font-weight: normal; text-transform:uppercase; color: #ff2b06; }
				.slides_container div.slide p {font-size: 1.6em; line-height: 1.3em; padding: 16px 176px 0 0; margin: 16px 0 0 0; border-top: 1px solid #ed1c24; }
				.slides_container div.slide ul {margin: 32px 0 0 0;}
				.slides_container div.slide li {font-family: "ff-din-web", Georgia, Arial, sans-serif; font-size:1.6em; float: left; text-transform:uppercase; overflow:hidden; margin: 0 16px 0 0;}
				.slides_container div.slide li a {display:block; width:156px; background-color: #ed1c24; color: white; padding: 16px 10px; }
				.slides_container div.slide li a:hover {text-decoration: none; background-color: white; color: #ed1c24; }
				
				.slides_container .slides_control {height:500px !important;  }
				
				.slide-details { background-color: #fafafa; width:368px; }
				.slide-details-inner { padding: 20px; }
				.slides_container div.slide .slide-details-inner p { line-height: 1.3em; padding: 16px 0 0 0; }
				
				#lead-slide-content {width:466px; }
				#slide-splinter-design {width:360px; height:112px; overflow:hidden; background:url(../img/slide-splinter-design.png) no-repeat top left;text-indent:-2000px; }
				#slide-something-diff {width:466px; height:118px; overflow:hidden; background:url(../img/slide-something-diff.png) no-repeat bottom left;text-indent:-2000px; }
				
				#slides .prev {position: absolute; top:200px; left: 0; z-index:5; display:block; width:35px; height: 69px; background:url(../img/slider-prev.png) top left no-repeat; overflow:hidden; text-indent: -2000px; }
				#slides .prev:hover {background-position:bottom left;}
				
				#slides .next {position: absolute; top:200px; right: 0; z-index:5; display:block; width:35px; height: 69px; background:url(../img/slider-next.png) top left no-repeat; overflow:hidden; text-indent: -2000px; }
				#slides .next:hover {background-position:bottom left;}
				
		#content-wrapper { background: white; padding: 0 0 50px 0; }
		.games-page #content-wrapper { background: #ececec; }
		
		#content { width: 960px; margin: 0 auto; padding: 20px 0 0 0; }
			h2#home-what-we-do { font-size:3.2em; text-transform:uppercase; text-align: center; border-top: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5; padding: 16px 0; margin: 0 0 20px 0;}
			
			#blog-articles { clear: both; margin: 0 8px;}
			.blog-article { float: left; width: 224px; margin: 0 16px 0 0; padding: 0 0 10px 0; }
			.blog-article.fourth { margin: 0; }
			.blog-article .blog-img { display: block; overflow: hidden; height: 180px; margin: 0 0 15px 0; position: relative; z-index: -1; }
			.blog-article.second .blog-img, .blog-article.fourth .blog-img { display: block; overflow: hidden; height: 145px; margin: 0 0 15px 0; }
			.blog-article h3 { font-size: 1.6em; text-transform: uppercase; padding: 0 0 10px 0; margin: 0 0 10px 0; border-bottom: 1px solid #b5b5b5; }
			.blog-article p { font-size: 1.3em; line-height: 1.23em; }
			.blog-article a { display:block; cursor: hand; cursor: pointer; }
			.blog-article a img {
				-moz-opacity:.20; filter:alpha(opacity=20); opacity:.20; 
			}
			.blog-article a:hover { background-color: #cff5fe; }
			.blog-article a:hover img {
				-moz-opacity:1; filter:alpha(opacity=100); opacity:1; cursor: hand; cursor: pointer;
			}
			
			
			#game-thumbs { clear: both; margin: 0 8px;}
			.game-thumb { float: none; width: 944px; margin: 0 0 32px 0; padding: 0 0 0 0; }
			.game-thumb.second { margin: 0; }
			.game-thumb .blog-img { display: block; overflow: hidden; height: 162px; margin: 0 0 15px 0; position: relative;  }
			.game-thumb h3 { font-size: 1.6em; text-transform: uppercase; padding: 10px 0 10px 0; margin: 0 0 0 0; border-bottom: 1px solid #b5b5b5; }
			.game-thumb p { font-size: 1.3em; line-height: 1.23em; }
			.game-thumb a { display:block;  cursor: hand; cursor: pointer;}
			.game-thumb a img {
				
			}
			.game-thumb a:hover { background-color: #cff5fe; }
			.game-thumb a:hover img {
				
			}
		
		#social { width: 944px; margin: 0 auto; padding: 16px 0 32px 0; clear: both; }
			.social-link { font-size: 1.3em; float: right; }
			.social-header { border-bottom: 1px solid #b5b5b5; margin: 0 0 20px 0; position:relative; }
			.social-header h3 { float: left; text-indent:-2000px; }
			#flickr-feed { width: 224px; float: left; }
			#flickr-feed img { margin: 0 0 10px 0; }
			#flickr-feed img.third { display: none; }
			
			#flickr-feed .social-header h3 { width: 30px; height: 25px; background:url(../img/icon-flickr.png) top left no-repeat; position:absolute; top:0; left:0; }
			#twitter-feed .social-header h3 { width: 40px; height: 30px; background:url(../img/icon-twitter.png) top left no-repeat; position:absolute; top:0; left:0; }
			#vimeo-feed .social-header h3 { width: 30px; height: 25px; background:url(../img/icon-vimeo.png) top left no-repeat; position:absolute; top:0; left:0; }
			
			#twitter-feed { width: 320px; float: right; margin: 0; }
			#twitter-feed .tweet { clear:both; margin: 0 0 30px 0; }
			#twitter-feed .tweet img { float: left; }
			#twitter-feed .tweet p { padding: 0 0 0 48px; }
			#twitter-feed .tweet.first p { font-size: 2.4em; line-height: 1.3em; }
			#twitter-feed .tweet.second p { font-size: 1.3em; line-height: 1.3em; }
			#vimeo-feed { width: 320px; float: right; }
			#social-col2 { width: 334px; float: left; }
			#weekly-quote { width: 372px; float: right; }
			#weekly-quote p { font-size: 1.3em; line-height: 1.3em; margin: 0 0 15px 0; }
			#weekly-quote p.quote-by { margin: 15px 0 0 0; }
			#weekly-quote p.quote-by img { vertical-align:middle; }
		
		/* ABOUT PAGE */
		
		#were-making {width:475px; height:227px; overflow:hidden; background:url(../img/h2-were-making-something.png) no-repeat bottom left;text-indent:-2000px; }
		
		
		#subpage.games-page #masthead-wrapper {
			background: url(../img/bg-subpage.gif) repeat-x left -70px #D5F9FF;
		}
		
		#subpage #masthead-wrapper { background:url(../img/bg-subpage.gif) repeat-x top left #d5f9ff; }
		#masthead-subpage { position:relative; }
		#masthead-subpage-title { padding: 72px 0 72px 100px;  }
		#masthead-subpage img {position: absolute; right: 30px; top: -78px; }
		
		#masthead-subpage p { border-top: 1px solid #7ad1df; border-bottom: 1px solid #7ad1df; margin: 32px 0; font-size: 2.8em; line-height:1.2em; padding: 48px; font-family: "ff-meta-web-pro", Georgia, Arial, sans-serif; }
		
		/* GAMES PAGE */
		
		#games-title { height:227px; }
		.games-page #masthead-subpage-title {
			padding: 0 0 0 82px;
		}
		
		#subpage.games-page #masthead-subpage h2 img {position:relative; top:auto; left:auto; }
		#subpage.games-page #masthead-subpage h2 {margin: 80px 0 0 0; }
		
		#games-testimonial { margin-top: 40px; }
		#games-testimonial-left { border-top: 1px solid #b5b5b5; width: 100%; float: left; padding: 48px; }
		#games-testimonial-right { border-top: 1px solid #b5b5b5; width: 376px; float: right; }
		#games-testimonial-left .games-testimonial-inner { padding: 16px 0 16px 8px; }
		#games-testimonial-right .games-testimonial-inner { padding: 16px 8px 16px 0; }
		p#testimonial-lead { font-size: 2em; line-height: 1.2em; margin: 0 0 10px 0; color: #ed1c24; }
		p#testimonial-name { font-size: 1.5em; line-height: 1.2em; margin: 0 0 40px 0; }
		
		#splinter-back-link { display:block; padding: 8px; position:absolute; top:0; left:0; background: #ed1c24; color: white; font-size: 14px; }
		#splinter-back-link:hover { background: #000; color: white; text-decoration: none; }
		
		/* FOOTER */
			
		#footer-wrapper { background-color: #474747; }
		#footer { width: 944px; margin: 0 auto; padding: 52px 0 170px 0; background:url(../img/established-1997.png) no-repeat bottom center; }
			#footer-col1 { width: 480px; float: left; }
			#footer-col2 { width: 240px; float: left; }
			#footer-col3 { width: 224px; float: left; }
			#footer a { color: white;}
			#footer li { color: white; font-size: 1.3em; line-height: 1.3em; }
			#footer-col2 li { background:url(../img/li-dash.png) no-repeat left center; padding: 0 0 0 20px; margin: 0 0 0 -20px; }
			#footer h4 { color: white; font-size: 1.3em; line-height: 1.3em; font-weight: bold; font-family: "ff-meta-web-pro", Georgia, Arial, sans-serif; margin: 0 0 20px 0; }
			#footer-col1 p { clear:both; font-size: 1.3em; line-height: 1.3em; color: white; }
			#footer-icons li { float: left; width: 33px; height: 33px; overflow:hidden; text-indent: -2000px; margin: 5px 8px 5px 0; }
			#footer-icons li#footer-icon-splinter { width: 43px; background:url(../img/icon-splinter.png) no-repeat top left; margin: 0 8px 0 0; border-right: 1px solid white; }
			#footer-icon-flickr a { display: block; width: 30px; height: 25px; overflow: hidden; text-indent: -2000px; background:url(../img/icon-foot-flickr.png) no-repeat top left; }
			#footer-icon-twitter a { display: block; width: 30px; height: 25px; overflow: hidden; text-indent: -2000px; background:url(../img/icon-foot-twitter.png) no-repeat top left; }
			#footer-icon-vimeo a { display: block; width: 30px; height: 25px; overflow: hidden; text-indent: -2000px; background:url(../img/icon-foot-vimeo.png) no-repeat top left; }
			#footer-icon-facebook a { display: block; width: 30px; height: 25px; overflow: hidden; text-indent: -2000px; background:url(../img/icon-foot-facebook.png) no-repeat top left; }
			
			#footer-icon-flickr a:hover, #footer-icon-twitter a:hover, #footer-icon-vimeo a:hover, #footer-icon-facebook a:hover { background-position: 0 -29px; }

/* --------------------------------------------
   < 1200px viewport
-------------------------------------------- */			
				
@media (max-width: 1200px) {
	
}


/* --------------------------------------------
  iPad in landscape
-------------------------------------------- */

/* 	
	TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
	@media (max-width: 1024px) {  } 
*/
	
@media (max-device-width: 1024px) and (orientation: landscape) {
	
}


/* --------------------------------------------
  iPad in portrait
-------------------------------------------- */

/* 	
	TO PREVIEW ON THE DESKTOP, REPLACE THE QUERY WITH THE FOLLOW:
	@media (max-width: 768px) {  } 
*/

/* @media (max-device-width: 1024px) and (orientation: portrait) { */

@media (max-width: 960px) { 

	.game-thumb { width: 100%; }
	.game-thumb iframe { width: 100%; }
	
	#header { width: 740px; margin: 0 auto; }
			#header-left { float: left; width: 104px; position: relative; }
			#header-right { float: right; width: 636px; height: 72px; border-bottom: 1px solid #ed1c24;  }
			#header-right form { display: none; }
	
	
	#masthead { width: 740px; margin: 0 auto 0 auto; position: relative; }
		#masthead.sticky { margin: 72px auto 0 auto; };
			.slides_container { width:740px; height:417px; overflow:hidden; }
			.slides_container .slides_control {height:417px !important;  }
				.slides_container div.slide { position:relative; width:740px; height:417px; display:block; }
				.slides_container div.slide img { width:740px; height:417px; }
				#lead-slide-content {width:346px; }
				#slide-splinter-design {width:252px; height:84px; overflow:hidden; background:url(../img/slide-splinter-design-sml.png) no-repeat top left;text-indent:-2000px; }
				#slide-something-diff {width:326px; height:78px; overflow:hidden; background:url(../img/slide-something-diff-sml.png) no-repeat bottom left;text-indent:-2000px; }
				.slides_container div.slide p {font-size: 1.5em; line-height: 1.4em; padding: 16px 56px 0 0; margin: 16px 0 0 0; border-top: 1px solid #ed1c24; }
				.slides_container div.slide h3 {font-size: 4.6em; font-weight: normal; text-transform:uppercase; color: #ff2b06; }
				.slides_container div.slide ul {margin: 200px 0 0 0;}
				.slides_container div.slide li a {display:block; width:176px; background-color: white; padding: 10px 10px; }
	
	#content { width: 740px; margin: 0 auto; padding: 20px 0 0 0; }
		.blog-article { float: left; width: 224px; margin: 0 24px 0 0; padding: 0 0 10px 0; }
		.blog-article.third { margin: 0; }
		.blog-article.fourth { display: none; }
		
	#social { width: 724px; margin: 0 auto; padding: 16px 0 32px 0; clear: both; }
		#flickr-feed {width: 724px; clear:both;}
		#flickr-feed img { margin: 0 23px 10px 0; }
		#flickr-feed img.third { display: inherit; margin: 0 0 10px 0; }
		#social-col2 { width: 320px; }
	
	#footer { width: 724px; margin: 0 auto; padding: 52px 0 170px 0; background:url(../img/established-1997.png) no-repeat bottom center; }
			#footer-col1 { width: 256px; float: left; }
			#footer-col2 { width: 240px; float: left; }
			#footer-col3 { width: 224px; float: left; }
	
	#masthead-subpage p { font-size: 2.2em; line-height:1.2em; }
}

/* --------------------------------------------
  Mobile
-------------------------------------------- */

@media (max-width: 760px) {
	#content,
	#games-testimonial-left,
	#games-testimonial-right,
	#games-testimonial,
	#masthead,
	#footer { width: 100%; }
	
	#masthead-subpage {
		width: 100%;
		overflow: hidden;
	}
	
	#games-testimonial-left {
		padding: 48px;
	}
	
	#masthead-subpage p { font-size: 1.8em; line-height:1.2em; }
}

@media screen and (max-width: 480px) {
/*@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {*/
	
	body { }
	
	#header-wrapper { /*position:fixed; top:0;*/ z-index:10; width:100%; background-color: white; position:fixed; top:-32px; }
		#header-wrapper.sticky { position:fixed; top:-32px; }
	
	#header { width: 100%; margin: 0; }
			#header-left { float: left; width: 104px; position: relative; }
			#header-right { float: right; width: 65%; height: 72px; border-bottom: 1px solid #ed1c24; overflow:hidden;  }
			#header-right form { display: none; }
			
			#header-right select { display: block; margin: 40px 0 0 0; width: 95%; }
			#nav {display:none;}
	
	#masthead { width: 100%; margin: 0; position: relative; margin: 40px auto 0 auto; }
		#masthead.sticky { margin: 40px auto 0 auto; };
			.slides_container { width:100%;  overflow:hidden; }
			.slides_container div.slide-inner {padding: 52px 0 0 16px;}
			.slides_container .slides_control {height:300px !important;  }
			.slides_container .slides_control {  }
				.slides_container div.slide { position:relative; width:740px; height:417px; display:block; background: white; }
				.slides_container div.slide img { display:none; }
				#lead-slide-content {width:290px; }
				#slide-splinter-design {width:202px; height:68px; margin: 0; overflow:hidden; background:url(../img/slide-splinter-design-v-sml.png) no-repeat top left;text-indent:-2000px; }
				#slide-something-diff {width:261px; height:62px; margin: 0; overflow:hidden; background:url(../img/slide-something-diff-v-sml.png) no-repeat bottom left;text-indent:-2000px; }
				.slides_container div.slide p {font-size: 1.5em; line-height: 1.4em; padding: 16px 16px 0 0; margin: 16px 0 0 0; border-top: 1px solid #ed1c24; text-align:left; }
				.slides_container div.slide h3 {font-size: 4.6em; font-weight: normal; text-transform:uppercase; color: #ff2b06; }
				.slides_container div.slide ul {margin: 200px 0 0 0;}
				.slides_container div.slide li a {display:block; width:176px; background-color: white; padding: 10px 10px; }
				#slides .next, #slides .prev {display:none; }
	
	h2#home-what-we-do { font-size:2.2em; text-align: center; border-top: 1px solid #b5b5b5; border-bottom: 1px solid #b5b5b5; padding: 8px 0; margin: 0 0 10px 0;}
	
	#content { width: 100%; margin: 0; padding: 20px 0 0 0; }
		.blog-article { float: none; width: 224px; margin: 0 auto; padding: 0 0 10px 0; }
		.blog-article.third { margin: 0 auto; }
		.blog-article.fourth { display: none; }
		
	#social { width: 100%; margin: 0; padding: 16px 0 32px 0; clear: both; }
		#flickr-feed {width: 100%; clear:both;}
		#flickr-feed a {display:block; text-align:center;}
		#flickr-feed img { margin: 0 0 16px 0; }
		#flickr-feed img.third { display: none; }
		#social-col2 { width: 100%; }
		#flickr-feed .social-header h3 { left: 16px; }
		.social-link { margin: 0 16px 0 0; }
		#twitter-feed { width: 100%; float: right; margin: 0; }
			#twitter-feed .tweet { clear:both; width: 224px; margin: 0 auto 30px auto; }
			#twitter-feed .tweet img { float: left; }
			#twitter-feed .tweet p { padding: 0 0 0 48px; }
			#twitter-feed .tweet.first p { font-size: 1.6em; line-height: 1.3em; }
			#twitter-feed .tweet.second p { font-size: 1.3em; line-height: 1.3em; }
			#vimeo-feed { display: none; }
		
		#weekly-quote {margin:0; width: 100%; }
		#weekly-quote img {width: 224px; margin: 0 auto; }
		#weekly-quote p {width:224px; margin: 0 auto 15px auto; }
		#weekly-quote p.quote-by { width: 224px; margin: 15px auto 0 auto; }
		#weekly-quote .quote-by img {width:auto;}
	
	#footer { width: 100%; margin: 0 auto; padding: 52px 0 170px 0; background:url(../img/established-1997.png) no-repeat bottom center; }
			#footer-col1 { width: 224px; float: none; margin: 0 auto 20px auto; }
			#footer-col2 { width: 224px; float: none; margin: 0 auto 20px auto;}
			#footer-col3 { width: 224px; float: none; margin: 0 auto 20px auto;}
}