
body {
    background: #9C9C9C;
    font-family: "Lucida Grande", sans-serif;
    font-size: 12px;
}

.background {
    position: absolute;
    top: 0px;
    left: 0px;
    background: -webkit-gradient(linear, left top, left bottom, from(#C3C3E3), to(#9C9C9C));
    height: 500px;
    width: 100%;
}

.center {
    position: relative;
    width: 850px;
    margin: 0px auto;
}

.body {
    position: relative;
    height: 100%;
    width: 850px;
    background: white;
    padding-bottom: 30px;
    -webkit-box-shadow: 2px 2px 6px #4B4B55;
    -webkit-border-bottom-right-radius: 8px;
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomright: 8px;
    -moz-border-radius-bottomleft: 8px;
}

h1 {
	font-family: "Lucida Grande", sans-serif;
	font-size: 16px;
	font-weight: bold;
	color: #000000;
	margin-top: 16px;
	margin-bottom: 9px;
    text-shadow: #bbb 2px 2px 5px;
}

strong {
    font-weight: bold;
}

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

.header {
    position: relative;
    height: 80px;
    background: white;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), color-stop(0.7,#ffffff), to(#d8d8d8));
    z-index: 1;
}

.header .separator {
    position: absolute;
    top: 80px;
    width: 100%;
    height: 6px;
    background: #5A7187;
    background: -webkit-gradient(linear, left top, left bottom, from(#efefef), to(#5A7187));
    z-index: 2;
}

.header img.logo {
    position: absolute;
    top: 8px;
    left: 18px;
    height: 78px;
    width: 217px;
}

.header ul.navbar {
    float: right;
    margin-right: 30px;
    height: 25px;
    padding-left: 10px;
    /* this is too gaudy
    -webkit-box-reflect: below 2px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.5, transparent), to(white));
    */
}

.header ul.navbar li {
    background: #1D419E;
    background: -webkit-gradient(linear, left top, left bottom, from(#E5E5E5), to(#1D419E));
    padding: 3px 8px;
    border-left: 1px solid #ABABB2;
    border-bottom: 1px solid #ABABB2;
    float: left;
    cursor: pointer;
    -webkit-box-shadow: 1px 1px 4px #ABABB2;
}

.header ul.navbar li:first-child {
    -webkit-border-bottom-left-radius: 8px;
    -moz-border-radius-bottomleft: 8px;
}

.header ul.navbar li:last-child {
    border-right: 1px solid #ABABB2;
    -webkit-border-bottom-right-radius: 8px;
    -moz-border-radius-bottomright: 8px;
}

.header ul.navbar li:hover {
    background: #2456D6;
    background: -webkit-gradient(linear, left top, left bottom, from(#F1F1F1), to(#2456D6));
}

.header ul.navbar li a {
    color: #ffffff;
    font-size: 15px;
    text-decoration: none;
    text-shadow: #FFFFFF 0px 0px 1px;
    -webkit-transition-duration: 600ms;
}

.header ul.navbar li:hover a {
    text-shadow: #A3F3FF 0px 0px 7px;
    -webkit-transition-duration: 400ms;
}

.content {
    clear: both;
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 500;
    min-height: 400px;
    padding: 8px;
}

.sidebar {
	float: right;
	width: 214px;
	margin: 15px;
	font-size: 10pt;
}

.sidebar .product {
    text-align: center;
    margin-bottom: 25px;
}

.sidebar .product img {
    -webkit-transition-duration: 200ms;
}

.sidebar .product:hover img {
    -webkit-transform: scale(1.2) rotate(-10deg);
    -webkit-transition-duration: 200ms;
}

.sidebar .product .product-name {
    position: relative;
	text-align: center;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	font-weight: bold;
	font-variant: normal;
	letter-spacing: 2px;
	text-decoration: none;
	z-index: 2;
}

.sidebar .product .product-name a {
    color: #557;
    text-shadow: #aaa 2px 3px 3px;
    text-decoration: none;
}

.sidebar .product:hover .product-name a {
    text-shadow: #FFF544 2px 3px 6px;
}

.tabtop {
	font-family: "Lucida Grande", sans-serif;
	font-size: 14px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: center;
	height: 25px;
	vertical-align: middle;
	background-repeat: no-repeat;
}

div.tabtop {
    width: 214px;
    background: #003467;
    background: -webkit-gradient(linear, left top, left bottom, from(#00468A), to(#003467));
    text-shadow: #0074DF 1px 1px 3px;
    -webkit-border-top-left-radius: 8px;
    -webkit-border-top-right-radius: 8px;
    -moz-border-radius-topleft: 8px;
    -moz-border-radius-topright: 8px;
    line-height: 24px;
}

td.tabtop {
	background: transparent url(/images/sidetab.gif) no-repeat center;
}

.tab,
.texttab {
	font-family: "Lucida Grande", sans-serif;
	font-size: 10pt;
	color: #000000;
	background-color: #CCCCCC;
	white-space: normal;
}

div.tab,
div.texttab {
    width: 214px;
	padding: 6px 0px;
    margin-bottom: 18px;
}

.tab {
	text-align: center;
}

.tab p {
    margin: 3px;
}

.tab .screenshot {
    margin: 16px;
}

.texttab {
}

.texttab h4 {
    font-size: 13px;
    font-weight: bold;
    height: 16px;
    margin: 8px 6px 4px 6px;
}

.texttab p {
    margin: 13px 6px;
}

.texttab ul {
	margin-left: 24px;
	margin-right: 6px;
	font-size: 12px;
}

.texttab ul li {
    list-style: disc;
}

div.mac-universal {
    margin-top: 40px;
	text-align: center;
}

div.mac-universal p {
    margin-top: 11px;
}

.text {
	width: 560px;
	margin: 20px;
	font-family: "Lucida Grande";
	font-size: 10pt;
}

.float {
	float: right;
}

.float-left {
	float: left;
}


.thumb {
	margin: 12px;
	float: left;
}

.copyright {
    text-align: right;
    color: white;
    width: 850px;
    margin: 7px auto;
    font-size: 10px;
}

#video {
    position: relative;
    width: 195px;
    height: 130px;
    margin-left: 10px;
}

#video .play-overlay {
    position: absolute;
    width: 64px;
    height: 64px;
    top: 33px;
    left: 65px;
    background: transparent url(/images/play.png) no-repeat scroll;
    opacity: .6;
    -webkit-transition-duration: 600ms;
}

#video:hover .play-overlay {
    opacity: 1.0;
    -webkit-transition-duration: 600ms;
}

#video #movie {
    position: absolute;
    background: gray;
    z-index: 2;
    padding: 10px;
    -webkit-box-shadow: 0px 0px 10px #333;
}

#video .fullsize {
    width: 720px;
    height: 500px;
    top: -280px;
    left: -580px;
}

#video #movie #close {
    position: absolute;
    background: transparent url(/images/close.png) no-repeat scroll;
    width: 24px;
    height: 24px;
    top: -12px;
    left: -12px;
    z-index: 3;
    cursor: pointer;
}
