html, body{height: 100%;}
body{font-family: "Lucida Grande", Helvetica, Arial, sans-serif; background: #000; font-size: 14px;overflow: hidden;}

/* z-index together forevar */
body{z-index: 100;}
.wrap, .wrap2, .wrapAgain{z-index: 200;}
.m1{z-index: 300;}
.latestActivity{z-index: 300;}
.logo{z-index: 300;}
.introBox{z-index: 300;}

.content{z-index: 300;}
.contentTop{z-index: 300;}
.content .title{z-index: 400;}


/* just for ie6 */
.ieFails{display: none; z-index: 1000; margin: 30px; border: 3px solid #c00; background: #ffe; color: #600; font-size: 30px; text-decoration: none; padding: 30px;}
.ieFails strong{display: block; font-weight: bold;}


/* main pretties */
.wrap{background: #d0edfb url(../images/layout/background-rep.jpg) repeat-x bottom; position: relative; height: 100%;}
.wrap2{background: url(../images/layout/background.jpg) no-repeat bottom right; position: relative; height: 100%; overflow-y: scroll;}
.wrapAgain{position: absolute; top:250px; left: 280px;}

/* logo! */
.logo {background: url(../images/layout/logo-bubble.png); width: 269px; height: 149px; position: absolute; top: 0; left: 215px; display: block; text-decoration: none; text-indent: -999em;}

/* main menu */
.m1 {background: url(../images/layout/m1.png); width: 191px; padding-left: 10px; height: 50px; position: absolute; top: 0; left: 27px;}
.m1 a, .m1 span{font-size: 12px; padding: 12px 6px; display: block; float: left; text-decoration: none;}
.m1 span{color: #82d1f6;}
.m1 a{color: #49a2cc;}
.m1 a:hover{color: #000	;}

/* latest activity */
.latestActivity {background: url(../images/layout/activity-6.png) no-repeat; width: 217px; height: 433px; position: absolute; top: 65px; left: 15px; padding:8px 0 0 20px}
.latestActivity a{display: block; height: 69px; text-decoration: none; background: no-repeat left; width: 200px; color: #0080d9; text-decoration: none; position: relative; font-size: 12px;}
.latestActivity a span{ position: absolute; top:20px; left: 70px; width: 120px; display: block; overflow: hidden; height: 28px; line-height: 30px;}
.latestActivity a:hover{color: #000;}

/* introductional boxie */
.introBox{width: 305px; height: 169px; background: url(../images/home/what-did-you-do.png) no-repeat; position: absolute; top:-80px; left: 0;}
.introBox form{}
.introBox .input{position: absolute; top:105px; left: 46px; width: 156px; height: 28px; display: block; border: 1px solid #fff; font-size: 16px; color: #333; padding-top: 8px; text-align: left;}
.introBox .submit{ position: absolute; border: none; top:97px; left: 234px; width: 68px; height: 55px; background: transparent; text-indent: -999em; cursor: pointer;}
.introBox p{left: 45px; top:165px; position: absolute;font-size: 10px; color: #08a7f1; background: #fff; padding: 7px;}
.introBox p a{color: #08a7f1;}
.introBox p a:hover{color: #000; text-decoration: none;}



/* content box */
.content{width: 437px; /*547px minus padding */ padding: 0 55px 30px; background: url(../images/layout/page-rep.png); position: relative; min-height: 170px; margin: 0 0 100px 0;}
.contentTop{width: 547px; background: url(../images/layout/page-top.png) no-repeat; height: 97px; position: absolute; top:-97px; left: 0;}
.contentBottom{width: 547px; background: url(../images/layout/page-bottom.png) no-repeat; height: 52px; position: absolute; bottom:-52px; left: 0;}

.content .title{position: absolute; top:-45px; left: 50px; width: 400px;  height: 50px;}
.content .title img{position: absolute; top:0; left: 0; border: 2px solid #00acff; background: #99cdff;}
.content .title h2{position: absolute; top:20px; left: 90px; font-size: 30px; color: #00acff;width: 350px; overflow: hidden; height: 40px;}
.content .title h2 span{color: #aaa;}
.content .title h2 a{color: #00acff; text-decoration: none;}
.content .title h2 a:hover{color: #000;}

.theRest h3{font-size: 22px;padding-top: 10px;}

.theRest{padding: 50px 0 0; line-height: 150%;}
.theRest ul li{display: block; padding: 0 0 5px 13px; color: #444; background: url(../images/layout/right-point.gif) no-repeat 0 8px}
.theRest ul, .theRest p, .theRest h3{padding-bottom:10px;}
.theRest p, .theRest li{color: #555;}
.theRest a{color: #00acff;}
.theRest a:hover{color: #000; text-decoration: none;}

.theRest em{font-style: italic}
.theRest strong{font-weight: bold;}
.theRest .oooh{font-size: 22px; line-height: 28px;}

.theRest hr{background: #fff; color: #fff; height: 1px; overflow: hidden; border: none; border-bottom: 1px dashed #ddd; margin: 20px 0;}

/* for nice JS form magic */
label { display: none; }

.cred a{text-decoration: none;}

/*listing */
ol{position: relative; padding: 0 0 20px 0;border-top: 1px dashed #ddd;}
ol li{background: none; padding: 0; border-bottom: 1px dashed #ddd; clear: both;}
ol li:after, ol li a:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;}
ol li a{display: block; padding: 10px 0; text-decoration: none; color: #666;}
ol li a:hover{background: #ffe;}
ol li a img{border: 2px solid #00acff; background: #99cdff; float: left; width: 75px;}
ol li a span{display: block; float: right; width: 340px; background: none; padding: 5px 0 0;color: #666;}
ol li a strong{color: #00acff;}
ol li a:hover strong{color: #000;}

.achievements li{padding: 10px 0;}
.achievements li h3{text-align: center; background: #ddd; padding: 5px 5px 10px;}
.achievements li span{background: #ddd; text-align: center; padding: 5px 5px 12px; display: block; margin-top: -6px;}
.achievements li span img{border: 5px solid #fff;}

/* radiuses */
.achievements li span, .achievements li span img, .achievements li h3,
.introBox p{-moz-border-radius: 3px; -webkit-border-radius: 3px;}