* {
  margin:0;
  padding:0;
  border:0;
}

html,body,#wrap {
  height:100%;
}
body > #wrap {
  height:auto;
  min-height:100%;
}
body {
  margin:auto;
  background:#0c0c0d url(../im/bg_main.jpg) repeat-x;
  font-family:HelveticaNeue Light, Helvetiva Neue-Light, HelveticaNeue, Arial, sans-serif;
  font-size:13px;
  line-height:140%;
  color:#aaa;
}

hr {
  height:1px;
  margin:0 0 20px 0;
  background:url(../im/bg_hr.png) repeat-x;
}

/* FLOATS */
.clearer{clear:both;}
div.clearer{clear:both;height:57px;}

/* PADDINGS */
.leftPad{padding:0 0 0 60px;}
.middlePad{padding:0 35px 0 10px;}
.rightPad{padding:0 60px 0 35px;}
.pad30x0{padding:30px 0 0 0;}
.blog .leftPad{width:540px;}
.front .leftPad{padding:0 0 0 45px;}

body, p, div, td, th, li {
  text-align:left;
}

p {
  margin:10px 0;
}

a, a:visited {
  text-decoration:none;
  color:#3093ed;
}
a:hover {
  text-decoration:underline;
}
.blog-post h2 a {
  color:#cfcfcf;
}

h1, h2, h3, h4, h5 {
  font-family:Georgia, serif;
  color:#cfcfcf;
  margin-bottom:0.3em;
}

#message {
  font:22px Georgia,serif;
  margin:43px 0;
  padding-left:5em;
  padding-right:5em;
  text-align:center;
  color:#cfcfcf;
}

/* FORMS AND BUTTONS */
.input {
  width:304px;
  height:13px;
  background:#333 url(../im/bg_form.jpg) no-repeat;
  color:#ccc;
  margin:2px 0;
  padding:5px;
  -moz-opacity:0.5;
  opacity:0.5;
}

.two{background-position: 0 -60px;}
.four{width:330px;}

.btnSubmit{background:url(../im/form_bird.png) no-repeat;height:24px;color:#fff;padding-left:30px;margin-bottom:5px;cursor:pointer;}
.btnSubmit:hover{text-decoration:underline;}
.btnSubmit {position:absolute;right:0;margin-top:6px;margin-bottom:6px;}
textarea {
  width:330px;
  height:200px;
  background:#333 url(../im/bg_form.jpg) no-repeat;
  color:#ccc;
  padding:5px;
  margin:2px 0;
  opacity:0.5;
}
.form p{margin:0 0 15px 0;color:#fff;font-weight: bold;}
.form p.notice{font-weight:normal;font-style:italic;}


/********************/
/* STRUCTURE STYLES */
/********************/
#container {
  position:relative;
  margin:0 auto;
  text-align:center;
  background:url(../im/bg_hilite.jpg) no-repeat;
  padding-bottom:152px;
}

#topBar {
  height:25px;
  width:100%;
  position:fixed;
  left:0;
  top:0;
  border-bottom:1px solid #383838;
  z-index:5;
}

.trans {
  height:25px;
  width:100%;
  position:absolute;
  left:0;
  top:0;
  background:#000;
  -moz-opacity:0.8;
  filter:alpha(opacity=80);
  opacity:0.8;
  z-index:6;
}

/* NAVMENU */
#navMenu{position:relative;margin:0 auto;width:960px;}
#navMenu ul{height:30px;display:table;_display:inline;list-style:none;float:right;white-space:nowrap;z-index:10;position:relative;}
#navMenu ul li{height:30px;display:table-cell;background:url(../im/nav_div.png) no-repeat right top;float:left;padding:2px 23px 0 23px;}
#navMenu ul li.last{background:none;padding-right:0;}
#navMenu ul li a{height:30px;display:block;}

#navMenu ul li a#home{background:url(../im/nav_home_on.png) no-repeat top center;width:28px;}
#navMenu ul li a#home:link,
#navMenu ul li a#home:visited{background:url(../im/nav_home_of.png) no-repeat top center;width:28px;}
#navMenu ul li a#home.active,
#navMenu ul li a#home:active,
#navMenu ul li a#home:hover{background:url(../im/nav_home_on.png) no-repeat top center;}

#navMenu ul li a#mac{background:url(../im/nav_mac_on.png) no-repeat top center;width:26px;}
#navMenu ul li a#mac:link,
#navMenu ul li a#mac:visited{background:url(../im/nav_mac_of.png) no-repeat top center;width:26px;}
#navMenu ul li a#mac.active,
#navMenu ul li a#mac:active,
#navMenu ul li a#mac:hover{background:url(../im/nav_mac_on.png) no-repeat top center;}

#navMenu ul li a#iphone{background:url(../im/nav_iphone_on.png) no-repeat top center;width:43px;}
#navMenu ul li a#iphone:link,
#navMenu ul li a#iphone:visited{background:url(../im/nav_iphone_of.png) no-repeat top center;width:43px;}
#navMenu ul li a#iphone.active,
#navMenu ul li a#iphone:active,
#navMenu ul li a#iphone:hover{background:url(../im/nav_iphone_on.png) no-repeat top center;}

#navMenu ul li a#blog{background:url(../im/nav_blog_on.png) no-repeat top center;width:26px;}
#navMenu ul li a#blog:link,
#navMenu ul li a#blog:visited{background:url(../im/nav_blog_of.png) no-repeat top center;width:26px;}
#navMenu ul li a#blog.active,
#navMenu ul li a#blog:active,
#navMenu ul li a#blog:hover{background:url(../im/nav_blog_on.png) no-repeat top center;}

#navMenu ul li a#store{background:url(../im/nav_store_on.png) no-repeat top center;width:38px;}
#navMenu ul li a#store:link,
#navMenu ul li a#store:visited{background:url(../im/nav_store_of.png) no-repeat top center;width:38px;}
#navMenu ul li a#store.active,
#navMenu ul li a#store:active,
#navMenu ul li a#store:hover{background:url(../im/nav_store_on.png) no-repeat top center;}

#navMenu ul li a#contact{background:url(../im/nav_contact_on.png) no-repeat top center;width:44px;}
#navMenu ul li a#contact:link,
#navMenu ul li a#contact:visited{background:url(../im/nav_contact_of.png) no-repeat top center;width:44px;}
#navMenu ul li a#contact.active,
#navMenu ul li a#contact:active,
#navMenu ul li a#contact:hover{background:url(../im/nav_contact_on.png) no-repeat top center;}

/* HEADER */
#header{position:relative;width:960px;height:142px;margin-top:57px;left:61px;float:left;}
#logo{background:url(../im/logo_main.png) no-repeat;display:block;height:70px;width:489px;position:absolute;left:66px;top:30px;}
#postit{background:url(../im/logo_postit.png) no-repeat;display:block;height:185px;width:193px;position:absolute;left:-20px;top:-15px;}
#postit a{display:block;height:185px;width:193px;}

/* FOOTER */
#footer {
  color:#333;
  background:url(../im/bg_footer.jpg) repeat-x;
  width:100%;
  position:relative;
  margin-top:-86px;
  height:86px;
  clear:both;
}
#happyfeet {
  background:url(../im/happyfeet.png) no-repeat;
  position:fixed;
  right:0px;
  bottom:0;
  width:261px;
  height:398px;
  z-index:-1;
}
#footer #info {
  float:left;
  margin-left:60px;
  margin-top:35px;
}
#footerLogo {
  float:right;
  margin-right:30px;
  margin-top:20px;
}

/* CONTENT */
.rightMenu{height:100%;width:174px;background:url(../im/bg_rightMenu.jpg) no-repeat;padding:18px 28px;z-index:3;position:relative;}
.front .rightMenu{height:100%;width:214px;padding:15px 0 40px 30px;margin:10px 0 0 0;}
.rightMenu ul{width:184px;}
.rightMenu li{border-bottom:1px solid #212222;padding-bottom:5px;margin-bottom:5px;}
.rightMenu a{font:11px/14px HelveticaNeue,Arial,helvetica,sans-serif;font-weight:bold;color:#979797;text-decoration:none;text-transform:uppercase;}
.rightMenu a{display:block;width:174px;padding:4px 0;background:url(../im/cat_arrow.png) no-repeat center right;border-bottom:1px solid #2a2a2b;}
.rightMenu a:hover{color:#FFF;}
.posts a,
.tags a{text-transform:none;background:none;}
.rightMenu a.more{width:auto;border:none;background:none;display:inline;margin:5px 0 0 0;color:#3093ed;float:right;}
.rightMenu h3{margin-top:0;}

/* A "spot", could be a screenshot or bullet list for the app. */
.tbAppSpot {
  position:absolute;
  top:15px;
  left:630px;
}
/* APP BOX */
.appBox {
  width:240px;
  background:url(../im/bg_rightMenu.jpg) no-repeat;
  padding:15px 0 0 30px;
  margin:10px 0 0 0;
}
.appBox li {
  border-bottom:1px solid #212222;
  padding-bottom:8px;
  margin-bottom:8px;
  margin-right:10px;
}
.appBox li {
  color:#7cbf53;
}
.appBox li * {
  color:#aaa;
}
.appBox h3 {
  margin-left:-15px;
  margin-bottom:1em;
}
div.btnbar div.tbAppStoreBadge {
  background:url(/images/appstore.png) no-repeat;
  padding-bottom:15px;
  margin-top:8px;
}

div.btnbar{margin-top:15px;}
div.btnbar div{margin-right:60px;height:48px;width:130px}
div.btnbar div a{clear:both; height:37px;width:88px;display:block;font-size:16px;color:#dbdbdb;text-decoration:none;padding:4px 0 0 42px;line-height:16px;}
div.btnbar div a span{clear:left;font-size:10px;color:#aaa;}
div.btnbar div.btn_help{background:url(../im/btn_help.png) no-repeat;}
div.btnbar div.btn_shop{background:url(../im/btn_shop.png) no-repeat;}

/* ERROR PAGE */
img.error-page{margin-top:12em;}
div.error-page{padding-bottom:0;}

/***************/
/* BLOG STYLES */
/***************/
.blog h2 {
   margin-bottom:1em;
}
.blog h3 {
   color:#979797;
   margin-bottom:1em;
}
.blog-footer {
  background:url(../im/blog_bird.png) no-repeat left center;
  float:left;
  margin-bottom:20px;
  font-size:11px;
}
.blog-footer .blog-cat,
.blog-footer .blog-posted-by{float:left;margin-left:35px;text-transform:uppercase;font-size:11px;}
.blog-footer .blog-posted-time{color:#3093ed;}
.blog-footer .blog-link{float:left;margin-left:20px;text-decoration:none;text-transform:uppercase;}
.blog-footer .blog-link:hover{text-decoration:underline;}
.blog hr {
  clear:both;
}

.grid_2 { width:140px; }
.grid_4 { width:300px; }
.grid_5 { width:380px; }
.grid_8 { width:620px; }
.grid_10 { width:780px; }
.grid_11 { width:860px; }
.grid_12 { width:940px; }
.column {margin:0 10px;float:left;overflow:hidden;position:relative;min-height:1px;}
.row {width:960px;margin:0 auto;overflow:hidden;position:relative;}
.front .column{overflow:visible;}

.blog,
.form{margin-top:40px;}
.front{margin-top:20px;}

/* One section in a page, i.e. the stuff that is between hr separators. E.g. an app. */
.tbSection {margin-left:52px;padding:2px;}
hr.tbSeparator {clear:both;height:1px;margin:20px 72px 20px 72px;padding:0;background:url(/im/bg_hr.png) repeat-x center;}
hr.tbSmallSeparator {clear:both;height:30px;width:540px;margin:0;padding:0;background:url(/im/bg_hr.png) repeat-x center;}

.tbColumn ul{margin-left:20px;}

/* The box containing a header, with an icon, title and subtitle. */
.tbAppIcon {
  float:left;
  margin-right:8px;
}
.tbAppHeaderBox h1 {
  font-size:22px;
}
.tbAppHeaderBox h2 {
  font-size:16px;
}
.tbAppHeaderBox a {
  text-decoration:none;
}

/* Text columns in the section, under the header. */
.tbColumn {float:left;width:260px;margin-top:10px; margin-right:28px;}

.tbThumbnailsBox img {margin-right:20px;}

span.error {color:#cf5555;display:none;padding-left:10px;}