html, body { margin:0; padding:0; font: 14px/18px "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif; color: #A0A0A0; background: #000; height: 100% }

#outer{ min-height: 100%; margin-bottom: -38px; }
* html #outer { height: 100%; } /* ie 3 pixel jog*/ 
#clearfooter { clear: both; height: 40px;} /*needed to make room for footer*/
#footer { width: 100%; clear: both; height: 36px; position: relative; }
#footerinner { width: 996px; margin: 0 auto; padding: 5px 0px 5px 5px; color: #606060; border-top: dotted 1px #606060; clear: left; font-size: 11px; text-align: left; }

#topbar { width: 100%; height:72px; border-bottom: solid 1px #404040; background-color: black; }
#logobar { width: 996px; height: 72px; margin: 0 auto; }
#logo { position: relative; float: left; background: url(/imgs/trancreative_logo.png) no-repeat; width: 100px; height: 26px; margin-top: 18px; cursor: pointer; padding-top: 10px; padding-left: 250px; font-size: 18px; }
#logo:hover { background-position: 0px -36px; }
#logo a { text-decoration: none; color: #808080}
#navlinks { position: relative; float: right; margin-top: 20px; color: #A0A0A0; font-size: 14px; }
#navlinks div { float: left;  padding: 6px 20px 6px 20px; }
.navlinkselected { border: solid 1px #404040; }
#navlinks a { color: #A0A0A0; text-decoration: none; }
#navlinks div:hover a { color: white; }

#highlightbar { background: url(/imgs/background.jpg) top repeat-x; background-color: #3e3e3e; width:100%; height:648px; margin:0 auto; color: #E0E0E0; border-top: solid 1px #202020; }
#highlightcell { position: relative; width:996px; height:648px; margin:0 auto; padding: 20px 10px 10px 10px; }
#bighighlightbar { position: relative; background: url(/imgs/bigbackground.jpg) top repeat-x; background-color: #000; width:100%; height:auto; margin:0 auto; color: #E0E0E0; border-top: solid 1px #202020; }
#bighighlightcell { position: relative; width:996px; margin:0 auto; padding: 20px 10px 10px 10px; }
.leftcolumn { float: left; width: 580px; height: 648px; }
.leftcolumn3x4 { float: left; width: 540px; height: 648px; }
.leftcolumn4x3 { float: left; width: 450px; height: 648px; }
.leftcolumnwide { float: left; width: 480px; height: 648px; }
.leftcolumnfull { float: left; width: 490px; height: 648px; }

#appicon { position: absolute; left: 10px; top: 26px;}
#appstoreprice { position: absolute; left: 500px; top: 26px;}
#windowsphoneprice { position: absolute; left: 470px; top: 26px;}
#apptitle { padding-left: 104px; text-transform: uppercase; font-family: Impact; font-size: 50px; line-height: 50px; }
#appsubtitle { padding-left: 104px; font-family: Arial; font-size: 18px; font-weight: bold; text-transform: uppercase; text-shadow: #000 0px 2px 2px;}
.screen3x4 { position: absolute; top: 10px; right:44px; width:360px; height:480px; }
.screen4x3 { position: absolute; top: 58px; right:57px; width:424px; height:318px; }
.screenwide { position: absolute; top: 95px; right:34px; width:440px; height:275px; }
.screenfull { position: absolute; top: 95px; right:34px; width:440px; height:330px; }
#screenshots img { display: none; position: absolute; bottom:0; right:0; }
#screencast embed { position:absolute; bottom:0; right:0; }
/* #thumbs { display: none; } */
#thumbs img { opacity: 0.5; MozOpacity:0.5; filter: alpha(opacity=50); }
.screenshotthumbs { position: absolute; float: left; top: 440px; width: 540px; color: #8080A0; }
.screenshotthumbs4x3 { position: absolute; float: right; top: 450px; right: 0px; width: 490px; color: #8080A0; }
.screenshotthumbswide { position: absolute; float: left; top: 440px; width: 490px; color: #8080A0; }
.clipout { position:relative; width:90px; height:90px; top:0px; left:0px; }
.clipin { position:absolute; clip:rect(0px 90px 90px 0px); top:0px; left:0px; }
.thumbshadow { float: left; width: 90px; height: 90px; background: url(/imgs/thumbreflect.png) top left no-repeat; padding: 5px 5px 25px 5px; margin-right: 5px; }
.thumbshadow:hover { background: url(/imgs/thumbreflect_hover.png) top left no-repeat; }
.thumbnoborder {float: left; width: 90px; height: 90px; padding: 5px 5px 5px 5px; margin-right: 10px; }
#captions { float: left; clear: left; }
#captions div { display: none; }

#underbar { width:996px; margin:0 auto; padding: 5px 10px 25px 10px; }
#moreinfo { float: left; width: 590px; margin: -34px auto; padding-bottom: 45px; }
#specification { float: left; width: 380px; margin: -34px auto; padding-left: 26px; padding-bottom: 25px; }

.nowavailable { color: #C0C0C0; background: #444; margin-top: 20px; margin-bottom: 15px; padding: 4px; text-align: center; font-size: 10pt; border-left: solid 1px #303030; border-top: solid 1px #303030; border-bottom: solid 1px #606060; border-right: solid 1px #606060; 
                -webkit-border-radius: 6px;}
.nowavailable a { color: #30A0FF; }
.nowavailable a:hover { color: #50C0FF; }
.reviewquote { margin-top: 30px; margin-bottom: 0px; padding-bottom: 0px; color: White; font-family: Georgia, Serif; font-size: 16px; font-style: italic;}
.reviewauthor { margin-top: 5px; padding-top: 0px; font-family: Georgia, Serif; text-align: right; }
.reviewauthor a { color: #D0D0D0; }

#download { color: #404040; }
#download a { color: #0000FF; text-decoration: underline; font-weight: bold; }

a { color: #FFFFFF; text-decoration: none; }
a:hover { color: #FFFFFF; text-decoration: underline; }

img { border: none;}
h1 { font-size: 40px; line-height: 40px; text-align: left; margin: 5px 0px 5px 0px; text-shadow: #000 0px 2px 2px; font-family: Arial; }
h2 { font-size: 30px; text-align: left; margin: 5px 0px 5px 0px; line-height: 40px; }

#helpdesknav { position: relative; float: left; width: 170px; height: 250px; background-color: #E0E0E0; padding: 10px 5px 10px 0px; margin-top: 20px;}
#helpdeskcontent { position: relative; float: right; width: 800px; padding: 10px 5px 10px 5px; }