/****** 
	screen.css
	Real Estate Composer
	Author: Evan Johnson (chilipepperdesign.com)
	Date: 12-07-2008
 ******/

/*   Modified version of Eric Meyer's CSS Reset Reloaded -  http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ */
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;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
/* remember to highlight inserts somehow! */
ins {text-decoration: none;}
del {text-decoration: line-through;}
/* tables still need 'cellspacing="0"' in the markup */
table {border-collapse: collapse; border-spacing: 0;}
/*****************************************    end  Eric Meyer's CSS Reset Reloaded */

/***************************************** base  blueprintcss typography.css  - 12px default font*/
body {font-size:75%;font-family:"Lucida Sans Unicode","Lucida Grande", Verdana, Arial, sans-serif;}
h1, h2, h3, h4, h5, h6 {font-weight:normal;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;font-weight:bold;}
h2 {font-size:2.2em;margin-bottom:0.25em; font-weight:bold;}
h3 {font-size:1.75em;line-height:1;margin-bottom:1em; }
h4 {font-size:1em;font-weight:bold;margin-bottom:0.25em;}
h5 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img {margin:0;}
p {
	margin:0 0 1.5em;
	line-height: 22px;
}
blockquote {margin:1.5em;font-style:italic;}
strong {font-weight:bold;}
em, dfn {font-style:italic;}
dfn {font-weight:bold;}
sup, sub {line-height:0;}
abbr, acronym {border-bottom:1px dotted #666;}
address {margin:0 0 1.5em;font-style:italic;}
pre {margin:1.5em 0;white-space:pre;}
pre, code, tt {font:1em 'andale mono', 'lucida console', monospace; line-height:1.5;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
ul {list-style-type:disc;}
ol {list-style-type:decimal;}
dl {margin:0 0 1.5em 0;}
dl dt {font-weight:bold;}
dd {margin-left:1.5em;}
table {margin-bottom:1.4em;width:100%;}
th {font-weight:bold;}
th, td, caption {padding:4px 10px 4px 5px;}
tfoot {font-style:italic;}
.small {font-size:.8em;margin-bottom:1.875em;line-height:1.875em;}
.large {font-size:1.2em;line-height:2.5em;margin-bottom:1.25em;}
.hide {display:none;}
.first {margin-left:0;padding-left:0;}
.last {margin-right:0;padding-right:0;}
.top {margin-top:0;padding-top:0;}
.bottom {margin-bottom:0;padding-bottom:0;}
/* link s */
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {text-decoration: none;}
a:active {}
a:focus{}
#main {font-size: 1.1em;line-height: 1.5; }
/*****************************************  end of blueprintcss typography.css */

/*****************************************  colors */
body { color: #333; background:#fff;}
/* link s */
a:link {color: #274769; text-decoration: underline;}
a:visited {color: #666;}
a:hover {color: #000;}
a:active {color: #600;}
a:focus{color:#000;}
/*typography*/
h1, h2, h3, h4, h5, h6 {color:#111;}
h3 {color:#aaa;}
h4 {color:#333;}
del {color:#666;}
.highlight {background:#ff0;}
.added {background:#060;color:#fff;}
.removed {background:#900;color:#fff;}
.quiet {color:#666;}
.loud {color:#000;}
/*elements*/
thead th {background:#c3d9ff;}
tr.even td {background:#e5ecf9;}
caption {background:#eee;}
blockquote {color:#666;}
/*****************************************  end of colors */
/*****************************************  header background images  */
body.front { background:url(images/headers/abstract-repeating2.jpg) repeat-x top center; }
body.product1 { background:url(images/headers/abstract-repeating5.jpg) repeat-x top center; }
body.product2 { background:url(images/headers/abstract-repeating3.jpg) repeat-x top center; }
body.product3 { background:url(images/headers/abstract-repeating4.jpg) repeat-x top center; }
body.product4 { background:url(images/headers/abstract-repeating1.jpg) repeat-x top center; }
body.product5 { background:url(images/headers/abstract-repeating6.jpg) repeat-x top center; }
body.company { background:url(images/headers/abstract-repeating7.jpg) repeat-x top center; }
body.curious { background:url(images/headers/abstract-repeating8.jpg) repeat-x top center; }
/*****************************************  end of header background images  */

/*****************************************  layout  */
body {text-align: center;}
#wrapper {
	text-align: left;
	margin: 0px auto;
	width: 800px;
	}
#header {}
#logo {
	margin-top: 30px;
	float: left;
	width: 315px;
	height: 148px;
	background: url(images/logo.gif) no-repeat;
	}
#logo span {
	display: block;
	width: 0;
	height: 0;
	overflow: hidden;
	}
#utils {
	float: right;
	}
#menu {
	clear: right;
	margin-top: 10px;
	}
#main {
	clear: both;
	}
#content-left { 
	float: left;
	padding-right: 20px;
	}
#content-right {
	float: right;
	}
#footer {
	clear: both;
	padding-top: 25px;
	text-align: center;
	}
#footer p {
	text-align: center;
}
/*****************************************  end of layout  */

/*****************************************  main menu  */
#menu ul {
	margin: 0; padding: 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	float: right;
	}
#menu ul li {
	float: left;
	padding: 0 9px;
	margin-top: 75px;
	}
#menu ul li a{
	display: block;
	width: 103px;
	height: 60px; /* 56px is image height - extra is for bottom hover bar */
	text-indent: -9999px;
	background: url(images/active_menu.gif) no-repeat 100% -20px;
	}
#menu ul li a:hover, #menu ul li a.current{
	background-position: bottom center;
	}
#menu #portfolio {
	background: url(images/portfolio_menu.gif) no-repeat top;
	}
#menu #product{
	background: url(images/product_menu.gif) no-repeat top;
	}
#menu #company{
	background: url(images/company_menu.gif) no-repeat top;
	}
#menu #curious{
	background: url(images/curious_menu.gif) no-repeat top;
	}
/*****************************************  end of main menu  */

/*****************************************  footer menu  */
#footer ul {
	margin: 5px;
}
#footer li {
	width:auto;
	margin:0 auto;
	display:inline;
	padding:0 15px 0 16px;
	background: transparent url('images/pipe.gif') no-repeat 0 2px;
	}
#footer li.first {padding-left:0; background:none;}
#footer li.last {padding-right:0;}
/*****************************************  end of footer menu  */

/*****************************************  utils menu  */
#utils ul {
	margin: 0; padding: 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	}
#utils ul li {
	float: right;
	display: block;
	border-bottom: 3px #666 solid;
	margin: 2px 3px; 
	padding-bottom: 2px;
	}
#utils ul li a{
	display: inline; text-decoration: none; color: #666;
	}
#utils ul li a img{
	vertical-align: middle;
	padding: 0 4px;
	}
/*****************************************  end of utils menu  */

/*****************************************  accessibility  */
.accessibility {
	left: -999em;
	position: absolute;
	top: -999em;
	}
/***************************************** end  accessibility  */

/*****************************************  front/portfolio page  */
body.front h4 {font-size:1.5em;line-height:1.25;margin-bottom:0.25em; font-weight:bold;}
#pitch {
	position: relative;
	height: 175px; width: 800px;
	}
.magic-hat{
	background: url(images/portfolio/magic_hat.png) no-repeat top;
	height: 190px; width: 160px;
	position: absolute;
	right: 0; top: -55px;
	z-index: 1;
	}
.more-button{
	position: absolute;
	right: 0; bottom: 16px;
	z-index: 1;
	height: 22px; width: 122px;
	}
#pitch  span{
	position: absolute;
	height: 100%; width: 100%;
	background: url(images/portfolio/pitch.jpg) no-repeat;
	}
body.front #content-left, body.front #content-right { /* content is 382 wide */
	width: 382px;
	}
body.front #content-left .image, body.front #content-right .image{
	margin: 0; padding: 0;
	height: 177px;
	}
body.front #content-left  .reflection, body.front #content-right  .reflection {
	position: relative; /*so the buttons match up */
	width: 382px;
	padding-top: 20px;
	}
body.front #content-left .reflection img, body.front #content-right  .reflection img {
	position: absolute;
	right: 0; bottom: 0;
	}
body.front #content-left  .reflection {
	background: url(images/portfolio/AA_reflection.jpg) no-repeat top center;
	}
body.front #content-right .reflection  { 
	background: url(images/portfolio/REOP_reflection.jpg) no-repeat  top center;
	}
.reflection a {
	color: #193e5d;
	text-decoration: underline;
}
/*****************************************  end of front/portfolio page  */

/*****************************************  products page  */
body.product #content-left {
	width: 301px;
	text-align: center;
	}
body.product #content-right {
	width: 470px;
	text-align: center;
	}
body.product #content-right .title {
	position: relative;
	} 
body.product1 #content-right .title div{
	position: relative;
	top: 70px;
	}
body.product #content-left h4, body.product #content-left p, 
body.product #content-right h4, body.product #content-right p,
body.product #content-right h2, body.product #content-right h3 { text-align: left; }
body.product div.right {
	width: 47%;
	float: right;
}
body.product img.right {
	vertical-align: middle;
	margin-left: 15px;
	float: right;
}
body.product img.left {
	vertical-align: middle;
	margin-right: 10px;
	margin-bottom: 20px;
	float: left;
}
body.product #content-left img.right {
	margin-left: 10px;
	float: right;
	}
body.product div.left {
	width: 47%;
	float: left;
}
body.product .clear {
	clear: both;
}
/***************************************** end of  products page  */
/***************************************** products menu  */
body.product #left-menu ul {
	text-align: left;
	}
body.product #left-menu ul {
	margin: 0; padding: 0;
	list-style-image: none;
	list-style-position: outside;
	list-style-type: none;
	padding-bottom: 15px;
	}
body.product #left-menu ul li {
	display: inline;
}
body.product #left-menu ul li a {
	background: transparent url(images/product/rounded_back.gif) repeat-y top center;
	position: relative;
	display: block;
	padding: 15px 0;
	text-decoration: none;
	color: #333;
}
body.product #left-menu .even {
	background: #f9f9f9 url(images/product/rounded_back.gif) repeat-y top center;
}
body.product #left-menu ul li a span.top {
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	top: 0;
	height: 8px; width: 301px;
	background: transparent url(images/product/rounded_top.gif) no-repeat top center;
}
body.product #left-menu ul li a span.bottom {
	position: relative;
	display: block;
	left: 0;
	bottom: -15px;
	height: 8px; width: 301px;
	background: transparent url(images/product/rounded_bottom.gif) no-repeat bottom center;
}
body.product #left-menu ul li a:hover {
	background: #e6f2ff url(images/product/rounded_back.gif) repeat-y center;
}
body.product #left-menu .current, body.product #left-menu a:hover.current {
	background: #c6dff5 url(images/product/rounded_back.gif) repeat-y center;
	color: #000;
}
body.product #left-menu ul li img {
	position: absolute;
	margin-left: 25px;
	margin-top: 5px;
}
body.product #left-menu ul li em, body.product #left-menu ul li .desc {
	display: block;
	width: 200px;
	margin-left: 80px;
	position: relative;
	left: 0;
	top: 0;
	cursor: pointer;
}
body.product #left-menu ul li em {
	font-style: normal;font-weight: bold;
	color: #181818;
}
body.product #left-menu ul li .desc  {
	font-size:.9em;line-height: 1;
}
/***************************************** end of  products menu  */

/*****************************************  company page  */
body.company #content-left {
	width: 400px;
	padding: 0;
	}
body.company #content-right p, body.company #content-right h4 {
	margin-left: 20px;
	}
body.company #content-right {
	width: 382px;
	}
body.company img.right {
	float: right;
	}
/*****************************************  end of company page  */
	
/*****************************************  curious page  */
body.curious #content-top {
	text-align: center;
	}
body.curious #content-left {
	width: 460px;
	}
body.curious #content-right {
	width: 320px;
	}
body.curious #content-right p,body.curious #content-right label, body.curious #content-right h4 {
	margin-left: 10px;
	}
body.curious #signup-form {
	width: 298px;
	background:url(images/curious/signup-bg.gif) repeat-y top center;
}
body.curious #signup-form label {
	font-style: normal;font-weight: bold; color: #333;
}
body.curious #signup-form fieldset {
	position: relative;
	background:url(images/curious/signup-bottom.jpg) no-repeat bottom center;
}
body.curious #signup-form div {
	padding: 15px 16px 20px;
}
body.curious #signup-form fieldset span {
	position: absolute;
	top: 0; left: 0;
	background: url(images/curious/signup-top.gif) no-repeat top center;
	height: 16px; width: 298px;
}
body.curious #signup-form p {
	line-height:1.05;
}
body.curious #signup-form h4 {
	margin-bottom: 5px;
}
body.curious #signup-form  #email {
	width: 205px;
	background: transparent none;
	color: #7a7a7a;
	border: medium none;
	}
body.curious #signup-form .input {
	height: 24px; width: 210px;
	background: url(images/curious/text-box.gif) no-repeat 10px 0;
	padding: 2px 5px 20px 16px;
	float: left;
}
body.curious #signup-form  #submit {
	height: 24px; width: 27px;
	float: left;
	}
/*****************************************  end of curious page  */

a.button {
	background: url(../images/button.gif) no-repeat left top;
	height: 30px;
	color: #FFF;
	padding-left: 20px;
	line-height: 30px;
	text-decoration: none;
	display: block;
	float: left;	
}
a.button span {
	background: url(../images/button.gif) no-repeat right top;
	display: block;
	padding-right: 11px;
}
a:hover.button { background: url(../images/button.gif) left -30px; }
a:hover.button span { background: url(../images/button.gif) right -30px; }