/* @override http://localhost/shared/style.css */

@import url("reset.css");

/* @group Global */

body {
  padding: 0;
  text-align: left;
  font-family: 'Lucida Grande', Verdana, Arial, sans-serif;
  background-color: #eaeaea;
  font-size: 87.5%;
  line-height: 1.429;
}

/* @group Layout */

.content {
  width: 55em;
  clear: both;
  margin: 0 auto;
  background-color: #fefefe;
  border-style: solid;
  border-color:#AAA;
  border-width: 1px;
}

img.right figure.right {
  float: right;
  margin: 0 0 2em 2em;
}

img.left, figure.left {
  float: right;
  margin: 0 0 2em 2em;
}

/* @end */

/* @group HTML5 */

header, section, footer,
  aside, nav, article, figure {
    display: block;
  }

article
{
	padding-left:18em;
}

/* @end */

/* @group Headings */

/* Base Font = 12px = 1em */

/* 22px */
h1 {
  font-size: 1.833em
}

/* 20px */

h2 {
  font-size: 1.667em
}

/* 18px */

h3 {
  font-size: 1.5em
}

/* 16px */

h4 {
  font-size: 1.333em
}

/* 14px */

h5 {
  font-size: 1.167em
}

/* 12px */

h6 {
  font-size: 1em
}

h2, h3, h4, h5, h6 {
  font-weight: 400;
  line-height: 1.1;
  margin-bottom: .8em;
}

/* @end */

/* @group Anchors */

a {
  outline: 0;
}

a img {
  border: 0px;
  text-decoration: none;
}

#applications.content a, #applications.content a:link,#applications.content a:visited {
  color: #555555;
}

a:link, a:visited {
  color: #556F9C;
  padding: 0 0px;
  text-decoration: none;
  font-weight: bold;
}

a:hover, a:active {
  color: #9ea1ad;
}

/* @end */

/* @group Paragraphs */

p {
  margin-bottom: 1.143em;
}

* p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: bold;
}

em, i {
  font-style: italic;
}

::-moz-selection {
  background: #F6CF74;
  color: #fff;
}

::selection {
  background: #F6CF74;
  color: #fff;
}

/* @end */

/* @group Lists */

ul {
  list-style: outside disc;
  margin: 1em 0 1.5em 1.5em;
}

ol {
  list-style: outside decimal;
  margin: 1em 0 1.5em 1.5em;
}

dl {
  margin: 0 0 1.5em 0;
}

dt {
  font-weight: bold;
  font-size:1.2em;
}

dd {
  margin-left: 1.5em;
  margin-bottom:1em;
}

/* @end */

/* @group Quotes */

blockquote {
  font-style: italic;
}

cite {
  
}

q {
  
}

/* @end */

/* @end */

/* @group Header */

header#banner.body {
  width: 55em;
  margin-left: auto;
  margin-right: auto;
  font-weight: bold;
  font-size: 14px;
}

header {
  font-weight: bold;
  font-size: 16px;
}

nav 
{
	position:relative;
	top:0;
	height:80px;
	line-height:normal;
}

nav li {
  display:inline;
}

nav ul li a {
  border-left: 1px solid #777;
}

nav ul li:first-child a {
  border-left-style: none;
}

nav img
{
	position:absolute;
	bottom:2px;
}

nav li a,nav li a:visited {
  float: left;
  font-size: 14px;
  display: block;
  margin: 4px 5px 0 5px;
  padding-left: 0.8em !important;
}

#navLinkContainer
{
	display:block;
	position:absolute;
	bottom:4px;
	width:100%;
}

#navLinkListFloater
{
	float:right;
}

/* @end */

/* @group Footer */

#legal p {
  width: 70em;
  margin-left: auto;
  margin-right: auto;
  font-size: 11px;
  color:#555;
}

/* @end */

/* @group Home Page */

#products a:link, #products a:visited, nav a:link, nav a:visited  {
  color: #555;
}

nav a:hover {
	text-decoration:none;
	color:#9ea1ad;
}

.app {
  display: inline-block;
}

#large-apps {
  display: inline-block;
  margin-left: 2em;
  padding-top: 5%;
  margin-bottom: 2%;
}

#large-apps h1 {
  padding-top: 0.5em;
}

img.appIcon {
  float: left;
  margin-right: 0.5em;
}

#large-apps > div.app {
  width: 48%;
  font-size: 1.1em;
  padding-bottom:1em;
}

#small-apps > div.app {
  width: 15em;
  padding-bottom:3em;
}

h4.appName {
  margin-bottom: 0.25em;
}

#small-apps {
  margin-left: 5em;
  border-top: 1px solid #AAA;
  display: inline-block;
  margin-top: 1px;
  padding-top: 5%;
}

/* @group Universial Binary */

#universal-bin {
  font-size: 0.8em;
  color: #000;
  margin-left: 2em;
  margin-bottom: 2em;
}

#universal-bin p {
  padding-top: 1.2em;
}

#universal-bin img {
  float: left;
  margin-right: 0.5em;
}

/* @end */

/* @end */

/* @group Product Page */

/* Width hack below */
#product {
  font-size: 10px;
  padding: 5em;
  width: 67em;
}

#title hgroup * {
  line-height: normal;
  margin-bottom: 0px;
}

#title h1 {
  font-size: 2.5em;
}

#download a img {
  width: 200px;
}

#download header {
	padding-bottom:0.3em;
}

#product section {
  margin-bottom: 2em;
}

#screenshots span {
  display: block;
}

#screenshots div.blackscreen div.caption {
}

#screenshots div.blackscreen {
  text-align: center;
  min-height: 18em;
}

.screenshotThumbnail
{
	border:1px solid;
	width:230px;
	height:128px;
}


/* Make sure our float containers expand to contain them */
div.container
{
	overflow: hidden;
	width: 100%;
}

/* Hacks to get screenshots to line up without using multi column module */
section#screenshots > div.container > div
{
	float:left;
	margin:1em 1em 1em 0;
}

/* Tuning for specific product pages */

div#marsedit.container span.screenshotThumbnail {
	width:100px;
	height:100px;
}

/* Added a min height to fix aside from overflowing */
div#clarion.container {
   min-height: 25em;
}

/* Hide the large zoom image */
div[id$="Screenshot"] {
  display: none;
}

span.featureText
{
	display:block;
	margin:0 1em 1em 0;
}

#features h3
{
	line-height:1em;
	font-weight: bold;	
}

#featuresLeft
{
	float:left;
	width:48%;
	padding-top:0;
}

#featuresRight
{
	float:right;
	width:48%;
	padding-top:0;
}

#featuresRight span, #featuresLeft span
{
}

#product aside {
  width: 16em;
  float: left;
  margin-right: 2em;
}

#product aside img 
{
	margin-left:auto; margin-right:auto; display:block;
}

.TestimonialQuote {
  margin-bottom: 0;
  margin-top: 0.5em;
  font-weight: bold;
  font-size: 1em;
  color: #555555;
}

span.author, #product aside div.TestimonialSection span  {
  display: block;
}

#product aside span.author img 
{
	display:inline;
}


#download #universal-bin {
  margin: 0 0 15px !important;
}

#download p {
  font-size: 1.4em;
  margin-bottom: 0.3em;
}

/* @end */

/* @group Fastscrips */

body.fastscripts section#features {
  min-height: 40em;
}

body.fastscripts section#features div {
  min-height: 21em;
}

section#features header {
	display:none;
}

/* @end */

/* @group Informational Pages 
 * 
 * NOTE: This seems sloppy to me. We should be definining these rules 
 * more generally and not having to tie them specfically to e.g. about, support, etc.
*/

div#support.content article, div#about.content article, div#FourOhFour.content article {
  padding: 1em 2em 2em;
}

#support article header, #about article header, #FourOhFour article header {
  color: #666;
  font-size: 2em;
  padding-bottom: 0.5em;
}

#faq dt {
  margin-top: 0.5em;
}

/* @end */