/* @override http://www.veryalien.com/va_styles.css */

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

/*==================================================================
  Common to all areas of pages
  ==================================================================*/
/* Reset a core set of elements so they will appear consistent across browsers and platforms. For example, without this rule, content styled with an h1 tag would appear in different places in different browsers because each browser has a different top margin default value. By resetting these to 0, the elements will initially be rendered in an identical fashion. Redefine as needed in subsequent styles. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, img {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
}

body {
	color: #ccc;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	line-height: 14px;
	margin: 0 0 0 0;
	padding: 0 0 0 0;
	text-align: center;
	background-color: #000;
}

/* Used for page titles. */
h1 {
	color: #9c0;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: 24px;
	font-style: normal;
	line-height: 28px;
	font-weight: normal;
	font-variant: normal;
	letter-spacing: 0px;
}

/* Used for section titles. */
h2 {
	color: #fff;
	font-size: 19px;
	font-weight: normal;
	line-height: 24px;
	font-family: Verdana, Geneva, sans-serif;
	border-bottom: 1px solid #333;
	padding-bottom: 6px;
	letter-spacing: -1px;
}

h3 {
	color: #fff;
	font-size: small;
	font-weight: bold;
	font-family: Verdana, Geneva, sans-serif;
	padding: 18px 0 6px 0;
}

hr {
	background-color: #333;
	color: #333;
	height: 1px;
	border: 0;
	clear: left;
}

/* For unvisited links. */
:link:focus, :visited:focus { /* Prevents dotted focus outline in Mozilla */
	-moz-outline: none;
}

a, a:link {
	color: #9C0;
	font-weight: bold;
	text-decoration: none;
}

/* For visited links. */
a:visited {
	color: #9C0;
	font-weight: bold;
	text-decoration: none;
}

/* For links on mouseover. */
a:hover {
	color: #FFF;
	text-decoration: none;
}

/* For links that have focus. */
a:focus {
	color: #9C0;
}

/* For links being activated/clicked. */
a:active {
	color: #9C0;
}

.clearer {
	clear: both;
}

/*==================================================================
  outerWrapper, then header and navigation bar
  ==================================================================*/
/* outerWrapper is container for page content. Common to use container to constrain width of page content and allow for browser to avoid the need for horizontal scrolling. For fixed layouts, specify container width and use auto for the left and right margin to center the container on the page. */
#outerWrapper {
	margin: 0px auto 15px auto;
	text-align: left;
	width: 900px;
}

#outerWrapper #header {
	height: 138px;
	padding-left: 0px;
	padding-top: 0px;
}

#logo {
	padding-top: 10px;
	float:left;
}

/* For links in header */
#topLinks {
	color: #fff;
	padding-top: 62px;
	font-size: 12px;
	float: right;
	text-align: right;
	font-weight: bold;
}

/* For top navigation bar */
#navBar {
	background: transparent url(images/navBar_bg.png) repeat-x top;
	height: 56px;
}

#horzNavMenu {
	height: 47px;
	color: #fff;
	float: left;
	/*width: 900px;*/
}

#horzNavMenu ul {
	margin: 0px;
	padding: 0px;
}

#horzNavMenu ul li {
	margin: 0px;
	display: block;
	float: left;
	list-style: none;
	clear: right;
}

#horzNavMenu ul li a {
	display: block;
	padding: 5px 15px 0px 15px;
	text-align: center;
	color: #ccc;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 42px;
	font-weight: bold;
}

#horzNavMenu ul li a:hover {
	text-decoration: none;
	padding-top: 0px;
	line-height: 47px;
	color: #7efe28;
	background: transparent url(images/navBar_hover.png) repeat-x top;
}

#horzNavMenu ul li#active {
	background: transparent url(images/navBar_hover.png) repeat-x top;
	text-decoration: none;
}

#horzNavMenu ul li#active a {
	color: #fff;
}

#horzNavMenu ul li .current {
	color: #9c0;
}

/*==================================================================
  Main Content and Side Panel
  ==================================================================*/
#outerWrapper #contentWrapper {
	overflow: hidden;
}

#outerWrapper #contentWrapper #content {
	float: left;
	width: 600px;
	margin: 0;
	padding: 20px;
	background: transparent url(images/content_bg_noBorder.png) repeat-x left top;
	border: 1px solid #272727;
}

#outerWrapper #contentWrapper #moviecontent {
	float: left;
	width: 600px;
	margin: 0;
	padding: 5px;
	background: transparent url(images/content_bg_noBorder.png) repeat-x left top;
	border: 1px solid #272727;
}

#content p {
	line-height: 140%;
	font-size: small;
}

#appOverview {
	margin: 20px 0 20px 0;
	border: 1px #666 solid;
	padding: 0 10px 0px 10px;
	background-color: #333;
	color: #ddd;
}

#appOverview img.left {
	float: left;
	margin-right: 15px;
	padding: 10px 0 10px 0;
}

#appOverview img.right {
	float: right;
	margin-left: 15px;
	padding: 10px 5px 10px 0;
}

#center {
	margin-left: auto;
	margin-right: auto;
	padding: 10px;
}

#appOverview h2 {
	margin-top: 10px;
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size: large;
	color: #fff;
	letter-spacing: normal;
}

#appOverview p {
	font-size: small;
}

#content blockquote {
	border: 1px #666 solid;
	margin: 20px 20px 0 20px;
	padding: 0 20px 0 20px;
	background-color: #333;
	color: #ddd;
}

#content blockquote ol li {
	padding-bottom: 10px;
}

/* Styles for app overview and what's next pages */
#content .appIcon {
	float: left;
	width: 210px;
	padding-top: 8px;
}

#content .description {
	float: right;
	width: 350px;
	padding-right: 20px;
	font-size: small;
	line-height: 125%;
}

#content .description p {
	font-size: small;
}

.padded li {
	padding-bottom: 10px;
}

/* Styles for App screen shot pages */
#screenShot {
	margin-top: 20px;
}

#screenShot #thumbnails {
	margin-bottom: 20px;	
}

#screenShot #thumbnails img {
	margin-right: 5px;
	border: 1px solid #666;
}

#screenShot #bigImage img {
	border: 1px solid #666;
}

/* Styles for app video tour pages */
#content #movie {
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#content .youtube {
	margin-left: auto;
	margin-right: auto;
}

/* Styles for side panel */
#outerWrapper #contentWrapper #sidePanel {
	float: right;
	width: 240px;
	padding-bottom: 20px;
	padding-right: 0px;
	margin-top: 0px;
}

#sidePanel h2 {
	color: #999;
	padding-left: 15px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	font-style: normal;
	line-height: 18px;
	font-weight: bold;
	text-transform: uppercase;
	margin: 0px;
	letter-spacing: 3px;
	background: transparent url(images/sidePanel_header.png) repeat-x left top;
	border: 1px solid #272727;
}

#sidePanel p {
	color: #9c0;
	font-size: medium;
	line-height: normal;
	text-align: center;
	font-variant: small-caps;
}

/* Background and border for side panel boxes */
.sidePanel-border {
	border: 1px solid #272727;
	margin: 0 0 10px 0;
	background-color: #000;
	padding: 10px 10px 10px 10px;
}

#sidePanel img {
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 10px;
}

/* Styles dividing lines between items in side panel if horz rule used */
#sidePanel hr {
	background-color: #333;
	color: #333;
	height: 1px;
	border: 0;
}

/* Navigation links in the sidebar. */
#sidePanel ul {
	margin: 0px;
	padding: 0 0 0 0;
}

#sidePanel ul li {
	list-style: none;
	display: inline;
}

#sidePanel ul li a {
	padding: 4px 4px 4px 6px;
	color: #999;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 16px;
	font-weight: normal;
	line-height: 16px;
	letter-spacing: -1px;
	display: block;
	background-color: #000;
}

#sidePanel ul li a:hover {
	text-decoration: none;
	color: #9c0;
	background-color: #202020;
}

#sidePanel ul li .current {
	margin-left: -10px;
	border-left: 10px #9c0 solid;
	color: #9c0;
}

.sidePanel-border p {
	margin-top: 7px;
	margin-bottom: 7px;
}

#sidePanel .twitter-follow-button {
	display: block;
	padding-left: 35px;
	/*margin-left: auto;
	margin-right: auto;*/
}

/* For the contact form on contact page */
#contactForm {
	margin: 30px 10px 20px 0px;
	border: 1px solid #666;
	padding: 0 10px 0 20px;
	background-color: #272727;
}

#contactForm p {
	margin: 15px 0px 0px 0px;
}

fieldset {
	border: none;
}

.emailAddr {
	width:50%;
	margin-top:0px;
}

.comment {
	width:90%;
	height:180px;
	margin-top:0px;
}

.submitButton {
	float: right;
	margin-right: 55px;
}

.required {
	font-size:9px;
	color:#C00;
}

/*==================================================================
  Footer
  ==================================================================*/
#outerWrapper #footer {
	width: 100%;
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}

#footer p {
	color: #888;
	text-align: right;
	font-size: x-small;
}