/* 
FILENAME: globals_grid.css
*/

/* File outline

  =GLOBALS
    =GRID OVERRIDE
    =BASE
    =GRID =MODIFIERS
    =GUTTER
    =NAVIGATION
    =MENU
    =LAYOUT
    =HEADINGS
    =FORMS
    =LISTS
    =CONTENT
    =BANNER
    =BOXES
    =MESSAGING
    =SHARED
    =FOOTER
    =BUTTON

  =BLOG
  =BLOG =POST
  =BLOG =COMMENTS
  =BLOG =ARCHIVES

*/


body {
  background: #13131D;
  color: #fff;
  font: normal 14px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif; /* normalize font size across browsers */
}

a:link, a:visited {
  font-weight: bold;
  text-decoration: none;
}

a:link {
  color: #FF00FF;
}

a:visited {
  color: #BF00C1;
}

a, strong, b {
  line-height: 19px;
}

abbr {
  border-bottom: 1px dotted #b4b4b4;
  cursor: help;
}

sup {
  vertical-align: top;
  font-size: 0.75em;
}

.hidden {
  display: none;
}

/* =GRID =MODIFIERS */

.container_16:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.container_16{display:inline-block}
* html .container_16{height:1%}
.container_16{display:block}

.container_12:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.container_12{display:inline-block}
* html .container_12{height:1%}
.container_12{display:block}

.clearfix li:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
.clearfix li{display:inline-block}
* html .clearfix li{height:1%}
.clearfix li{display:block}

.alpha { clear: left}

/* =GUTTER */

#gutter {
  background: #000;
  z-index: 10;
}

#gutter .inner {
	padding-top:4px;
	padding-bottom:4px;
	text-align: right;
}

#search_field {
	width:200px;
	background-color: #B8B8BE;
	padding:none;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border:0
}


#gutter button {
	background: url('/images/buttons/search.png') center left no-repeat;
	color:#000;
	border:0;
	width: 80px;
	height:20px;
	text-indent:-9999px;
}

#gutter em#login {
	display:block;
	position: absolute;
	overflow: hidden;
	padding: 0;
	height: 17px;
}

#gutter em#login a {
	position: absolute;
	height:0;
	width: 100%;
	background: url('/images/buttons/lock.png') left top no-repeat;
	padding-top: 17px;
}

/* =BUTTONS =BASE */

.buttons {
  clear: both;
  font-size: .785em;
  margin-bottom: 30px;
  margin-top: 10px;
  overflow: hidden; /* Float clearing for good browsers */
}

.buttons button {
  background: #e2e2e2;
  border: 1px solid #e2e2e2;
  color: #646464;
  cursor: pointer;
  display: block;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-weight: bold;
  margin-bottom: 0;
  padding: 4px 10px 5px 10px; /* Links */
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.buttons button {
  line-height: 16px; /* Safari 3 */
  overflow: visible;
  padding: 6px 10px 6px 10px; /* IE6 & Firefox 3 */
  width: auto;
}

.buttons button[type] {
  line-height: 20px; /* Safari */
  padding: 5px 10px 5px 7px; /* Firefox */
}

*:first-child+html button[type] {
  padding: 4px 10px 3px 7px; /* IE7 */
}

.buttons button img, .buttons a img {
  border: none;
  margin: 0 3px -3px 0 !important;
  padding: 0;
}

/* =BUTTONS =TWEAKS */

.buttons button#send {
	margin-left: 15px;
}

.buttons button {
	float: left;
  -webkit-border-radius: 14px;
}

.buttons button, x:-moz-any-link, x:default { /* Firefox 3 */
  -moz-border-radius: 14px;
}

/* =BUTTONS =STANDARD */

.buttons button:hover {
  background: #FF00FF;
  border: 1px solid #8C008D;
  color: #fff;
}


/* =LOGO */
#header h1  {
	background: url("/images/martian_interactive_logo.png") top center no-repeat;
	width:326px;
	height:54px;
	margin-top:20px;
}

#header h1 a {
	width:326px;
	height:54px;
	text-indent:-9999px;
	display:block;
}

/* =NAVIGATION */

#header ul {
	margin-top: 32px;
	list-style-type:none;
	overflow: hidden;
	float:right;
}

#header ul li.menu {
	position:relative;
	overflow:hidden;
	float: left;
	padding:0;
	margin-left: 20px;
}

#header ul li.menu a {
	position:absolute;
	height:0;
	width:100%;
	background-position: left top;
	background-repeat: no-repeat;
}

#header ul li#home, #header ul li#about, 
#header ul li#portfolio, #header ul li#blog {
	height:33px;
}

#header ul li#home a, #header ul li#about a, 
#header ul li#portfolio a, #header ul li#blog a {
	padding-top:33px;
}

#header ul li#home, #header ul li#home a {
	width:71px;
}

#header ul li#home a {
	background: url("/images/menu/home.png");
}

#header ul li#home.active a {
	background-position: 0 -66px;	
}

#header ul li#home a:hover {
	background-position: 0 -33px;
}

#header ul li#about, #header ul li#about a {
	width:110px;
}

#header ul li#about a {
	background: url("/images/menu/about.png");	
}

#header ul li#about.active a {
	background-position: 0 -66px;
}

#header ul li#about a:hover {
	background-position: 0 -33px;
}

#header ul li#portfolio, #header ul li#portfolio a {
	width:121px;
}

#header ul li#portfolio a {
	background: url("/images/menu/portfolio.png");	
}

#header ul li#portfolio.active a {
	background-position: 0 -66px;	
}

#header ul li#portfolio a:hover {
	background-position: 0 -33px;	
}

#header ul li#blog, #header ul li#blog a {
	width:65px;
}

#header ul li#blog a {
	background: url("/images/menu/blog.png");	
}

#header ul li#blog.active a {
	background-position: 0 -66px;
}

#header ul li#blog a:hover {
	background-position: 0 -33px;
}

/* =FEATURED BOX */

#featured_box {
	background: url('/images/top-featured-box-low.png') top center no-repeat;
	height:286px;
	width:820px;
	margin-top:6px;
	color:#FFFFFF;
	display:inline;
	float:left;
}

#featured_box #welcome h2 {
	margin:0;
	font-size:1.8em;
}
#featured_box #welcome, #featured_box #featured-projects {
	padding-top: 40px;
	line-height:1.6em;
	font-weight:lighter;
	letter-spacing:0.6px;
	font-size: 1.35em;
}

#featured_box #welcome em {
	font-weight:normal;
	font-style:normal;
	color:#666666;
	
}

#featured_box a#read-more {
	display:block;
	background: #0D0D11 url('/images/read-more-bullet.png') center right no-repeat;
	padding:5px;
	width:125px;
	line-height:22px;
}

/* =SERVICES */

div.services {
	padding-left:10px;
	padding-right:10px;
	padding-top:10px;
	width:252px;
	height:200px;
	float:left;
}

div.services .icons {
	float:left;
	margin-right:20px;
}

div.services h3 {
	position: relative;
	overflow:hidden; 
	padding: 0;
}

div.services h3 span {
	position: absolute;
	height: 0;
	width: 100%;
	background-position: left top;
	background-repeat: no-repeat;
}

div#design h3, div#development h3, div#online-marketing h3{
	height: 20px;
}

div#design h3 span {
	padding-top: 20px;
	background-image: url("/images/services/title-design.png");
}

div#development h3 span {
	padding-top: 20px;
	background-image: url("/images/services/title-development.png");
}

div#online-marketing h3 span {
	padding-top: 40px;
	background-image: url("/images/services/social-media.png");
}

div#design, div#development {
	background: url("/images/vertical-separator.png") top right no-repeat;
}

.hr {
	border: 0;
	margin: 0;
	width: 100%;
}

div.hr {
 float:left;
 margin-bottom: 15px;
clear:both;
  height: 43px;
 width: 797px;
  background: url('/images/glow-separator.png') no-repeat scroll center;
}

div.hr hr, div.blog_separator hr {
  display: none;
}

/* =LAYOUT */

#outer-container {
	position:relative;
	width:1020px;
	margin-left:auto;
	margin-right:auto;
	background: #13131D url("/images/planets-low.png") top center no-repeat;
	min-height: 500px;
}


#banner {
}

#wrapper {
  background: #fff;
}

.home #wrapper {
  padding-top: 20px;
}

.tour #wrapper { /* Blackouts */
  background: #000;
}

#header {
  margin: 0 10px;
  position: relative;
}

#highlight {
  position: absolute;
  right: 0;
  top: 60px;
}

/* =HEADINGS */

h1, h2 {
  letter-spacing: -.05em;
  line-height: 40px;
}

h1 {
  font-size: 32px;
  font-weight: bold;
  margin-top: 20px;
}

h2 {
  font-size: 28px;
  font-weight: normal;
  margin-bottom: 20px;
}

h3 {
  font-size: 18px;
  margin-bottom: 10px;
}


/* =FORMS */

form:after{clear:both;content:'.';display:block;visibility:hidden;height:0}
form {display:inline-block}
form {display: block}

label {
  color: #555;
  display: block;
}

input, textarea {
  background: #f6f6f6;
  border: 1px solid #d4d4d4;
  font: normal 1em 'Helvetica Neue', Helvetica, Arial, sans-serif;
  margin: 5px 0;
  width: 100%;
}

input:focus, textarea:focus {
  background: #fff;
  border: 1px solid #999;
}
label.required {
  font-weight: bold;
}

abbr {
  border-bottom: 1px dotted #b4b4b4;
  cursor: help;
}

form abbr {
  color:#99CCCC;
  font-size:1.2em;
  font-style:normal;
  vertical-align:baseline;
  line-height: 14px;
  border:0pt none;
  cursor:help;
}


/* for the jQuery form validation error messaging */
#outer-container label.error {
  color: #d12f19;
  font-size: 0.95em;
  font-weight: bold;
  display: list-item;
}

#outer-container input.error, input.error:focus, .fieldWithErrors input, .fieldWithErrors textarea {
  border-color: #fbc2c4;
}

/* =BLOG PREVIEW */

h3.ftb {
  position: relative;
  overflow:hidden;
  padding: 0;
  margin-bottom:0;
}

h3.ftb span {
  position: absolute;
  height: 0;
  width: 100%;
  background-position: left top;
  background-repeat: no-repeat;
}

h3#ftb {
  height: 43px;
}

h3#ftb span {
  padding-top: 43px;
  background-image: url('/images/titles/from-the-blog.png');
}

.blog_post {
  background-image: url('/images/blog-background.png');
  background-position: top left;
  background-repeat: repeat-y;
  margin-bottom:10px;
}

.blog_post p {
	font-size: 0.9em;
}

.blog_post h4 {
	margin-bottom:10px;
}

div.blog_separator {
  height: 2px;
  width: 450px;
  margin-bottom: 10px;
  margin-top: 10px;
  background: url('/images/blog-entry-separator.png') no-repeat scroll center;
}


/* =CONTACT FORM */

legend {
	display:none;
}

#contact_box fieldset {
	background-image: url('/images/titles/contact-us.png');
	background-position: 0 0;
	background-repeat:no-repeat;
	margin-top:10px;
	padding:60px 25px 25px 25px;
	background-color:#000;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

form#contact_form {
	margin-top:10px;
}
form#contact_form label {
	font-weight:bolder;
	font-size:1.2em;
}

form#contact_form ul li#name_item, form#contact_form ul li#phone_item {
	width:140px;
	float:left;
}

form#contact_form ul li#name_item {
	padding-right:9px;
}

form#contact_form ul li#email_item, form#contact_form ul li#message_item {
	float: left;
	width: 100%;
}

form#contact_form span#spinner {
	position: absolute;
	right: 250px;
	top: 980px;
}

#contact_box div#thanks {
	margin-top: 20px;
}

div#visit_blog { 
  top: -35px;
  left: 320px;
  position: relative;
  overflow:hidden;
  padding: 0;
  height: 29px;
}

div#visit_blog a {
  position: absolute;
  height: 0;
  width: 100%;
  background-position: left top;
  background-repeat: no-repeat;
  padding-top: 29px;
  background-image: url('/images/titles/visit-blog.png');
}

/* =PORTFOLIO */

ul#portfolio li.entry {
	background: url('/images/pixel-background.png') left top repeat;
	color: #fff;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
	margin-bottom: 20px;
	padding: 25px;
	clear:both;
}

ul#portfolio li.entry img {
	float:left;
	margin-right:20px;
}

ul#portfolio h3 {
  color: #E000C7;
  font-weight: 100;
  font-style: italic;
  font-size: 20px;
  margin-bottom: 14px;
}

ul#portfolio h2 {
	margin:0;
}

ul.thumbs {
	float:right;
	margin: 25px 0 10px 0;
}

ul.thumbs li {
	float: left;
	margin-left:10px;
}

ul#portfolio div.portfolio_image { position: relative;}
ul#portfolio div.portfolio_image span { 
  display:block;
  height:32px;
  position:absolute;
  width:32px;
  background: url('/images/portfolio/plus.png') no-repeat; 
}

/*#featured_background {
  margin-top:6px;
}

#featured_background #latest_project {
  margin-top: 28px;
  margin-left: 25px;
}

#featured_background #lp_description {
  margin-left: 20px;
}

#featured_background #lp_description h3, 
ul#portfolio h2 {
  margin: 0;
}


#featured_background #lp_description p {
  color: #FFFFFF;
  font-weight: 200;
}

#featured_background #lp_description #view_project {
  background:transparent url("/images/portfolio/view_project_bg.png") no-repeat scroll 0 0;
  float:right;
  height:40px;
  margin-top:20px;
  width:70%;
  position: relative;
}

#featured_background #lp_description #view_project a, ul#portfolio li a {
  background: url("/images/portfolio/view_project.png") left top no-repeat;
  height: 21px;
  position: absolute;
  width: 120px;
}

#featured_background #lp_description #view_project a {
  margin-left: 40px;
  margin-top: 10px;	
}

ul#portfolio li {
	padding: 15px;
}

ul#portfolio li a {
  left: 480px;
  position: absolute;
}*/

/*ul#portfolio li {
  background: url('/images/portfolio/project_bg.png') top center;
  height: 286px;
  margin-top: 6px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
}*/

h2#latest_project {
	position:absolute;
	top:144px;
	left:99px;
	overflow:hidden;
	padding:0;
	height:74px;
	width:72px;
}

h2#latest_project span{
	position:absolute;
	height: 0;
	width: 100%;
	padding-top:74px;
	background: url('/images/portfolio/latest-projects.png') top left no-repeat;
}

/* =FOOTER */

#copyright {
	margin-top:10px;
	text-align: center;
	font-size:0.8em;
}

/* =LISTS */
.odd {
  background-color: #efefef;
}

/* =BLOG */

#content {
	margin-top: 6px;
}

#first_post {
	background: url('/images/pixel-background.png') left top repeat;
	color: #fff;
 	-moz-border-radius: 10px;
 	-webkit-border-radius: 10px;
}

#main_column.blog #entry {
 padding: 15px;
 background: url('/images/pixel-background.png') left top repeat;
 color: #fff;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
}

#main_column.blog #entry a:link,
#main_column.blog #entry a:visited {
 text-decoration: underline;
}

#entry p {
	margin-bottom:16px;
}

#side_bar {
	background: url('/images/blog/side-background.png') center top no-repeat;	
	padding: 15px;
}

ul#posts li {
	padding: 15px;
}

ul#subscriptions {
 margin-left: 15px;
}

ul#subscriptions li {
	float:left;
	padding-left: 35px;
	height: 30px;
	font-size: 1.2em;
	line-height:1.6em;
}

ul#subscriptions li a {
	color: #fff;
}

ul#subscriptions li#rss {
	background: url('/images/buttons/rss.png') left center no-repeat;
	margin-right: 20px;
}

ul#subscriptions li#twitter {
	background: url('/images/buttons/twitter.png') left center no-repeat;
}

.post_date {
	text-align:center;
	float:left;
	width:35px;
	height:35px;
	padding: 5px;
	background:#fff;
	color: #67676A;
	/* for IE */
    filter:alpha(opacity=50);
  /* CSS3 standard */
    opacity:0.5;
	margin: 0 10px 10px 0;
	font-size:1em;
}

.post_date .day {
	font-size:1.6em;
	font-weight: bold;
}

ul#posts h4 {
	font-size: 1.6em;
	line-height: 26px;
}

#main_column.blog p.previous_next {
 text-align: center;
 margin: 10px 0 10px 0;
}

#main_column.blog h3 {
 margin: 20px 0 0 0;
 color: #545457;
}

#main_column.blog h2 {
 margin-bottom: 35px;
}

#main_column.blog p.author {
  color:white;
  font-style:italic;
  margin-top:10px;
}

/* =ABOUT US */

.about ul.services li{
	list-style-position:inside;
	list-style-type:none;
	margin-bottom:50px;	
}

ul.services li h3 {
	position: relative;
	overflow:hidden; 
	padding: 0;
}

ul.services li h3 span {
	position: absolute;
	height: 0;
	width: 100%;
	background-position: left top;
	background-repeat: no-repeat;
}

ul.services li {
	padding-left: 120px;
}

li#design {
	background: url('/images/services/icon-design.png') left center no-repeat;
}

li#development {
	background: url('/images/services/icon-development.png') left center no-repeat;
}

li#online-marketing {
	background: url('/images/services/icon-marketing.png') left center no-repeat;
}

li#design h3, li#development h3, li#online-marketing h3 {
	height: 20px;
}

li#design h3 span {
	padding-top: 20px;
	background-image: url("/images/services/title-design.png");
}

li#development h3 span {
	padding-top: 20px;
	background-image: url("/images/services/title-development.png");
}

li#online-marketing h3 span {
	padding-top: 20px;
	background-image: url("/images/about/online-marketing.png");
}

.about h2 {
	font-size: 2.5em;
	letter-spacing: 1px;
	font-weight: 100;
	color: #fff;
}

.about #description {
	padding: 15px;
	color: #fff;
	height: 480px;
}

.about ul {
	margin-bottom: 15px;
}

.about ul li {
	list-style-type: disc;
	list-style-position: inside;
}

.about ul#the_team li {
   text-align: center;
   list-style-type: none;
   list-style-position: outside;
   margin-bottom: 20px;

}

img#view_portfolio {
	float:right;
	clear:both;
}

#main_column.about {
	background: url('/images/about/top-background.png') right top no-repeat;
}
.about ul#the_team li img {
	background-color: #000;
	padding: 5px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}

#side_bar.about {
	background: url('/images/about/side-background.png') center top no-repeat;	
	padding: 15px;	
}

#side_bar.about h2 {
	padding-left: 15px;
}

/* =SEARCH RESULTS */

#results {
	background-color: #13131D;
	padding: 15px;
}

#results ol {
	margin-top: 15px;
}