/* -------------------------------------------------------------- 
  
   Boilerplate Screen Styles
   * Version:   0.5 (2007-11-19)
   
-------------------------------------------------------------- */

@import "reset.css";
@import "typography.css";

html, body { height: 100%; }

html {background-color: #fff; background-image: url(../img/header_bg.png); background-repeat: repeat-x;}

/* Page
-------------------------------------------------------------- */

#page { position: relative; margin: 0 auto; width: 950px; height:100%; text-align:center; text-shadow: rgba(255,255,255,0.5) 0px 1px 0px; }
/* Header
-------------------------------------------------------------- */

#header { 
  height: 107px;
	font-weight: bold;
}

#header .buttons {position: absolute; right: 20px; top: 50px;}
#header .buttons li { float: left; width: 90px; height: 51px; list-style: none; opacity:0.45;}
#header .buttons li img { display: block; margin-left:auto; margin-right:auto; margin-bottom:5px;} 
#header .buttons li  span {  display: block; margin-left:auto; margin-right:auto;}
#header .buttons a { color: #666; text-decoration: none; }
#header .buttons li:hover {opacity:1;}
#header .buttons li.active {opacity:1;}



#tas_logo { margin-left: 20px; margin-top: 10px;}

/* Body
-------------------------------------------------------------- */

#body { margin-top: 20px; text-align:left; color: #333; margin-bottom: 5em; width:950px;}
#body ul, #body ol { margin-left: 7em;} 
#body img { margin: 0 5px; }

#leftcolumn {
  float:left;
  width:525px;
}

#rightcolumn {
  float:left;
  width:400px;
}


.product, #about {
  margin: 10px; 
  padding: 15px; 
  background-image: url(../img/div_bg.png);
  background-repeat:repeat-x;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  font-size:135%;

}

#introduction { width: 480px; margin-right: 130px; position: relative;}

#resources { float: left; width: 230px; }
#resources h3 { color: #888; }
#resources ul, #resources ol { color: #888; }
#resources ul a { color: #555; }

.iphoneshot { position: relative; width: 200px; height: 411px; float:left; background-image: url(/img/iphone.png) !important; }
.iphoneshot img { position: absolute; left: 16px; top:61px; width: 161px; height: 242px;}
.iphoneshot.first { margin-left: 6em; }
.iphoneshot.center { position: absolute; left: 50%; margin-left: -100px; }
.iphoneshot.last { float: right; margin-right: 6em; }
hr.clr { display: block; height: 0; clear: both; visibility: hidden; }

#appstore { clear: both; position: relative; left: 50%; margin: 0; margin-left: -105px; margin-top:20px;}
.badge {position:absolute; top:-25px; left:-25px;}


/* tags*/
.tags { font-size:70%;}

/* Product div*/
.product { position: relative;}
.product .tags {position: absolute; right:10px; bottom:10px; background-image:url(../img/tags.png); background-repeat:no-repeat; padding-left:22px; font-size:70%; height:19px;}

/* About div */
#about { position:relative;}

/* Footer
-------------------------------------------------------------- */
#footer { width:950px; font-size:85%; border-top: 2px solid #999; margin-top: 20px; clear:both; color:#000; padding-top:3em; padding-bottom:0.5em;}

#footer .tabs { width: 405px; border-top: 3px solid #eee; }
#footer .tabs a { padding: 10px 30px 10px 0; color: #666; text-decoration: none; }

#footer p.quiet { color: #ccc; }