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

/*
Theme Name: spectrum
Theme URI: http://www.bradleycushing.com/
Description: copyright 2009 spectrum theme design.
Version: v1.0
Author: Bradley Cushing
Author URI: http://www.bradleycushing.com/
*/



/* ----------------------------------------------------------------------------- 
DOCUMENT STANDARDS

grid system width {
	740px;}

document notes
1. measurements across in px for fixed width
2. measurements vertical in em for scaling
3. margins next to eachother collapse to largest
4. cite must be encapsulated for ie (paragraph, blockquote)
5. variable default renders in italics
6. secondary structure floats need display inline for ie (double margins)
----------------------------------------------------------------------------- */



/* ----------------------------------------------------------------------------- 
COLORS

blurple: #464a8d
green: #76b844
green 10%: #f2f8ed
yellow: #f1bc2b
yellow 10%: #fef8ea
orange: #E19531
orange 10%: #FCF5EB
red: #c55152
red 10%: #f9eeee
purple: #944E86
purple 10%: #f4edf3
blue: #0F9CD8
----------------------------------------------------------------------------- */


/* ----------------------------------------------------------------------------- 
DEVELOPMENT
----------------------------------------------------------------------------- */
body.dev div#wrap, 
body.dev div#header, 
body.dev div#banner, 
body.dev div#navigation, 
body.dev div#page, 
body.dev div#sidebar, 
body.dev div#content, 
body.dev div#disclaimer, 
body.dev div#footer, 
body.dev div#logo {
	filter:alpha(opacity=90);
	-moz-opacity:.90;
	opacity:.90;}

body.dev {
	background: #fff url(/assets/docs/framework/website/html/assets/img/bkg/bkg_740grid.gif) top left repeat-y;}

body.dev div#wrap {
	background: #eee url(/assets/docs/framework/website/html/assets/img/bkg/bkg_baseline18.png) top left repeat;}

body.dev div#wrap div#page div#sidebar {
	background: #eee;}



/* ----------------------------------------------------------------------------- 
DEFAULT RESET
v1.0 | 20080212
http://meyerweb.com/eric/tools/css/reset/
----------------------------------------------------------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;}

body {
	line-height: 1;}

ol, ul {
	list-style: none;}

blockquote, q {
	quotes: none;}

blockquote:before, 
blockquote:after,
q:before, q:after {
	content: '';
	content: none;}

/* remember to define focus styles! */
:focus {
	outline: 0;}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;}

del {
	text-decoration: line-through;}

/* default variable styles! */
var {
	font-style: normal;}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;}

/* adding form default! */
input, select, textarea {
	margin: 0;
	padding: 0;}



/* ----------------------------------------------------------------------------- 
PRIMARY STRUCTURE
----------------------------------------------------------------------------- */
div#wrap {
	width: 720px;
    background: #eee;}

div#header {
	float: left;
	width: 460px;
	height: 90px;
	background: #fff;}

div#page {
	clear: both;
	width: 720px;}

div#sidebar {
	float: left;
	clear: both;
	width: 220px;
	padding: 18px 10px;
	background: none;}

div#content {
	float: right;
	clear: right;
	width: 460px;
	min-height: 666px;
	padding: 18px 10px;
	background: #fff;}

div#footer {
	width: 460px;
	padding: 18px 0;
	background: #fff;}
	


/* ----------------------------------------------------------------------------- 
GENERIC/GLOBAL
----------------------------------------------------------------------------- */
body {
	font-size: 62.5%;
	line-height: 18px;
	font-family: Arial, "Lucida Grande", sans-serif;
	background: #fff;
	margin: 10px;
	color: #666;}

ul {
	font-size: 1.2em;}

ul li ul, 
ol li ol {
	font-size: 1.0em;}

div#page ul {
	list-style: disc;
	margin-bottom: 18px;}

div#sidebar ul {
	list-style: none;}

div#sidebar ul li ul {
	margin-bottom: 0;
	list-style: disc;}

div#page ul li, 
div#page ol li {
	margin-left: 20px;}

div#sidebar ul li {
	margin-left: 0px;}

div#sidebar ul li ul li {
	margin-left: 20px;}

div#page ul.map li ul {
	margin-bottom: 0;}

ol {
	font-size: 1.2em;
	list-style: decimal;}

div#page ol {
	margin-bottom: 18px;}

dl {
	font-size: 1.2em;
	font-family: Georgia, "Times New Roman", Times, serif;
	margin-bottom: 18px;}

dt {
	font-weight: bold;}

dd {}

.clear {
	clear: both;}
	
	
	
/* ----------------------------------------------------------------------------- 
TYPOGRAPHY
----------------------------------------------------------------------------- */
a, 
a:link, 
a:visited {
	text-decoration: none;
	color: #666;}

div#page a, 
div#footer a {
	border-bottom: dotted 1px #666;}

a.more-link {
	color:#944E86;
	font-size: 1.2em;}

a:hover, 
a:active, 
div.box:hover h2, 
ul.navigation li.page-item-3 a:hover, 
ul.navigation li.page-item-7 a:hover, 
ul.navigation li.page-item-11 a:hover, 
ul.navigation li.page-item-15 a:hover, 
ul.navigation li.page-item-17 a:hover, 
ul.navigation li.page-item-19 a:hover, 
#page h2 a:hover, 
div#header h2 a:hover {
	color: #000;}

p {
	font-size: 1.2em;}

div#page p {
	margin-bottom: 18px;}

div#footer p {
	margin-bottom: 0;
	font-style: italic;
	color: #999;}

div#footer .right {
	text-align: right;}

div.box p {
	margin-bottom: 0;}

li p {
	font-size: 1.0em;}

p.results, 
p.pings, 
p span {
	color: #999;}

h1,
h2, 
h3, 
h4, 
h5, 
h6 {
	font-weight: bold;}

h1 {
	font-size: 2.2em;
	color: #111;
	margin-bottom: 40px;}

h1 span {
	font-size: 0.6em;
	font-style: italic;
	color: #ccc;
	line-height: 12px;}

h2 {
	font-size: 1.2em;
	color: #222;}

div#header h2 {
	font-size: 2.2em;
	margin-bottom: 4px;
	display: inline;
	float: left;}

div#header h2 a {
	border-bottom: none;}

div#header h2 a img.left {
	margin: 0 10px 0 0;}

body.green h2, 
body.green h2 a {
	color:#76B844;}

body.yellow h2, 
body.yellow h2 a {
	color:#F1BC2B;}

body.orange h2, 
body.orange h2 a {
	color:#E19531;}

body.red h2, 
body.red h2 a {
	color:#C55152;}

body.purple h2, 
body.purple h2 a {
	color:#944E86;}

body.blue h2, 
body.blue h2 a {
	color:#0F9CD8;}

div.box h2 {
	font-size: 2.2em;
	margin-bottom: 23px;}

h3 {
	font-size: 1.2em;
	color: #333;}

div#header h3 {
	font-style: italic;
	color: #ccc;
	margin-bottom: 18px;
	clear: left;}

h4 {
	font-size: 1.2em;
	color: #666;
	font-weight: normal;}

h5 {
	font-size: 1.2em;
	color: #999;
	font-weight: normal;}

h6 {
	font-size: 1.2em;
	color: #ccc;
	font-weight: normal;}

hr {
	color: #fff;
	border-top: 1px solid #eee;
	border-style: solid;
	height: 1px;
	margin: 15px 0;
	/* http://www.sovavsiti.cz/css/hr.html */
	background-color: #fff;}

strong {
	font-weight: bold;}

em {
	font-style: italic;}

strike {
	text-decoration: line-through;}

blockquote {
	font-size: 1.2em;
	font-style: italic;
	margin: 0 60px 18px 60px;
	padding-left: 10px;
	border-left: 5px solid #eee;}

cite {
	font-size: 0.9em;
	font-style: italic;
	color: #999;
	padding-left: 10px;}

address {
	font-size: 1.2em;
	margin-bottom: 18px;}

abbr, 
acronym {
	cursor: help;}

sub {
	font-size: 0.9em;
	line-height: 6px;
	vertical-align: sub;}

sup {
	font-size: 0.9em;
	line-height: 6px;
	vertical-align: super;}

pre {
	font-size: 1.44em;
	line-height: 18px;
	margin-bottom: 18px;
	border: 18px solid #eee;
	color: #000;}

code, 
var, 
samp, 
kbd {
	font-size: 1.2em;
	font-family: monospace;
	color: #000;}

dfn {
	font-weight: bold;
	font-style: italic;}

ins {
	color: #f00;}

small {
	font-size: 1.1em;
	color: #999;
	font-style: italic;
	margin-bottom: 18px;
	display: block;}

span.twitter-timestamp {
	font-size: 0.9em;
	color: #999;
	font-style: italic;}



/* ----------------------------------------------------------------------------- 
ICONS
----------------------------------------------------------------------------- */
.icn {
	padding-left: 20px;}

.icn.vcard {
	background: url(/assets/img/icn/vcard.png) no-repeat 0 -2px;}

.icn.pdf {
	padding: 4px 0 0 20px;
	background: url(/assets/img/icn/pdf.png) no-repeat;}

.icn.email {
	background: url(/assets/img/icn/email.png) no-repeat 1px -1px;}

.icn.xhtml {
	background: url(/assets/img/icn/xhtml.png) no-repeat 1px -2px;}

.icn.css {
	background: url(/assets/img/icn/css.png) no-repeat 1px -2px;}

.icn.txt {
	padding: 4px 0 0 20px;
	background: url(/assets/img/icn/txt.png) no-repeat;}

.icn.facebook {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/facebook.png) no-repeat;}

.icn.linkedin {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/linkedin.png) no-repeat;}

a.icn.twitter, 
div#twitter-1 h2 a.twitter_title_link {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/twitter.png) no-repeat;}

.icn.youtube {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/youtube.png) no-repeat;}

.icn.flickr {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/flickr.png) no-repeat;}

.icn.compress {
	padding: 4px 0 0 20px;
	background: url(/assets/img/icn/compress.png) no-repeat;}

.icn.layout {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/layout.png) no-repeat;}

.icn.picture {
	padding: 3px 0 0 20px;
	background: url(/assets/img/icn/picture.png) no-repeat;}



/* ----------------------------------------------------------------------------- 
SECONDARY STRUCTURE
----------------------------------------------------------------------------- */
div.box {
	margin: 0 0 18px;
	padding: 12px 10px 17px;
	float: left;
	width: 438px;
	background: #f2f8ed;
	border: 1px solid #eee;}

div.box.auto {
	height: auto;}

body.yellow div.box {
	background:#fef8ea;}

body.orange div.box {
	background:#fcf5eb;}

div.box:hover, 
body.green div.box:hover, 
body.yellow div.box:hover, 
body.orange div.box:hover {
	background:#eee;
	border:1px solid #ddd;}

div.scroll {
	margin-bottom: 18px;
	padding: 12px 10px;
	float: left;
	width: 438px;
	height: 64px;
	background: #fff;
	border:1px solid #eee;
	overflow-y: scroll;
	font-size: 1.2em;}

div.scroll pre {
	border: none;
	padding: 0;
	color: #000;
	font-size: 1.2em;}

	
	
/* ----------------------------------------------------------------------------- 
NAVIGATION
----------------------------------------------------------------------------- */
ul.navigation {
	list-style: none;}

ul.navigation li {
	margin-left: 0;}

div#sidebar ul.navigation li a, 
ul.navigation li ul li a {
	border-bottom: 0;}

ul.navigation li ul {
	padding: 18px 1.0em;
	background: #eee;
	position: absolute;
	margin-right: 0;
	left: -9999em;
	top: auto;
	display: block;}

ul.navigation li ul li {
	float: none;
	padding-left: 0;}

ul.navigation li:hover ul, 
ul.navigation li.sfhover ul {
	left: auto;
    margin-left: -1.0em;}

ul.navigation li ul li {
	float:none;}

ul.navigation li.page-item-3 a {
	color:#76B844;}

ul.navigation li.page-item-7 a  {
	color:#F1BC2B;}

ul.navigation li.page-item-15 a {
	color:#E19531;}

ul.navigation li.page-item-11 a {
	color:#C55152;}

ul.navigation li.page-item-17 a {
	color:#944E86;}

ul.navigation li.page-item-19 a {
	color:#0F9CD8;}



/* ----------------------------------------------------------------------------- 
TABLES
----------------------------------------------------------------------------- */
div#page table {
	font-size: 1.2em;
	margin-bottom: 18px;}

div#page table thead th {
	font-weight: bold;
	text-align: left;
	color: #111;}

div#page table tbody td {
	background: #eee;}

div#page table thead th, 
div#page table td {
	width: 210px;
	padding-left: 30px;}

div#sidebar table thead th, 
div#sidebar table td {
	width: 90px;
	padding-left: 30px;}

div#page table thead th.first, 
div#page table td.first, 
div#sidebar table thead th.first, 
div#sidebar table td.first {
	padding-left: 10px;}

div#page table caption {
	font-size: 0.9em;
	font-style: italic;
	text-align: left;
	padding: 0 0 18px;}



/* ----------------------------------------------------------------------------- 
SEARCH BOX
----------------------------------------------------------------------------- */
div#page form.search {
	margin-bottom: 72px;}

form.search input.searchbox {
	width: 115px;
	height: 20px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;}

form.search input.searchsubmit {
	width: 70px;
	margin-left: 10px;}



/* ----------------------------------------------------------------------------- 
CLIENT LOGIN
----------------------------------------------------------------------------- */
form#loginform {
	float: right;}

form#loginform div {
	margin-bottom: 0.5em;}

form#loginform div input.username, 
form#loginform div input.password {
	height: 15px;
	border: 1px solid #ccc;
	background: #fff;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;}

form#loginform div.submit {
	float: right;}



/* ----------------------------------------------------------------------------- 
WORDPRESS COMMENTS
----------------------------------------------------------------------------- */
form#commentform {
	width: 460px;}

form#commentform p {
	padding-bottom: 12px;
	height: 23px;
	border-bottom: 1px solid #eee;
	margin-bottom: 18px;}

form#commentform p.textarea {
	height: auto;
	border-bottom: none;}

form#commentform label {
	float: left; 
	width: 100px; 
	margin-right: 20px;
	padding-bottom: 0;
	font-weight: bold;}

form#commentform input#author, 
form#commentform input#email, 
form#commentform input#url {
	width: 338px;  
	height: 20px;
	border: 1px solid #ccc;
	background: #eee;
	float: left;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;}

form#commentform textarea {
	float: left; 
	width: 338px;
	height: 92px;
	margin-bottom: 14px;
	border: 1px solid #ccc;
	background: #eee;
	border-radius: 3px;
	-moz-border-radius: 3px;
	-khtml-border-radius: 3px;
	-webkit-border-radius: 3px;}

form#commentform div.submit {
	text-align: right;
	clear: left;
	float: right;
	margin: 0 10px 18px 0;}

form#commentform span.req {
	color: #f00;}

#page ol.commentlist {
	list-style: none;}

#page ol.commentlist li {
	margin-left: 0;
	padding: 18px 10px;}

#page ol.commentlist li.alt {
	background: #eee;}

#page ol.commentlist li img {
	float: left;
	margin-right: 20px;
	padding: 5px;
	background:#eee;
	border: 1px solid #ddd;}

#page ol.commentlist li img:hover {
	background:#ddd;
	border: 1px solid #ccc;}

#page ol.commentlist li cite {
	font-size: 1.0em;
	padding-left: 0;}

#page ol.commentlist li small a {
	color: #999;
	font-size: 0.8em;}

#page ol.commentlist li small a:hover {
	color: #000;}



/* ----------------------------------------------------------------------------- 
WORDPRESS EDITING
----------------------------------------------------------------------------- */
#page ol.commentlist li small a.comment-edit-link {
	margin-left: 10px;
	color: #ff0000;}

#page a.post-edit-link {
	color: #ff0000;}

#page ol.commentlist li small a.comment-edit-link:hover, 
#page a.post-edit-link:hover {
	color: #000;}
	


/* ----------------------------------------------------------------------------- 
FRAMEWORK

selector order {
	class="frame position"
	class="right"
	class="frame left"}
----------------------------------------------------------------------------- */
div#page img {
	margin-bottom: 18px;}

img.frame {
	padding: 5px;
	background:#eee;
	border: 1px solid #ddd;
	display: block;}

div#sidebar img.frame {
	background:#ddd;
	border: 1px solid #ccc;}

a img.frame:hover {
	background:#ddd;
	border: 1px solid #ccc;}

div#footer img {
	margin-bottom: 0;}

img.left {
	margin-right:20px;}

img.right {
	margin-left:20px;}
	
.left {
	float: left;}

.right {
	float: right;}

.center {
	margin: 0 auto 18px;
	display: block;}