/**************************************************
Basic HTML
***************************************************/

body {
line-height:1.5;
}

pre,
code, .code {
display:block;
padding:10px;
margin:10px 0px;
}

hr {
  border: 0 #ccc solid;
  border-top-width: 1px;
  clear: both;
  height: 0;
}

/**************************************************
Headings
***************************************************/

h1,h2,h3,h4,h5,h6 {
padding-top: 10px;
}
h1 { line-height: 50px; margin-bottom: 14px;}
h2 { line-height: 40px; margin-bottom: 10px; }
h3 { line-height: 34px; margin-bottom: 4px; }
h4 { line-height: 30px; margin-bottom: 2px; }
h5 { line-height: 24px; }
h6 { line-height: 21px; }

/**************************************************
Spacing 
***************************************************/

ol {
  list-style: decimal;
}

ul {
  list-style: disc;
}

li {
  margin-left: 30px;
}

.sidebar li, .footer li {
  margin-left: 0px;
}

p {

  text-align: left;
}

p,dl,hr,h1,h2,h3,h4,h5,h6,ol,ul,pre,table,address,fieldset,figure {
margin-bottom: 20px;
}

/**************************************************
Links
***************************************************/

a {
}

a:hover {

}

/**************************************************
FORMS
***************************************************/

form {
margin-bottom: 20px; 
}

fieldset {
margin-bottom: 20px; 
}

input[type="text"],
input[type="password"],
input[type="email"],
textarea,
select {
padding: 6px 4px;
outline: none;
margin: 0px;
width: 220px;
max-width: 100%;
margin-bottom: 20px;
}

textarea {
width:460px;
} 

select {
padding: 0px;
}

textarea {
min-height: 60px;
}

label,
legend {
min-width: 100px;
float:left;
}

select {
width: 220px;
}

input[type="checkbox"] {
display: inline;
}

.externalVerify { 
left: -9999px; 
top: -9999px; 
position: absolute; 
}

/**************************************************
BUTTONS
***************************************************/

a.button,
button,
input[type="submit"],
input[type="reset"],
input[type="button"] {
padding: 4px 12px;
display: inline-block;
cursor: pointer;
margin-bottom: 20px;
line-height: 21px;
}

.button.full-width,
button.full-width,
input[type="submit"].full-width,
input[type="reset"].full-width,
input[type="button"].full-width {
width: 100%;
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
}

/**************************************************
SOCIAL MEDIA
***************************************************/

.socialLinks {
height:50px;
float:right;
}

a.rss, a.fb, a.twitter, a.mail, a.youtube, a.vimeo, a.linkedin, a.picasa, a.deviantart, a.skype, a.digg, a.reddit, a.flickr, a.delicious, a.googleplus {
display:block;
float:left; 
width:30px; 
height:30px;
margin:5px;
cursor:pointer;
}

a.rss:hover, a.twitter:hover, a.fb:hover, a.youtube:hover, a.vimeo:hover, a.linkedin:hover, a.picasa:hover, a.deviantart:hover, a.skype:hover, a.digg:hover, a.reddit:hover, a.flickr:hover, a.delicious:hover, a.googleplus:hover { 
background-position: -30px 0px;
}


/**************************************************
WEBSITE CONTAINER
***************************************************/

div.wrap {
position:relative;
margin:0px auto;
width:100%;
min-height:100%;
}

div.container {
positon:relative;
width:100%;
margin:0px auto;
overflow:auto;
padding-bottom:300px;
}

/**************************************************
Header
***************************************************/

div.headerContainer {
height:160px;
}

div#logo {
padding:0px 0px 0px 0px;
margin:0px;
position:absolute;
margin-top:-20px;
}

div.headerNavigation {
height:130px;
}

/**************************************************
SEARCH
***************************************************/

div#search {
width:220px;
height:30px;
padding:0px 0px 0px 0px;
}

div#search form { 

}

div#search form fieldset { 
border:0px; 
overflow: hidden;  
}

div#search form input {
float:left; 
overflow:hidden;
background:none;  
border:none; 
padding:7px 0px 3px 10px; 
width: 180px;
height:20px;  
}

div#search form button { 
float:left; 
width: 30px; 
height: 33px; 
border: none; 
cursor: pointer; 
text-indent: -1000em; 
}  

/**************************************************
MENU
***************************************************/

div.menuContainer {
height:35px;
}

div.menu {
positon:relative;
float:right;
}

/**************************************************
Midlayer
***************************************************/

div.midlayerContainer {
height:350px;
}

div.midlayer {
margin-left: auto;
margin-right: auto;
width: 960px;
height:350px;
position:relative;
}

/**************************************************
Main Container
***************************************************/

.container_12 {
margin-left: auto;
margin-right: auto;
width: 960px;
line-height:1.5;
}

.containerBackground {
overflow:auto;
}

/**************************************************
Grid >> Global
***************************************************/
.grid_flexible,
.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
display: inline;
float: left;
margin-left: 10px;
margin-right: 10px;
}

.grid_1 {
  width: 60px;
}

.grid_2 {
  width: 140px;
}

.grid_3 {
  width: 220px;
}

.grid_4 {
  width: 300px;
}

.grid_5 {
  width: 380px;
}

.grid_6 {
  width: 460px;
}

.grid_7 {
  width: 540px;
}

.grid_8 {
  width: 620px;
}

.grid_9 {
  width: 700px;
}

.grid_10 {
  width: 780px;
}

.grid_11 {
  width: 860px;
}

.grid_12 {
  width: 940px;
}

/**************************************************
`pull >> 12 Columns
***************************************************/
.pull_1,
.pull_2,
.pull_3,
.pull_4,
.pull_5,
.pull_6,
.pull_7,
.pull_8,
.pull_9,
.pull_10,
.pull_11,
.pull_12 {
display: inline;
float: left;
margin-left:0px;
margin-right: 20px;
}

.pull_1 {
  width: 60px;
}

.pull_2 {
  width: 140px;
}

.pull_3 {
  width: 220px;
}

.pull_4 {
  width: 300px;
}

.pull_5 {
  width: 380px;
}

.pull_6 {
  width: 460px;
}

.pull_7 {
  width: 540px;
}

.pull_8 {
  width: 620px;
}

.pull_9 {
  width: 700px;
}

.pull_10 {
  width: 780px;
}

.pull_11 {
  width: 860px;
}

.pull_12 {
  width: 940px;
}

/**************************************************
Alpha / Omega
***************************************************/

.alpha {
margin-left:0px;
}

.omega {
margin-right:0px;
}

/**************************************************
PAGE & POST Content
***************************************************/

div#crumbs {
float:right;
padding:20px 0px 0px 0px;
}

div.postContent {
margin:20px 0px;
padding:20px;
overflow:auto;
}

div.postContent h2 {

}


div.postInfo {
padding:5px 0px;
}

div.captionText {
margin:10px 0px 10px 0px;
padding:20px 0px 20px 0px;
}

blockquote {
margin:10px 0px 10px 0px;
padding:20px;
}

div.dropcap {
float:left;
padding:5px 10px;
margin:0px 5px 0px 0px;
}

div.quoteLeft {
float:left;
width:220px;
padding:0px 10px 10px 0px;
margin:0px 10px 0px 0px;
}

div.quoteRight {
float:right;
width:220px;
padding:0px 0px 10px 10px;
margin:0px 0px 0px 10px;
}

div.boxLeft {
float:left;
width:220px;
padding:20px;
margin:0px 10px 0px 0px;
}

div.boxRight {
float:right;
width:220px;
padding:20px;
margin:0px 0px 0px 10px;
}

blockquote {
padding:20px;
}

.accepted, .warning, .cancel {
display:block;
padding:5px;
padding-left:35px;
}

#map_canvas {
height:300px;
width:300px;
margin-bottom:20px;
}

/**************************************************
SIDEBAR
***************************************************/
div.sidebar {
padding:10px;
margin-top:10px;
}

div.sidebar h2 {
padding-top: 0px;
}

div.sidebar li {
list-style-type:none;
}

div.sidebar li a  {
display:block;
padding:5px 0px 5px 15px;
}

div.sidebar ul.children li {
margin-left:25px;
}

div.sidebarBox {
clear:both;
}

ul#recentcomments li.recentcomments {
display:block;
padding:5px 0px 5px 0px;
}

ul#recentcomments li.recentcomments a  {
}

#wp-calendar{
width:100%;
}

div.sidebarBox {
padding:20px;
width:240px;
overflow:auto;
margin-bottom:20px;
}

/**************************************************
COMMENTS
***************************************************/

div#comments {
padding:0px 0px 0px 0px;
}

div#comments h2,h3,h4 {
padding:5px 0px;
}

/*** DEFAULT COMMENTS ***/

ol.commentlist li  {
padding:10px 10px;
margin-left:0px;
margin-bottom:10px;
list-style-type:none;    
}

ol.commentlist ul.children li {
padding:10px 0px 0px 20px;
list-style-type:none;
margin-left:50px;
margin-right:20px;    
}

ol.commentlist p {
clear:both;
}

div.reply {
clear:both;
}

a.comment-reply-link {
display:block;
padding:3px;
}

a.comment-reply-link:hover {
background-position:0px 32px;
}

/*** CUSTOM COMMENTS ***/

div.gravatar { /* Avatar image */
padding:0px 10px 0px 0px;
float:left;
}

.commentAuthor {
float:left;
}

.commentDate {
float:left;
}

.commentBody {
clear:both;
padding:0px 0px 10px 0px;
}

div.commentReplyLink {
float:right;
}

/*** << OLDER COMMENTS NEWER COMMENTS >> ***/

div.commentNavigation {
padding:5px 0px 5px 0px;
}

div.commentNavigation a {
float:right;
padding:0px 0px 0px 20px;
}

/**************************************************
FOOTER
***************************************************/

div.footerContainer {
width:100%;
position:relative;
min-height:300px;
margin-top:-300px;
}

div.footerContainer h3 {
margin-bottom:10px;
}

div.footerContainer .container_12 {
}

.footerContainer li {
margin:0px;
}

.footerContainer li a {
display:block;
padding:5px 0px 5px 15px;
}

/**************************************************
CLEARS
***************************************************/

/* http://sonspring.com/journal/clearing-floats */

.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */

.clearfix:before,
.clearfix:after,
.container_12:before,
.container_12:after {
  content: '.';
  display: block;
  overflow: hidden;
  visibility: hidden;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
}

.clearfix:after,
.container_12:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix,
.container_12 {
  zoom: 1;
}

.clearout {
clear: both;
display: block;
overflow: hidden;
visibility: hidden;
width: 0;
height: 20;
}

/**************************************************
PAGINATION
***************************************************/

.container_12 .pagination {
padding:10px 0px;
margin-bottom:20px;
}

.container_12 .pagination a {
padding:3px 7px;
}

/**************************************************
TABS
***************************************************/

div.tabBox {
width:297px;
float:left;
overflow: visible;
margin-top:20px;
}

div.tabBox h3 {
padding:20px 0px;
}

ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; 
width:100%;
}

ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; 
line-height: 31px; 
margin-bottom: -1px; 
overflow: hidden;
position: relative;
}

ul.tabs li a {
display: block;
padding: 0 5px;
outline: none;
background:none;
}

.tabContainer {
border-top: none;
overflow: hidden;
clear: both;
float: left; width: 100%;
width:100%;
min-height:300px;
margin-bottom:10px;
}

.tabContent {
padding: 20px;
}

.tabContent h3 {
padding:0px;
}

/**************************************************
LATEST POSTS W/ THUMBNAILS
***************************************************/

div.latestPostThumbnails {
clear:both;
width:100%;
overflow:visible;
}

div.latestPostThumbnail {
float:left;
width:70px;
margin:10px 0px;
}

div.latestPostThumbnailText {
float:left;
padding:5px 0px 0px 10px;
margin:5px 0px;
width:135px;
}

/**************************************************
FLICKR
***************************************************/

#flickrThumbs {
}

.flickrThumb { 

}

.flickrThumb a { 
float:left;
margin:0px 10px 20px 10px;
width:48px;
height:48px;
}

.flickrThumb img { 
display: block; 
width:48px;
height:48px;
}

/**************************************************
TWEETS
***************************************************/

.tweet ul li {
padding: 0px 0px 10px 0px;
list-style-type:none;
}

.tweet ul li a {
display:inline;
padding:0px;
}

/**************************************************
BUTTONS
***************************************************/

/*** Small ***/

a.imageButtonSmall {
float:left;
display:block;
height:24px;
padding-right:18px;
}

a.imageButtonSmall span {
display:block;
line-height:16px;
padding:3px 0 5px 18px;
} 

a.imageButtonSmall:hover {
background-position: bottom right;
outline:none;
}

a.imageButtonSmall:hover span {
background-position: bottom left;
padding: 3px 0 5px 18px;
}

/*** Medium ***/
a.imageButton {
float:left;
display:block;
height:32px;
padding-right:24px;
}

a.imageButton span {
display:block;
line-height:22px;
padding:5px 0 5px 24px;
} 

a.imageButton:hover {
background-position: bottom right;
outline:none;
}

a.imageButton:hover span {
background-position: bottom left;
padding: 5px 0 5px 24px;
}

/*** Large ***/
a.imageButtonLarge {
float:left;
display:block;
height:48px;
padding-right:36px;
}

a.imageButtonLarge span {
display:block;
line-height:48px;
padding:0px 0px 0px 36px;
} 

a.imageButtonLarge:hover {
background-position: bottom right;
outline:none;
}

a.imageButtonLarge:hover span {
background-position: bottom left;
padding: 0px 0px 0px 36px;
}

/**************************************************
HOVERS
***************************************************/

div.slickHover-image {
background:url(http://www.9bitstudios.com/wp-content/themes/images/slickHover/search.png) center center no-repeat #fff;
z-index: 10;
display:inline-block;	
} 

div.slickHover-video {
background:url(http://www.9bitstudios.com/wp-content/themes/images/slickHover/picture.png) center center no-repeat #fff;
z-index: 10;	
display:inline-block;	
} 

/**************************************************
MOBILE PORTRAIT
***************************************************/

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

.wrap { max-width:320px; }
.container { max-width:320px; padding-bottom:0px; }
.headerContainer { width: 320px; margin:0px auto; }
.socialLinks { width:170px; float:right; }
#search { display:none; }
.menuContainer, .menu, #menu { display: none; }
.midlayerContainer, .midlayer { display: none; }
.container_12 { width: 320px; }
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 { width: 320px; margin:0px auto; clear:both; }
.footerContainer {  }
}

/**************************************************
TABLET
***************************************************/

@media only screen and (min-width: 768px) and (max-width: 959px) {

.wrap { max-width:768px; }
.container { max-width:768px; }
.headerContainer { width: 768px; margin:0px auto; }
.socialLinks { width:170px; float:right; }
#search { display:none; }
.menuContainer, .menu, #menu { display: none; }
.midlayerContainer, .midlayer { display: none; }
.container_12 { width: 768px; }
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 { width: 768px; margin:0px; clear:both; }
.footerContainer {  }
	
}

/**************************************************
MOBILE LANDSCAPE
***************************************************/

@media only screen and (min-width: 480px) and (max-width: 767px) {

.wrap { max-width:420px; }
.container { max-width:420px; }
.headerContainer { width: 420px; margin:0px auto; }
.socialLinks { width:170px; float:right; }
#search { display:none; }
.menuContainer, .menu, #menu { display: none; }
.midlayerContainer, .midlayer { display: none; }
.container_12 { width: 420px; }
.grid_1,.grid_2,.grid_3,.grid_4,.grid_5,.grid_6,.grid_7,.grid_8,.grid_9,.grid_10,.grid_11,.grid_12 { width: 420px; margin:0px; clear:both; }
.footerContainer {  }
	
}