@charset "utf-8"; 

*{margin:0; padding:0; outline:0}
img{border:0}
.clear{clear:both}


::selection{background:#EAA0FA}
::-moz-selection{background:#EAA0FA}

body{font:0.74em Arial,Verdana,Arial,Helvetica,sans-serif; background:#f4f4f4 url(../images/bg.png) repeat-x; color:#777; line-height:1.6em}

a{color:#3F3E44; text-decoration:none}
a:hover{color:#000}

p{margin:0 0 12px}

h1{clear:both; color:#fff; font-size:1.7em; float:left}
h1 span{color:#D1D1D3}
h1 a{color:#fff}

h2{clear:both; float:left; text-align:center; font-size:2.94em; color:#fff; line-height:1.6em; }

h3{font-size:1.4em; color:#424248; margin:0 0 10px}

#top{height:68px}

#menu{float:right; padding:20px 0 0}
#menu li{display:inline; list-style:none; font-size:1.1em}
#menu li a{float:left; margin:0 0 0 25px; padding:0 5px 10px; color:#A09FA8}
#menu li a:hover, #menu li a.current{background:url(../images/tab.png) repeat-x left bottom}
#menu li a.current{color:#fff}

#content{width:800px; margin:15px auto}

#logo{padding:20px 0 0}

#pitch{clear:both; text-align:center; height:20px; padding:45px 0 45px 0; margin:0 0 80px;}
#hello{width:800px; margin:0 auto 0 auto; text-align:center;}

#col{clear:both; margin:0 0 45px; padding-bottom:2px; background:url(../images/tab.png) repeat-x left bottom}
#cols{clear:both; margin:0; background:url(../images/shade.png) no-repeat center bottom}
.col{float:left; width:239px; margin:0 25px 0 0; padding:0 15px 20px 0; border-right:1px dotted #ddd}
.col.last{margin-right:0; border:0; padding-right:0}

.more{display:block; position:relative; color:#ddd; background:url(../images/bg.png) 0 -278px repeat-x; text-align:center; width:87px; height:21px; padding:3px 0 0; font-size:.84em; text-transform:uppercase}
.more:hover{background-position:0 -64px; color:#fff}

#screenshots{clear:both; position:relative; margin:0 0 40px}
#screenshots .scrollable{position:relative; overflow:hidden; width:400px; height:250px}
#screenshots .scrollable .items{width:20000em; position:absolute}

#screenshots .items ul{list-style:none; float:left; width:400px;}
#screenshots .items ul li{float:left}
#screenshots .items ul li a{float:left; width:172px; height:103px; padding:10px 0 0 10px; margin:10px 10px 0 0; overflow:hidden; background:url(../images/thumb_frame.png) no-repeat}

#screenshots a.arrows{display:block; width:12px; height:21px; text-indent:-999999px; background:url(../images/arrows.png) no-repeat; top:50px}
#screenshots a.prev{background-position:top left; position:absolute; left:-50px}
#screenshots a.next{background-position:top right; position:absolute; right:-50px}
#screenshots a.prev:hover{background-position:left bottom}
#screenshots a.next:hover{background-position:right bottom}

#screenshots h3{margin:0 0 20px}

#main{float:left; width:400px; margin:0 0 40px}
#main p strong{color:#3F3E44}
#main ol{margin-left:20px;}

.main{float:left; width:400px; margin:0 0 40px}
.main p strong{color:#3F3E44}
.main ol{margin-left:20px;}

#side{float:right; width:365px; margin:0 0 40px}

.boxtop{background:url(../images/boxtop.png) no-repeat; padding:4px 0}
.boxmiddle{background:url(../images/boxmiddle.png); padding:0 5px; height:200px}
.boxbottom{background:url(../images/boxbottom.png) no-repeat left bottom; padding:5px 0; margin-bottom:25px;}

#footer{clear:both; background:url(../images/tab.png) repeat-x; padding:40px 0 20px; color:#999; text-shadow:1px 1px 1px #fff}
#footer-menu{float:right; padding:0}
#footer-menu li{display:inline; list-style:none; font-size:1.1em}
#footer-menu li a{float:left; margin:0 0 0 20px; padding:0 5px 10px; color:#A09FA8}
#footer-menu li a:hover, #menu li a.current{background:url(../images/tab.png) repeat-x left bottom}
#footer-menu li a.current{color:#fff}