/*
    Sparkplugs
    style.css - CSS stylesheet

	Hello, and welcome to the source code for the
	Sparkplugs website. There is plenty of
	HTML5 goodness and CSS3 magic here, so feel free
	to poke around and let me know what you think.

	Thanks!

	Jamie Rumbelow
	http://jamierumbelow.net

	(c)2010 Sparkplugs
*/

.clear { clear: both; }
.act a:hover { opacity: 0.7; }

.act a {
    text-align: center;
}

.tooltip .act .docs {
    width: 50px;
    background: #ff9c00;
    padding: 10px;
    margin: 10px auto 5px auto;
    display: block;
    
/*    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; */
}

input.save {
    width: 100px;
	border: 0;
    background: #ff9c00;
    padding: 5px;
    font-family: "Helvetica Nueu", Helvetica, Arial, sans-serif;
	font-size: 14px;
	float: right;
}

input.save.blue {
	background: #0072E6;
	color: #FFFFFF;
	float: left;
}

a.save {
    width: 150px;
	border: 0;
    background: #ff9c00;
    padding: 5px;
    font-family: "Helvetica Nueu", Helvetica, Arial, sans-serif;
	font-size: 14px;
	float: right;
}

a.save:hover {
	opacity: 0.6;
}

a.save.blue {
	width: 100px;
	background: #0072E6;
	color: #FFFFFF;
	float: left;
}

#main #total {
	width: 100%;
	margin: 0 auto auto;
	padding-top: 10px;
	margin-top: 15px;
}

#main #total p {
	position: relative;
	top: 30px;
}

#main #total input, #main #total a {
	padding: 10px;
	text-decoration: none;
}

#main #total .blue {
	float: right;
	margin: 2px 10px 10px 0;
}

#main .discount input[type="text"] {
	padding: 7px;
	width: 200px;
}

#main .discount input[type="submit"] {
	float: none;
	padding: 7px;
}

#total, .discount {
	width: 100%;
	text-align: left;
	margin: 25px auto;
}

.discount {
	margin-top: 10px;
}

#content.cart h3 {
	margin: 10px 0;
	text-align: left;
}

#cart small {
	font-size: 12px;
	display: block;
	font-style: italic;
}

.discount small {
	font-size: 12px;
	font-style: italic;
}

input.save:hover {
	cursor: pointer;
	opacity: 0.6;
}

strong { font-weight: bold; }

nav .cart {
    width: 40px;
    background: #6ED91F;
    padding: 10px;
    display: block;
    text-align: center;
    
/*    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; */
}

nav .cart:hover {
    opacity: 0.7;
    background: #6ED91F;
}

.act .support {
    width: 70px;
    background: #FF003C;
    padding: 10px;
}

.act .docs {
    width: 50px;
    background: #ff9c00;
    padding: 10px;
}

.tooltip .act .support {
    width: 70px;
    background: #FF003C;
    padding: 10px;
    margin: 10px auto 5px auto;
    display: block;
    
/*    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; */
}

.tooltip .act {
    float: left;
    margin: 22px 0 25px 25px;
    width: 120px;
}

.tooltip {
   position: absolute;
   z-index: 3;
   display: none;
   margin-top: -15px;
   width: 400px;
   height: 150px;
   background: rgba(0,0,0,0.6);
   color: #CCC;
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}

table {
    margin: 40px;
    float: right;
}

table th {
    font-style: italic;
    font-size: 15px;
    text-align: center;
}

table td {
    font-size: 30px;
    padding: 10px;
}

body {
    background: #FFFFFF;
    font-family: "Helvetica Nueu", Helvetica, Arial, sans-serif;
    margin: 0;
	font-size: 15px;
}

a {
    color: #000000;
    text-decoration: none;
}

header {
    width: 900px;
    margin: 50px auto 50px auto;
    display: block;
}

header h1 {
    float: left;
}

header nav {
    margin: 0 10px;
}

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

header nav ul li {
    display: inline;
}

header nav ul li a {
    float: left;
    padding: 10px;
    margin: 0 5px;
}

header nav ul li a:hover {
    background: #F0B73B;
}

header nav ul li a.signin {
    background: #F0B73B;
/*    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; */
}

header nav ul li a.signin:hover {
    opacity: 0.7;
}

#outer-header {
    background: #2E2E2E;
}

header#bar {
    margin: 0 auto;
    padding: 15px;
}

header#bar h1 {
    padding: 10px;
    background: #FFFFFF;
}

header#bar ul li a, header#bar ul li a.signin, header#bar ul li a.cart {
    color: #DDD;
    background: none;
}

header#bar ul li a:hover {
    background: none;
    opacity: 0.7;
}

#outer-breadcrumb {
	background: #EEE;
}

#breadcrumb {
	width: 900px;
	margin: 0 auto 15px auto;
	padding: 15px;
	font-size: 12px;
}

.homepagemessage {
    width: 900px;
    color: #2E2E2E;
    margin: 10px auto;
    text-align: center;
    line-height: 35px;
}

h2.homepagemessage {
    font-size: 32px;
    font-weight: bold;
    margin-top: 50px;
}

h3.homepagemessage {
    font-size: 22px;
    color: #F0B73B;
}

#content.docs pre:hover { width: 860px; z-index: 10; }

article a { text-decoration: underline; }
article a:hover { text-decoration: none; }

article a.nounderline, #right a { text-decoration: none; }

article {
    width: 900px;
    height: 224px;
    margin: 70px auto 25px auto;
    display: block;
}

article#taggable { background: url(/assets/images/taggable.png) no-repeat right; }
article#mojoblog { background: url(/assets/images/mojoblog-faded.png) no-repeat right; }

article#taggable h2, article#mojoblog h2 { padding-top: 25px; }

article h2 {
	width: 100%;
	text-align: left;
	margin-top: 20px;
}

#content.docs h3 {
	margin-top: 25px;
}

article h2 a {
    font-size: 36px;
    color: #445;
    line-height: 1.3;
	text-decoration: none;
}

article h2 a:hover {
    opacity: 0.6;
}

article h3 {
    font-size: 21px;
    font-style: italic;
    color: #999;
    line-height: 1.2;
    width: 350px;
	text-align: left;
	margin-top: 10px;
	font-family: Georgia;
}

article #titles {
	width: 350px;
	float: left;
}

body a.buy.Blue, nav#smaller-links a.buy.Blue { background: #0072E6; color: #FFF; }

nav#smaller-links .left a.selected { font-weight: bold; }

article .act .buy {
    background: #6ED91F;
    padding: 10px;
    margin-top: 10px;
    
/*    border-radius: 15px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px; */
}

article .act .Yellow {
    background: #F0B73B;
}

aside#extras {
    display: block;
    width: 900px;
    margin: 10px auto;
    padding: 10px 0;
    border-top: 1px solid #CCC;
}

aside#extras ul li {
    width: 270px;
    padding: 15px 30px 0 0;
    float: left;
    display: block;
    margin-top: 10px;
}

aside#extras ul li h3 {
    font-size: 25px;
    color: #333;
}

aside#extras ul li p {
    color: #666;
    font-style: italic;
    margin: 15px 0;
    line-height: 1.5;
}

aside#extras .act .download {
    width: 75px;
    background: #0072E6;
    padding: 10px;
    color: #FFFFFF;
    margin-top: 10px;
    display: block;
    font-style: normal;
}

article#main {
    margin: 0 auto;
    text-align: center;
    background: none;
    height: 180px;
}

ul#buyandstuff.act {
	width: 400px;
	float: right;
	text-align: right;
	margin-top: 60px;
}

ul#buyandstuff.act li a.support, ul#buyandstuff.act li a.buy { 
	float: right;
	margin: 0;
	text-decoration: none;
}

#main .act {
    width: 300px;
    margin: 0 auto;
}

#main .act .buy {
    float: left;
}

#main .act .docs {
    display: block;
    float: left;
    margin: 10px;
}

#main .act .support {
    display: block;
    float: left;
    margin: 10px 0 0 0;
}

nav#smaller-links {
    width: 900px;
	margin: 0 auto;
    display: block;
	background: #EEE;
}

nav#smaller-links .buy {
    background: #6ED91F;
    padding: 10px;
    display: block;
}

nav#smaller-links .buy:hover, nav#smaller-links .support:hover {
    opacity: 0.6;
    color: #000000;
}

nav#smaller-links .left {
    float: left;
}

nav#smaller-links .right {
    float: right;
}

nav#smaller-links ul li {
    display: inline;
}

nav#smaller-links ul li a {
    float: left;
    padding: 10px;
}

nav#smaller-links ul li a:hover {
    color: #666;
}

article.taggable { background: url(/assets/images/taggable-banner.png) no-repeat; }
article.mojoblog { background: url(/assets/images/mojoblog-banner.png) no-repeat; }

article#content {
    margin-top: 10px;
    padding-top: 180px;
    height: 100%;
}

article#content aside#leftmain {
    width: 450px;
    display: block;
    float: left;
}

article#content aside#rightmain {
    display: block;
    float: left;
    width: 450px;
}

article#content aside#woop-left, article#content aside#woop-right {
	width: 450px;
	float: left;
}

article#content aside#woop .box {
	width: 445px;
	margin-right: 5px;
	float: left;
	clear: none;
}

article#content aside#left {
    width: 600px;
    display: block;
    float: left;
    margin-bottom: 25px;
}

article#content.login {
	padding-top: 25px;
	text-align: left;
}

article#main.loginner {
	height: 100%;
}

article#content.login label {
	display: block;
	font-weight: bold;
	text-align: left;
}

article#content.login input {
	padding: 10px;
	width: 220px;
}

article#content.login p {
	margin-bottom: 25px;
	padding-left: 0;
}

article#content.login #submit {
	clear: left;
	margin: 0 auto;
	width: 100px;
}

article#content.login #submit input {
	width: 100px;
    background: #ff9c00;
    padding: 10px;
    margin: 10px auto 5px auto;
    display: block;
	border: 0;
	font-size: 15px;
}

article#content.login #submit input:hover {
	opacity: 0.6;
	cursor: pointer;
}

#content dfn {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #00620C;
 font-weight: bold;
 font-style: normal;
}
#content var {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #8F5B00;
 font-weight: bold;
 font-style: normal;
}
#content samp {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #480091;
 font-weight: bold;
 font-style: normal;
}
#content kbd {
 font-family: Lucida Grande, Verdana, Geneva, Sans-serif;
 color: #A70000;
 font-weight: bold;
 font-style: normal;
}

.important {
 background: #FBE6F2;
 border: 1px solid #D893A1;
 color: #333;
 margin: 10px 0 5px 0;
 padding: 10px;
}

.success {
background-color: #CFC;
  border: solid 1px #6C6;
padding: 5px 8px;
}

article#content aside#right {
    display: block;
    float: left;
    width: 250px;
}

article#content ul {
    list-style-type: square;
    margin-left: 35px;
}

article#content ul ul {
    list-style-type: circle;
    margin: 5px 20px;
}

article#content ul li {
    margin-top: 5px;
}

article#content h4 {
    margin: 25px 10px 10px 10px;
}

article#content .

article#content table {
    background: #EEE;
    border: 1px solid #999;
}

article#content table th {
    text-align: left;
    padding: 10px;
    background: #DDD;
    font-style: normal;
    font-weight: bold;
}

article#content table td {
    font-size: 15px;
    line-height: 1.5;
    border-top: 1px solid #999;
}

article#content aside#right ul li a:hover {
    opacity: 0.6;
}

article#content p {
    line-height: 1.5;
    color: #444;
    padding: 0 10px;
}

article#content pre {
    background: #DDD;
    padding: 20px;
    width: 550px;
    margin: 15px 0;
    font-family: monospace;
    white-space: -moz-pre-wrap; /* Mozilla, supported since 1999 */
    white-space: -pre-wrap; /* Opera 4 - 6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    white-space: pre-wrap; /* CSS3 - Text module (Candidate Recommendation) http://www.w3.org/TR/css3-text/#white-space */
    word-wrap: break-word; /* IE 5.5+ */
	font-size: 14px;
}

article#content p.first {
    padding: 5px 10px 0 10px;
}

article#content .box {
	clear: both;
    padding: 10px 0;
	margin-bottom: 30px;
}
 
article#content .box img.imageleft {
	float: left;
	margin-right: 10px;
}
 
article#content .box img.imageright {
	float: right;
	margin-left: 10px;
}
 
article#content h3 {
	font-style: italic;
	color: #666;
	width: 100%;
	font-weight: normal;
	padding: 0 10px 10px 10px;
	font-family: Georgia;
}
 
article#content .box p {
	margin-bottom: 0;
	line-height: 1.5;
}

article#content dl {
	margin: 25px 25px;
}

article#content dt {
	font-weight: bold;
	font-family: Menlo, Monaco, monospace;
	color: #333;
	margin: 2em 0 1em 0;
}

article#content #testimonials {
    width: 880px;
    margin: 0 auto 0 auto;
    margin-right: 16px;
	clear: both;
    padding: 10px;
    background: #EEE url(/assets/images/quotes.png) no-repeat bottom right;
}

article#content #testimonials .testimonial {
    width: 260px;
    padding: 10px;
    float: left;
    font-size: 15px;
    color: #999;
}

article#content #testimonials .testimonial a {
    text-decoration: none;
    display: block;
    padding: 10px;
    color: #555;
}

article#content #testimonials .testimonial a:hover {
    background: #CCC;
}

article#content #testimonials .testimonial a blockquote {
    float: right;
    width: 150px;
    font-style: italic;
    line-height: 1.3;
}

article#content #testimonials .testimonial a .author strong {
    margin: 5px 0 0 0;
    display: block;
}

article#content #middlemain {
    clear: both;
    width: 900px;
    display: block;
    margin: 10px auto;
    text-align: center;
    float: left;
}

article#content #middlemain h3 {
    clear: both;
}

article#content #middlemain ul.moremoremore {
    width: 840px;
    margin: 20px auto;
}

article#content #middlemain ul.moremoremore li {
    display: block;
    float: left;
    padding: 5px 20px;
}

article#content #middlemain ul.moremoremore img {
    padding: 0 10px;
}

article#content #middlemain .buy {
    margin: 20px auto;
}

article#content .comparison {
    margin: 25px 0;
	float: none;
}

article#content .comparison tr td {
	line-height: 1;
	border: none;
}

article.releasenotes table {
    margin: 0;
    background: none;
    border: 0;
    float: left;
    width: 100%;
}

article.releasenotes p, article.releasenotes ul li {
    font-size: 15px;
}

article#content.gallery ul {
    list-style: none;
}

article#content.gallery ul li {
	margin-left: -25px;
}

article#content.releasenotes ul {
    margin-bottom: 10px;
}

article.releasenotes ul li {
    list-style-type: square;
}

article.releasenotes tr {
    border-top: 1px dashed #CCC;
}

article.releasenotes tr.current, article#content.releasenotes tr.current td {
    border-top: none;
}

article#content.releasenotes table tr td h3 {
    margin: 0;
}

article#content.releasenotes table tr td p {
    padding-bottom: 10px;
}

aside#licenses {
	width: 900px;
	margin: 0 auto;
}

aside#licenses h3 {
	width: 900px;
	text-align: left;
	margin: 25px 0;
	padding: 0;
}

aside#licenses table {
	width: 900px;
	margin: 0 auto;
	float: none;
}

aside#licenses table td {
	vertical-align: middle;
}

aside#licenses table th {
	background: rgb(46,46,46);
	color: #FFFFFF;
	font-weight: normal;
}

aside#settings {
	clear: both;
    width: 900px;
    display: block;
    margin: 10px auto;
    text-align: center;
    float: left;
}

aside#settings h3 {
	width: 900px;
	text-align: left;
	margin: 25px 0;
	padding: 0;
}

aside#settings form {
	margin: 0;
	padding: 0;
	width: 600px;
}

aside#settings label {
	font-weight: bold;
	float: left;
	display: block;
	width: 200px;
	padding: 0;
	clear: left;
	text-align: left;
}

aside#settings input {
	width: 200px;
	padding: 5px;
}


aside#settings p {
	margin: 10px 0;
	padding: 0;
	clear: left;
}

#content.cart {
	padding-top: 150px;
	width: 100%;
}

table#cart {
	float: none;
	width: 100%;
	margin: 0 auto;
}

footer {
    width: 900px;
    height: 100px;
    margin: 25px auto 0 auto;
    padding: 20px 0;
    display: block;
    border-top: 1px solid #CCC;
    color: #666;
    clear: both;
	line-height: 1.5;
}