/** * * * * * * * * * * * * * * * * * * * *
 * Author:   Roger Glenn
 * Email:    roger@mach1media.com
 * Project:  Jed Rogers Design
 * Version:  1.0
 * Created:  2012-02-21
 *
 * * * * * * * * * * * * * * * * * * * * * *
 *
 * HTML5 ✰ Boilerplate
 *
 * style.css contains a reset, font normalization and some base styles.
 *
 * Credit is left where credit is due.
 * Much inspiration was taken from these projects:
 * - yui.yahooapis.com/2.8.1/build/base/base.css
 * - camendesign.com/design/
 * - praegnanz.de/weblog/htmlcssjs-kickstart
 *
 * * * * * * * * * * * * * * * * * * * * * * * * 
 *
 * html5doctor.com Reset Stylesheet (Eric Meyer's Reset Reloaded + HTML5 baseline)
 * v1.6.1 2010-09-17 | Authors: Eric Meyer & Richard Clark
 * html5doctor.com/html-5-reset-stylesheet/
 */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
#bottom, #top, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
#bottom, #top, hgroup, menu, nav, section {
  display: block;
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ""; content: none; }
ins { background-color: #ff9; color: #000; text-decoration: none; }
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }
del { text-decoration: line-through; }
abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
input, select { vertical-align: middle; }

/**
 * Font normalization inspired by YUI Library's fonts.css: developer.yahoo.com/yui/
 */
/*body { font:13px/1.231 sans-serif; *font-size:small; }  Hack retained to preserve specificity */
select, input, textarea, button { font:99% sans-serif; }

/* Normalize monospace sizing:
   en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
pre, code, kbd, samp { font-family: monospace, sans-serif; }

em {font-style: italic;}

/**
 * Minimal base styles.
 */
/* Always force a scrollbar in non-IE */
html { overflow-y: scroll; }

/* Accessible focus treatment: people.opera.com/patrickl/experiments/keyboard/test */
a:hover, a:active { outline: none; }
ul, ol { margin-left: 2em; }
ol { list-style-type: decimal; }

/* Remove margins for navigation lists */
nav ul, nav li { margin: 0; list-style:none; list-style-image: none; }
small { font-size: 85%; }
strong, th { font-weight: bold; }
td { vertical-align: top; }

/* Set sub, sup without affecting line-height: gist.github.com/413930 */
sub, sup { font-size: 75%; line-height: 0; position: relative; }
sup { top: -0.5em; }
sub { bottom: -0.25em; }
pre {
  /* www.pathf.com/blogs/2008/05/formatting-quoted-code-in-blog-posts-css21-white-space-pre-wrap/ */
  white-space: pre; white-space: pre-wrap; word-wrap: break-word;
  padding: 15px;
}
textarea { overflow: auto; } /* www.sitepoint.com/blogs/2010/08/20/ie-remove-textarea-scrollbars/ */
.ie6 legend, .ie7 legend { margin-left: -7px; } 

/* Align checkboxes, radios, text inputs with their label by: Thierry Koblentz tjkdesign.com/ez-css/css/base.css  */
input[type="radio"] { vertical-align: text-bottom; }
input[type="checkbox"] { vertical-align: bottom; }
.ie7 input[type="checkbox"] { vertical-align: baseline; }
.ie6 input { vertical-align: text-bottom; }

/* Hand cursor on clickable input elements */
label, input[type="button"], input[type="submit"], input[type="image"], button { cursor: pointer; }

/* Webkit browsers add a 2px margin outside the chrome of form elements */
button, input, select, textarea { margin: 0; }

/* Colors for form validity */
input:valid, textarea:valid   {  }
input:invalid, textarea:invalid {
   border-radius: 1px; -moz-box-shadow: 0px 0px 5px red; -webkit-box-shadow: 0px 0px 5px red; box-shadow: 0px 0px 5px red;
}
.no-boxshadow input:invalid, .no-boxshadow textarea:invalid { background-color: #f0dddd; }


/* These selection declarations have to be separate
   No text-shadow: twitter.com/miketaylr/status/12228805301
   Also: hot pink!
::-moz-selection{ background: #FF5E99; color:#fff; text-shadow: none; }
::selection { background:#FF5E99; color:#fff; text-shadow: none; }
*/

/* j.mp/webkit-tap-highlight-color */
a:link { -webkit-tap-highlight-color: #FF5E99; }

/* Make buttons play nice in IE:
   www.viget.com/inspire/styling-the-button-element-in-internet-explorer/ */
button {  width: auto; overflow: visible; }

/* Bicubic resizing for non-native sized IMG:
   code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/ */
.ie7 img { -ms-interpolation-mode: bicubic; }


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * Primary styles
 *
 * Author:   Roger Glenn - roger@mach1media.com
 * Project:  JedRogers.com
 * Released: 2012-02-21
 */

/*
==========================================
TYPOGRAPHY
==========================================
*/
body {
	font-family: Helvetica, Arial, sans-serif;
	font-size: 12px;
	text-align: center;
	font-weight: normal;
}
a:link, a:visited { 
	color:#000;
	text-decoration: none;
	outline: none;
}
a:hover, a:active { 
	color:#ccc;
	text-decoration: none;
	outline: none;
}
h1 {
	font-size: 28px;
	line-height: 1em;
	font-weight: bold;
	margin-bottom: 1em;
}
h2 {
	font-size: 24px;
	line-height: 1em;
	font-weight: bold;
	margin-bottom: 1em;
}
h3 {
	font-size: 18px;
	line-height: 1em;
	font-weight: bold;
	margin-bottom: 1em;
}
p, blockquote {
	line-height: 1.5em;
	margin-bottom: 1.5em;
	font-weight: normal;
}
blockquote {
	font-family: Georgia, "Times New Roman", serif;
	line-height: 1.2em;
	margin: 1.5em 0;
	padding:20px;
	font-size: 16px;
}
blockquote p {
	margin-bottom: 0;
	line-height: 1.2em;
}
blockquote cite {
	display: block;
	text-indent:2em;
	line-height: 1.2em;
}
strong { font-weight: bold; }

#content ul, 
#content ol { 
	margin:0 0 1.75em 0;
	line-height: 1.5em;
}
#content ul { list-style-type: disc; }
#content ol { list-style-type: decimal; }
#content dl dt {
	position: relative; display: block; font-weight: bold;
}
#content dl dd {
	position: relative; display: block; font-weight: normal; padding-left: 2em;
}

/*
==========================================
GRID
==========================================
*/
.grid-width {
	width: 944px;
	margin: 0 auto;
}
.column {
	float:left;
	display:inline;
	margin-right:20px;
}
.column.last,
.no-margin {
	margin-right: 0px;
}
.row {
	width: 100%;
	float:left;
	overflow:visible;
	clear:both;
	/* margin-bottom: 20px; */
}
.size-1 { width: 450px; }
.size-2 { width: 622px; }
.size-3 { width: 943px; }

.clear { clear: both; }
br.clear { height: 1px; }

/*
==========================================
LAYOUT
==========================================
*/
.float_right { float:right; }
.float_left  { float:left; }
.hidden      { display: none; }

#container, #top, #masthead, #middle, #content, 
#main, #supporting, #bottom, #footer { 
	position: relative; 
}
#top, #middle, #bottom .inner { 
	clear:both; 
	text-align: left;
}
body {
	color:#666;
	background: #fff;
}
#container {
	margin: 0 auto;
	text-align: left;
}

/* 
-------------
TOP 
------------- 
*/
#top, #masthead {
	position: fixed;
	top: 0; right: 0; left: 0;
	z-index: 1030;
	height:100px;
	/* http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/ */
	/* Fallback for web browsers that doesn't support RGBa */
	background: rgb(255, 255, 255);
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.6);
}
#branding {
	position: absolute; display: block;
	width:296px; height:70px;
	top:17px; left:0;
}
#branding a {
	position: relative; display: block;
	width:296px; height:70px;
	background: url(/images/logo-rdh.svg) 0 0 no-repeat;
}
#branding a span {
	position: absolute; left: -999999px;
}

/* 
-------------
MIDDLE 
------------- 
*/
#middle {
	margin-top: 100px;
}
#middle #connect {
	position:relative; display: block;
	width: 463px; height:20px;
	padding:5px 0;
	background: url(/images/connect_share.png) 0 5px no-repeat;
	float: left;
}
#middle #connect .connect {
	position: relative; display: block;
	float: left;
	width: 300px; height:20px;
}
#middle #connect .connect span {
	position: absolute; left: -999999px;
}
#middle #connect .share {
	position: relative; display: block;
	float: left;
	width: 163px; height:20px;
}
#middle #connect .share span,
#middle #connect .st_sharethis_large {
	position: absolute; left: -999999px;
}
#share_target {
	position: relative;
	display: block;
	float: left;
	width:400px;
	height:40px;
	padding-top: 0;
	overflow: hidden;
}
#share_target .share_buttons {
	position: absolute;
	display: block;
	width:400px;
	height:60px;
	top:0;
	left:-400px;
}

/* 
-------------
BOTTOM 
------------- 
*/
#bottom {
	padding:20px 0;
	font-size: 11px;
	line-height: 1.2em
}
#bottom #footer-tag {
	position: absolute; left:-999999px;
}



/*
==========================================
NAVIGATION
==========================================
*/
#skip {
	position: absolute; top:0; left:-999999px;
}

#nav-top { 
	display:block; position: absolute; 
	height:52px; /*width:300px;*/
	bottom:0; right:0;
	/* background: url(/images/bg_navbar.png) 0 16px no-repeat; */
}
#nav-top h3 {
	position: absolute;
	top:-999999px;
}
#nav-top > ul { 
	display: block; position: relative;
	height:52px; /*width:300px;*/
	list-style-type: none; 
	margin:0; padding:0; 
}
#nav-top > ul li { 
	position: relative; display: inline; float: left;
	padding:15px 0 20px 20px;
	height:20px;
}
#nav-top > ul li a { 
	position: relative; display: block; float: left;
	/* height:52px; width:100px; */
	margin: 0;
	padding-right: 20px;
	border-right: 2px solid #FFE628;
	text-transform: uppercase;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 22px;
	line-height: 20px;
	font-style: italic;
}
#nav-top > ul li.last a { 
	padding-right: 0;
	margin-right: 0;
	border-right: none;
}
/*
#nav-top > ul li a span {
	position: absolute; left:-99999px;
}
*/

/* nav-dropdown */
.nav-dropdown {
	position: absolute; display:none; z-index: 1031;
	width:auto; height:auto; padding:10px;
	/*background: #fff;*/
	background: rgb(255, 255, 255);
	/* RGBa with 0.6 opacity */
	background: rgba(255, 255, 255, 0.85);
}
.nav-dropdown > ul,
.nav-dropdown > ul > ul {
	list-style-type: none;
	margin:0; padding: 0;
}
.nav-dropdown li {
	display: block;
	margin:0; padding: 0;
}
.nav-dropdown a {
	position: relative; display: block;
	font-size: 11px; padding: 2px 10px;
	text-transform: uppercase;
}
.nav-dropdown a:link,
.nav-dropdown a:visited {
	color: #333;
	text-decoration: none;
}
.nav-dropdown a:hover,
.nav-dropdown a:active {
	color: #999;
	text-decoration: none;
}


.nav-dropdown .has-dropdown > ul {
	display: none;
	padding-left: 1em;
	margin:0;
}

#masthead div.project_categories {
	top:52px; left:0; 
}
#masthead div.clients {
	top:52px; left:105px; 
	min-width: 250px;
}

/* 
========================================== 
NOTICE AREA
==========================================
*/
#notice {
	position:relative;
	display: block;
	margin:0 20px 20px 20px;
	padding:10px 10px 10px 30px;
	line-height:1.125em;
	text-align:left;
  -moz-border-radius:5px; 
	-webkit-border-radius:5px;
}
#notice a {
	color:#992227;
	text-decoration:underline;
}
#notice a:hover {
	text-decoration:none;
}
#notice.info {
	background-color:#FFEABD;
	background-image:url(/icon/error.png);
	background-position: 10px 7px;
	background-repeat:no-repeat; 
	border:1px solid #FF9900;
	color: #FF6600;
}
#notice.success {
	background-color:#e1ede9;
	background-image:url(/icon/tick.png);
	background-position: 10px 7px;
	background-repeat:no-repeat; 
	border:1px solid green;
	color: green;
}
#notice.error {
	background-color:#f9d3d5;
	background-image:url(/icon/exclamation.png);
	background-position: 10px 7px;
	background-repeat:no-repeat; 
	border:1px solid red;
	color: red;
}
#noscript {
	margin:10px;
	padding:10px;
	text-align:left;
	background-color:#ffcfce;
	border:3px solid #c00;
}


#content h1,
#content h2,
#content h3,
#content h4 {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 400;
	text-transform: uppercase;
	color:black;
}
#content ul {
	list-style-type: none;
}

/* 
------------------------
ORDERED/UNORDERED LISTS
------------------------
*/

/* checkmarks */
ul.checkmarks {
	list-style-type:none;
	margin-bottom:1.5em;
}

ul.checkmarks li {
	background: url(/assets/icon/tick.png) 0 1px no-repeat;
	padding-left:24px;
}

/* default ul */
ul.default {
	list-style-type:disc;
	list-style-position:outside;
	margin-bottom:1.5em;
}
ul.default li {
	margin-left:2em;
}

/* default ol */
ol.default {
	list-style-type:decimal;
	list-style-position:outside;
	margin-bottom:1.5em;
}

/* 
------------
 LIST ICONS 
------------
*/
li.key         { background: url(/assets/icon/key.png)         0 6px no-repeat; padding-left:20px; }
li.keyboard    { background: url(/assets/icon/keyboard.png)    0 6px no-repeat; padding-left:20px; }
li.link        { background: url(/assets/icon/link.png)        0 6px no-repeat; padding-left:20px; }
li.plugin      { background: url(/assets/icon/plugin.png)      0 6px no-repeat; padding-left:20px; }
li.report-edit { background: url(/assets/icon/report_edit.png) 0 6px no-repeat; padding-left:20px; }
li.report      { background: url(/assets/icon/report.png)      0 6px no-repeat; padding-left:20px; }
li.user        { background: url(/assets/icon/user_suit.png)   0 6px no-repeat; padding-left:20px; }
li.phone       { background: url(/assets/icon/phone.png)       0 6px no-repeat; padding-left:20px; }
li.map         { background: url(/assets/icon/map.png)         0 6px no-repeat; padding-left:20px; }
li.printer     { background: url(/assets/icon/printer.png)     0 6px no-repeat; padding-left:20px; }
li.email       { background: url(/assets/icon/email.png)       0 6px no-repeat; padding-left:20px; }
li.tick        { background: url(/assets/icon/tick.png)        0 6px no-repeat; padding-left:20px; }
li.magnifier   { background: url(/assets/icon/magnifier.png)   0 6px no-repeat; padding-left:20px; }
li.flag-red    { background: url(/assets/icon/flag_red.png)    0 6px no-repeat; padding-left:20px; }
li.help        { background: url(/assets/icon/help.png)        0 6px no-repeat; padding-left:20px; }
li.arrow_undo  { background: url(/assets/icon/arrow_undo.png)  0 6px no-repeat; padding-left:20px; }
li.email_go    { background: url(/assets/icon/email_go.png)    0 6px no-repeat; padding-left:20px; }
li.page_excel  { background: url(/assets/icon/page_white_excel.png) 0 6px no-repeat; padding-left:20px; }

/* 
------------
 LINK ICONS 
------------
*/
a.key         { background: url(/assets/icon/key.png)         0 2px no-repeat; padding-left:20px; }
a.keyboard    { background: url(/assets/icon/keyboard.png)    0 2px no-repeat; padding-left:20px; }
a.link        { background: url(/assets/icon/link.png)        0 2px no-repeat; padding-left:20px; }
a.plugin      { background: url(/assets/icon/plugin.png)      0 2px no-repeat; padding-left:20px; }
a.report-edit { background: url(/assets/icon/report_edit.png) 0 2px no-repeat; padding-left:20px; }
a.report      { background: url(/assets/icon/report.png)      0 2px no-repeat; padding-left:20px; }
a.user        { background: url(/assets/icon/user_suit.png)   0 2px no-repeat; padding-left:20px; }
a.phone       { background: url(/assets/icon/phone.png)       0 2px no-repeat; padding-left:20px; }
a.map         { background: url(/assets/icon/map.png)         0 2px no-repeat; padding-left:20px; }
a.printer     { background: url(/assets/icon/printer.png)     0 2px no-repeat; padding-left:20px; }
a.email       { background: url(/assets/icon/email.png)       0 2px no-repeat; padding-left:20px; }
a.tick        { background: url(/assets/icon/tick.png)        0 2px no-repeat; padding-left:20px; }
a.magnifier   { background: url(/assets/icon/magnifier.png)   0 2px no-repeat; padding-left:20px; }
a.help        { background: url(/assets/icon/help.png)        0 2px no-repeat; padding-left:20px; }



/*
==========================================
FORMS
==========================================
*/
#contact_form_mobile {
	display: none;
}
fieldset {
  border:0;
  margin:0;
  padding:0;
}
fieldset h2 {
	background: #efefef; line-height: 30px; text-indent: 10px;
}
legend {
  color:#2F0033;
  padding:2px;
  margin:0;
}
label {
  display:block;
  margin-bottom: 5px;
  color:#444;
  font-size: 11px;
}
label.required {
	color:#666;
}
label.required,
form p.required,
label.error {
  font-weight: bold;
}
label.error {
  color:red;
}
.form_row {
	padding:5px 0;
	margin-bottom:10px;
	clear:both;
	float:left;
}
.form_row.column {
	clear: none;
	margin-right:20px;
}
.form_row.size-1 {
	width:260px;
}

/* form elements */
select,
input.tiny,
input.sm,
input.med,
input.lg,
input.xl,
input.xxl,
input.date,
input.search,
textarea.sm,
textarea.med,
textarea.lg,
textarea.xl,
input.browse,
input.text-field,
textarea.text-area {
  /* margin: -.5em 0 1.5em 0; */
  margin:0;
  padding: .5em;
	font-size: 11px;
	line-height: 1.2em;
	font-family: Arial, sans-serif;
  color:#444;
  background:#efefef;
	border:1px solid #ccc;
/*
  -moz-border-radius:5px; 
	-webkit-border-radius:5px;
	box-shadow: 1px 1px 2px #ddd;
	-moz-box-shadow: 1px 1px 2px #ddd;
	-webkit-box-shadow: 1px 1px 2px #ddd;
*/
}
option {
	font-size: 1em;
}
.form_row.error input,
.form_row.error select,
.form_row.error textarea {
	border:1px solid red;
	box-shadow: 1px 1px 8px #f5bcbd;
	-moz-box-shadow: 1px 1px 8px #f5bcbd;
	-webkit-box-shadow: 1px 1px 8px #f5bcbd;
}
.form_row .caption {
	font-size: 11px;
	font-weight: normal;
	color:#aaa;
}
.date-field { position: relative; float:left;}
.date-field img.ui-datepicker-trigger {
	position:absolute;
	top:3px;
	left:100px;
}

/*
select { padding: 0; }
*/
input.text-field 	{ width:350px; }
input.tiny   			{ width:30px; }
input.sm     			{ width:50px; }
input.med    			{ width:174px; }
input.lg     			{ width:250px; }
input.xl     			{ width:380px; }
input.xxl    			{ width:500px; }
input.date   			{ width:85px; }
input.search 			{ width:200px; padding:0 2px; }
textarea.sm  			{ width:400px; height:75px;  overflow:auto; }
textarea.med 			{ width:400px; height:100px;  overflow:auto; }
textarea.lg  			{ width:380px; height:150px; overflow:auto; }
textarea.xl  			{ width:400px; height:250px; overflow:auto; }
textarea.text-area { width:400px; height:100px; overflow:auto; }
select.med   			{ width:180px; }
select.lg    			{ width:250px; }
select.tall  			{ height:100px; }

.field-focus {
	border:1px solid #f7853e !important;
	box-shadow: 1px 1px 8px #ffc393;
	-moz-box-shadow: 1px 1px 8px #ffc393;
	-webkit-box-shadow: 1px 1px 8px #ffc393;
}

input.btn_primary {
  font-weight: bold;
}
input.btn_secondary {
  font-weight: normal;
}
input.browse {
  font-size: 1em;
}
select.fixed-width {
  font-family:courier;
}
input.checkbox {
  vertical-align:middle;
}
input.radio,
input.radio-button {
  vertical-align:-3px;
}
select,
select.drop-down,
select.switchbox {
  font-size:1em;
  vertical-align:middle;
}
select.batch_actions {
  margin:0;
  height:30px;
}

#contact_signup {
	float:left; width:300px;
}
/*

#home.contact .form_row {
	margin-bottom: 5px;
}
#home.contact form label {
	font-size: 13px; color:rgb(41, 171, 226); font-weight: bold; padding-left:10px;
}
*/


/* buttons
-------------------------------------*/
.action-bar {
	position: relative;
	display: block;
	width: auto;
	min-height: 30px; line-height: 30px;
	/*margin-left:210px;*/
	padding:5px 0;
}
#supporting .action-bar {
	margin-left:0;
}
#login .action-bar {
	margin-left:0;
}
/*
button,
a.button {
	display: block;
	position: relative;
	height: 30px;
	line-height: 30px;
	overflow:hidden;
	outline: none;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#666;
	padding: 0 10px 0 7px;
	text-align: left;
	text-decoration: none;
	-moz-border-radius:5px; 
	-webkit-border-radius:5px;
	box-shadow: 1px 1px 2px #ddd;
	-moz-box-shadow: 1px 1px 2px #ddd;
	-webkit-box-shadow: 1px 1px 2px #ddd;
	border:1px solid #bbb;
	background: #efefef;
}
*/

button,
a.button {
	display: block;
	position: relative;
	width: 69px;
	height: 18px;
	line-height: 18px;
	overflow:hidden;
	outline: none;
	font-family: Arial, sans-serif;
	font-size: 14px;
	font-weight: bold;
	color:#666;
	padding: 0;
	text-align: left;
	text-decoration: none;
	border:none;
	background: url(/images/button-send.gif) 0 0 no-repeat;
}

/*
button:hover,
a.button:hover,
#supporting-top-buttons a.button.big.new:hover {
	cursor: pointer;
	color:green;
	border:1px solid #4ead47;
	box-shadow: 1px 1px 8px #a2d59b;
	-moz-box-shadow: 1px 1px 8px #a2d59b;
	-webkit-box-shadow: 1px 1px 8px #a2d59b;
}
*/
.processing {
	display: block;
	position: relative;
	height: 30px;
	line-height: 30px;
	padding: 0;
	overflow:hidden;
	background: url(/images/siteadmin/processing.gif) center center no-repeat;
	clear:both;
}
.processing span {
	position: absolute;
	top:0;
	left:-99999px;
}
button span {
	position: absolute; left:-999999px;
/*
	padding-left:20px;
	background: url(/icon/accept.png) 0 0 no-repeat;
*/
}
button span.search {
	background: url(/icon/magnifier.png) 0 0 no-repeat;
}

#btn-submit button,
.action-cancel {
	position: relative; display: inline;
	float: left;
}
.action-cancel {
	padding:0 10px;
}


/* 
---------------
DATA TABLES 
---------------
*/

/* list */
table.list th {
	text-align: left;
}
table.list td.single {
	text-align: center;
}

/* striped */
table.striped thead tr,
table.striped thead tr td { 
	background-color: #000; color: #FFF; 
}
table.striped tr.even,
table.striped tr.even td { 
	background-color: #DDE0E3; 
}
table.striped tr.odd,
table.striped tr.odd td { 
	background-color: #FFEF9F; 
}
table.striped tr.highlight,
table.striped tr.highlight td,
table.striped tr.highlight.selected,
table.striped tr.highlight.selected td { 
	background-color: #FFFADE; 
}
table.striped tr.selected,
table.striped tr.selected td,
table.striped td.selected { 
	background-color: #E7FCE7;
}

/*models*/
table.striped.models {
	line-height:23px;
	font-weight: normal;
}
table.striped.models thead,
table.striped.models tbody {
	width:100%;
}
table.striped.models th,
table.striped.models td {
	padding:0 5px;
	font-weight: normal;
}
table.striped.models tbody th {
	font-weight: bold;
}
table.striped.models thead tr,
table.striped.models thead tr td { 
	background-color: #999; color: #FFF; 
	font-weight: normal;
	text-align: left;
}
table.striped.models tr.even,
table.striped.models tr.even td { 
	background-color: #FCFCFC;
}
table.striped.models tr.odd,
table.striped.models tr.odd td { 
	background-color: #F7F7F7; 
}

/*attributes*/
table.striped.attributes {
	line-height:23px;
}
table.striped.attributes thead,
table.striped.attributes tbody {
	width:100%;
}
table.striped.attributes th,
table.striped.attributes td {
	padding:0 5px;
	font-weight: normal;
}
table.striped.attributes th {
	font-weight: bold;
	text-align: left;
}
table.striped.attributes thead tr,
table.striped.attributes thead tr td { 
	background-color: #666; color: #efefef; 
	font-weight: normal;
	text-align: left;
}
table.striped.attributes tr.even,
table.striped.attributes tr.even td { 
	background-color: #FFFEDF;
}
table.striped.attributes tr.odd,
table.striped.attributes tr.odd td { 
	background-color: #FFFD83; 
}
table.striped.attributes td .val,
table.striped.attributes td .unit {
	position: relative;
	display: block;
	width:90px;
	float:left;
}
table.striped.attributes td .val {
	padding-right:5px;
	text-align: right;
}



/* 
================================
HOMEPAGE 
================================
*/
#slideshow-mobile {
	display: none;
}
#slideshow {
	position: relative; display: block; width: 944px; height: 550px; top: 0; margin: 0 auto; padding: 0; z-index: 8;
}
#slideshow #slider {position: relative; width: 944px; height: 550px; overflow: hidden; }
#slideshow #slides {position: absolute; top:0; left:0; display: block; width:99999px; height: 550px; }
#slideshow .slide {position: absolute; top:0; left:0; width: 944px; height: 550px; }
#slideshow .slide a {position: absolute; top:0; left:0; width: 944px; height: 550px; }
#slideshow .slide h3 {display:none; position: absolute; top: 0; left: 10px; font-size: 34px; color: #fff; font-weight: bold; line-height: 36px; margin: 0; padding: 0;}
#slideshow .slide h4 {display:none; position: absolute; top: 70px; left: 30px; font-size: 18px; color: #fff; font-weight: normal; line-height: 20px; margin: 0; padding: 0;}

#slideshow_tabs {
	display:block;
	position: absolute;
	bottom:-40px;
	right:0;
	z-index: 10;
}
#slideshow_tabs a,
#slideshow_tabs span {
	float: left;
	position: relative;
	display: block;
	width:14px;
	height:14px;
	margin-right: 7px;
	background: white;
	border: 1px solid #ccc;
	border-radius: 50%;
}
#slideshow_tabs a:hover,
#slideshow_tabs span:hover {
	background: #efefef;
}
#slideshow_tabs a.current,
#slideshow_tabs span.current {
	background: #ccc;
}

#slideshow .slide a:link,
#slideshow .slide a:visited, {
	text-decoration: none;
	outline: none;
}
#slideshow .slide a:hover,
#slideshow .slide a:active {
	text-decoration: none;
	outline: none;
}


/* 
================================
CLIENT AND WORK PAGES 
================================
*/
#clients #content > .item,
#work #content > .item {
	position: relative; display: block;
	text-align: center; margin-bottom: 10px;
}
#clients h1 {
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 300;
	padding: 1em 0;
	text-align: center;
	text-transform: uppercase;
}
.category-title {
	position: relative;
	display: block;
	text-align: center;
	text-transform: uppercase;
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-weight: 300;
	padding: 1em 0;
	margin-top:1em;
	border-top: 1px solid #efefef;
}

/* 
================================
CONTACT PAGE 
================================
*/
#contact #content {
	padding-top: 40px;
}
#contact #middle #connect {
	background: url(/images/connect_share.png) -310px 0 no-repeat;
}
#contact #middle #connect .connect {
	display: none;
}
/*
#contact #content h3 span {
	position: absolute; left: -999999px;
}
#contact #content h3 {
	position: relative; display: block;
	line-height: 20px; height: 20px; width: 100%;
}
#contact #content h3.who-we-are {
	background: url(/images/who-we-are.gif) 0 0 no-repeat;
}
#contact #content h3.services-we-offer {
	background: url(/images/services-we-offer.gif) 0 0 no-repeat;
}
#contact #content h3.connect {
	background: url(/images/connect-with-the-studio.gif) 0 0 no-repeat;
}
*/
#contact .form {
	margin-left: 20px;
	padding-left: 20px;
	border-left: 2px solid #FFF394;
}




/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * 
 * Non-semantic helper classes: please define your styles before this section.
 */

/* For image replacement */
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }

/* Hide for both screenreaders and browsers:
   css-discuss.incutio.com/wiki/Screenreader_Visibility */
.hidden { display: none; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: by Jon Neal.
  www.webaim.org/techniques/css/invisiblecontent/  &  j.mp/visuallyhidden */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: drupal.org/node/897638 */
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* The Magnificent Clearfix: Updated to prevent margin-collapsing on child elements.
   j.mp/bestclearfix */
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
/* Fix clearfix: blueprintcss.lighthouseapp.com/projects/15318/tickets/5-extra-margin-padding-bottom-of-page */
.clearfix { zoom: 1; }


/**
 * Media queries for responsive design.
 *
 * These follow after primary styles so they will successfully override.
 */

@media only screen and (min-width: 944px) {
	#nav-top-mobile,
	#nav-mobile .dropdown,
	#nav-mobile > ul,
	#nav-mobile > ul > li,
	#nav-mobile > p {
		display: none;
	}
}

@media only screen and (max-width: 943px) {
	#container,
	#slideshow,
	#slider,
	#slideshow .slide,
	.grid-width,
	.size-1,
	.size-2 {
		width:100%;
	}
	
	#nav-mobile > p {
		display: block;
		position: relative;
		clear: both;
		padding:10px;
		font-size: 80%;
		color:#ccc;
	}
	
	blockquote {
		padding:20px 50px;
		font-family: Arial, sans-serif;
		font-size: 14px;
		font-style: italic;
	}
	
	#container img {
		width:100%;
	}
	.item img {
		display: block;
		height: auto;
		max-width: 100%;
	}
	
	#branding,
	#nav-top,
	#slideshow,
	#slideshow_tabs,
	#bottom {
		display:none;
	}
	
	#slideshow-mobile {
		display: block;
	}
	#slideshow-mobile img {
		margin: 60px 0;
	}
	
	#nav-top-mobile > .brand {
		position: absolute; display: block;
		width:200px; height:17px;
		top:20px; left:10px;
		z-index: 1000;
		background: url(/images/logo.png) 0 0 no-repeat;
		background-size: contain;
	}
	#nav-top-mobile > .brand span {
		position: absolute; left: -999999px;
	}
	.nav {
		text-align: left;
	}
	.nav ul.dropdown a {
		font-family: 'Roboto', 'Helvetica', Arial, sans-serif;
		font-weight: normal;
		text-transform: uppercase;
	}
	
	#content {
		padding:10px;
	}
	
	#contact .form {
		margin-left: 0;
		padding-left: 0;
		border-left: none;
	}
	#contact_form {
		display: none;
	}
	#contact_form_mobile {
		display: block;
	}
	.form_row, 
	.form_row.column {
		width:90%;
		padding:5px 0;
		margin-bottom:10px;
		clear:both;
		float:left;
	}
	input.text-field 	{ width:100%; }
	input.tiny   			{ width:100%; }
	input.sm     			{ width:100%; }
	input.med    			{ width:100%; }
	input.lg     			{ width:100%; }
	input.xl     			{ width:100%; }
	input.xxl    			{ width:100%; }
	input.date   			{ width:100%; }
	input.search 			{ width:100%; }
	textarea.sm  			{ width:100%; }
	textarea.med 			{ width:100%; }
	textarea.lg  			{ width:100%; }
	textarea.xl  			{ width:100%; }
	textarea.text-area { width:100%; }
	select.med   			{ width:100%; }
	select.lg    			{ width:100%; }
	
	#middle #connect {
		background: none;
		height:60px;
		padding:0;
		width: auto;
	}
	#middle #connect .connect {
		background: url(/images/connect_share.png) 0 0 no-repeat;
	}
	#middle #connect .share {
		display: block;
		width: 100%;
		margin-top: 10px;
		background: url(/images/connect_share.png) -317px 0 no-repeat;
	}
	#share_target {
		width: auto;
		float: none;
		clear: left;
		margin-top: 10px;
	}
	#bottom {
		padding-left:10px;
		padding-right: 10px;
	}
}