/*------------------------------------------FONT FACES----------------------------------- @font-face {font-family: Myriad Pro; src: url('../fonts/MyriadPro-Regular.otf')} @font-face {font-family: Myriad Pro Semibold; font-weight: 600; src: url('../fonts/MyriadPro-Semibold.otf')} @font-face {font-family: Myriad Pro Bold; font-weight: 700; src: url('../fonts/MyriadPro-Bold.otf')} ---------------------------------------------------------------------------------------*/ body {background:url(../images/bg.jpg); font-size:11px; line-height:17px; font-family:Verdana, Helvetica, Arial, sans-serif; color:#666;} a {color:#333; } body.login a { text-decoration: underline;} h2, h3 {font-size:21px; font-family:Helvetica, Arial, sans-serif; color:#333;} h3 {font-size:14px;} /*-------------------------------------------------------------------------------------*/ #wrapper {min-height:558px; background-image:url(../images/bg-wrapper.png); background-repeat:repeat-x;} #container {width:940px; margin:0 auto; padding-top: 17px;} /*----------------------TOP NAVIGATION------------------*/ #tN {padding:0px 0 11px; float:right;} #tN li {float:left; margin:0 10px;} #tN li a {height:32px; padding-left:16px; font:100 15px/32px Helvetica, Arial, sans-serif; color:#ccc; text-shadow:0 1px #333; display:block; position:relative;} #tN li a:hover {color:#fff;} #tN li a.selected {background-image:url(../images/bg-tn-left.png); color:#fff;} #tN li a.selected span {width:16px; height:32px; background-image:url(../images/bg-tn-right.png); display:block; position:absolute; top:0; right:-16px; cursor:pointer;} /*------------------------SKELETON----------------------*/ #skeleton-top { width:940px; height:7px; background-image:url(../images/bg-skeleton-top.png); display:block; } #skeleton-bottom {width:940px; height:51px; margin:0 0 13px; background-image:url(../images/bg-skeleton-bottom.png); display:block;} #gallery-bottom {width:940px; height:35px; margin:0 0 13px; background-image:url(../images/bg-gallery-bottom.png); display:block;} #skeleton {width:920px; padding:3px 10px 0; background-color:#fff; padding-bottom: 20px;} #skeleton.leaves {background:url(../images/leaves.jpg) bottom left no-repeat #fff;} #skeleton.leavesBottom {background:url(../images/leaves-bottom.jpg) bottom right no-repeat #fff;} /*-----------------------DARK BOX-----------------------*/ #darkBox {width:920px; height:118px; background-image:url(../images/bg-darkbox.jpg);} #logo {width:296px; height:118px; text-indent:-9999px; background-image:url(../images/logo.jpg); display:block; float:left;} #sL {width:515px; min-height:57px; padding:34px 17px 0 0; position:relative; float:right;} .bt-signUp {width:100px; height:47px; margin-left:9px; text-indent:-9999px; font-size:13px; font-weight:700; line-height:47px; background-image:url(../images/bt-signup.png); color:#e4e6c4; float:right;} #darkBox #login {width:406px; height:60px; background-image:url(../images/bg-login.png); position:absolute; top:34px; left:0; display:none;} #darkBox #login #remember-me { position: absolute; bottom: 0; left: 226px;} .loginInput {width:117px; height:19px; margin:10px 10px 0 0; padding:4px 0; background-image:url(../images/bg-login-input.png); float:left; position: relative;} .loginInput label { position:absolute; top:5px; left: 11px;} .loginInput input {width:94px; height:19px; background:transparent; border:0; margin:0 0 0 10px;} #login input[type="image"] {margin:10px 0 0; float:left;} .bt-login, .bt-my-apps, .bt-logout {margin-top: 30px; height:47px; font-size:13px; font-weight:700; line-height:47px; color:#999; text-indent:-9999px; } .bt-login { margin-right: 30px; width:91px; background-image:url(../images/bt-login.png); } .bt-logout { margin-right: 30px; width:91px; background-image:url(../images/bt-logout.png);} .bt-my-apps { margin-right: 10px; background:url(../images/bt-myapps.png) no-repeat; width: 108px;} .bt-login:hover, .bt-login.selected, .bt-my-apps:hover, .bt-logout:hover {background-position:bottom; color:#fff;} .bt-login.selected {margin-right:13px;} #getStart {width:860px; height:77px; padding:10px 30px 0; background-image:url(../images/bg-get-start.jpg); color:#fff;} #getStart a {color:#fff; font-weight:700; text-decoration:underline;} #getStart p {margin:8px 0 20px 20px; color:#999; font-weight:700;} #getStart h2 {line-height:28px; color:#fff; margin-top: 6px;} #getStart-right {width:400px; float:right;} #take-a-tour { padding-left: 10px; font-size: 14px; font-family: Helvetica, Arial;} .bt-getStarted {width:156px; height:35px; background-image:url(../images/bt-get-started.png); text-indent:-9999px; display:block;} /*----------------------SUB-HEADER----------------------*/ #subHead {width:893px; height:57px; padding-left:27px; margin:0 0 3px; line-height:57px; background-image:url(../images/bg-subhead.jpg);} #subHead h2, #subHead h2 a {color:#fff;} /*----------------------CONTENT-------------------------*/ #contentWrap {background:url(../images/bg-right-c.jpg) 466px 23px no-repeat;} #leftColWrap {background:url(../images/bg-left-col-wrap.jpg) 13px 35px no-repeat;} #content {width:920px; padding:23px 0 0; margin:2px 0 0; background:url(../images/bg-content.png) top no-repeat; position:relative; overflow:hidden;} #leftC {width:457px; padding-left:10px; float:left; } .scrCast {width:180px; height:225px; padding:0 24px 0 14px; font-size:11px; float:left;} .scrCast div {padding-left:14px;} .scrCast h3 a {color:#333; font-weight:700;} .scrCast a {color:#666;} .scrCast a:hover {text-decoration:underline;} .thumbImg {width:158px; height:118px; padding:10px 11px; margin:0 0 10px; display:block; background-image:url(../images/bg-thumb-img.png); position:relative;} .thumbImg span {width:22px; height:23px; position:absolute; top:-2px; left:-7px; display:block; background-image:url(../images/icon-plus.png);} .featured {padding:23px 0 0 30px;} .featured h2 {margin:0 0 10px;} .jCLiteWrap {width:407px; height:190px; padding:19px 0 0; background:url(../images/bg-jclite.png) no-repeat; position:relative;} .jCLite li {height:143px; margin:0 15px; color:#555;} .jCLite li h3 {margin:5px 0 0;} .jCLite li h3 a {font-size:16px; color:#333; font-weight:700;} .jCLite li h3 a:hover {text-decoration:underline;} .jCLite p {margin:10px 0 0;} .thumb {width:149px; height:129px; margin-right:16px; padding:6px 7px 8px; background-image:url(../images/bg-jclite-img.png); display:block; float:left;} .npWrap {width:116px; height:30px; position:absolute; right:18px; bottom:0; z-index:10;} .prev, .next {width:60px; height:30px; background-image:url(../images/bt-prev-next.png); text-indent:-9999px; float:left;} .next {width:56px; background-position:-60px 0;} .prev:hover {background-position:0 -30px;} .next:hover {background-position:-60px -30px;} .bt-showCase {width:163px; height:31px; background-image:url(../images/bt-showcase.png); text-indent:-9999px; display:block; position:absolute; bottom:0px; left:16px;} .bt-showCase:hover {background-position:bottom;} #rightC {width:423px; padding-left:30px; float:right;} .rightTop {width:390px; min-height:208px; margin:0 0 17px; font-size:11px; color:#555;} .rightTop p.first {font-size:14px;} .rightTop p {margin:0 0 18px;} .benefits {padding:0 30px 0 46px; margin:23px 0 36px; background:url(../images/icon-designers.png) 0 0 no-repeat;} .benefits.designers h2 { padding-top: 8px;} .benefits.coders {background:url(../images/icon-coders.png) 0 0 no-repeat;} .benefits h2 {color:#666;} .benefits a {color:#333; font-weight:700;} .benefits a:hover {text-decoration:underline;} .divider {width:422px; height:18px; background-image:url(../images/divider.png); display:block;} /*-------------------TOUR-------------------*/ #tour {width:920px;} #tour-right {margin:0 3px 0 0; float:right;} .slideContent {width:683px; min-height:900px; /*min-height for first openning for chrome.*/ overflow:hidden; position:relative;} .slides {position:absolute; top:0; left:0;} .panel {position:absolute; top:0; width:683px; display:none;} .panel h3 {font-size:18px;} #tour-left {width:225px; float:left;} #slider-top {width:209px; height:5px; display:block; background:url(../images/bg-slider-top.png) right;} #slider-bottom {width:209px; height:8px; display:block; background:url(../images/bg-slider-bottom.png) right no-repeat;} .slider-nav {width:209px; background:url(../images/bg-slider-nav.png) right repeat-y; padding:10px 0;} .slider-nav li a {width:182px; margin-left:25px; height:35px; line-height:35px;display:block;} .slider-nav li.active a {width:182px; height:41px; padding-left:60px; margin-left:-20px; background-image:url(../images/bg-slider-li.png); display:block;} .slider-nav li.active a span {color:#fff;} .slider-nav span {color:#666; font-size:13px; padding-left:25px; background:url(../images/icon-shops.png) left no-repeat;} .slider-nav span.data {background:url(../images/icon-data.png) left no-repeat;} .slider-nav span.mail {background:url(../images/icon-mail.png) left no-repeat;} .slider-nav span.builder {background:url(../images/icon-builder.png) left no-repeat;} .slider-nav span.prototype {background:url(../images/icon-prototype.png) left no-repeat;} #tour-right p {font-size:13px;} .pics-and-text { margin-top: 30px;} .pics-and-text li { overflow:hidden; margin: 20px 20px 0 0;} .pics-and-text li img { float: left; margin: 0 8px 0 2px; padding: 4px; border: 1px solid #999;} .pics-and-text li p { margin: 0 0 10px 185px;} /*-------------------LEFT COLUMN-----------------*/ #leftCol {width:212px; min-height:250px; font-size:13px; padding:0 15px 0 23px; float:left;} #leftCol li a {color:#666; line-height:22px;} #leftCol li a:hover, #leftCol li a.selected {color:#7b8700; text-decoration:underline;} .blurb #leftCol { width: 607px; margin-right: 30px;} .blurb #leftCol > :first-child { font-size: 16px;} /*-------------------RIGHT COLUMN----------------*/ #rightCol {width:637px; padding-right:10px; float:right;} .blurb #rightCol { width: 192px; margin-right: 20px; border-left: 1px solid #e0e0e0; padding-left: 20px;} .blurb { font-size: 13px;} /*---------------------TOPICS--------------------*/ .topics {width:637px; font-size:11px;} .topics h3 {margin:18px 0 12px;} .topics h3 a, .topics-right p a {font-weight:700; color:#002222;} .topics h3 a:hover {color:#7d8a00;} .topics p {margin:0 0 16px; font-size:12px;} .topics strong {color:#333;} .date-comment {padding:0 0 18px;} a.comments {margin-left:13px; padding-left:21px; background:url(../images/icon-comment.png) left no-repeat; color:#666;} a.comments strong {color:#000e27;} a.comments:hover {text-decoration:underline;} .date {margin-right:13px; padding-left:26px; background:url(../images/icon-calender.gif) left no-repeat; color:#999;} .thumbImage {border:#717171 1px solid; margin-right:14px; display:block; float:left;} .tagBox {height:32px; background-color:#f7f7f7; margin-top: 16px;} .tagBox h5 {height:32px; float:left;} .tagBox h5 a {display:block; padding:8px 15px 0 27px; color:#666; font-size:11px; background:url(../images/icon-user.gif) no-repeat; background-position:10px 11px; height:22px;} .tagBox h5 a:hover {color:#000;} .postedIn {background-color:#f1f1f1; padding:8px 25px 0 20px; height:22px; color:#999; font-size:11px; float:left;} .postedIn a {color:#7d8a00; text-decoration:underline;} .postedIn a:hover {text-decoration:none;} .tags {padding:8px 0 0 20px; height:22px; color:#999; font-size:11px; float:left;} .tags a {color:#927b57; text-decoration:underline;} .tags a:hover {text-decoration:none;} .horizontalLine {border-bottom:1px solid #e4e4e4; margin:5px 0 40px 0; display:block;} ul#reply {margin:18px 0 0;} ul#reply li {width:637px; padding:0 0 25px; overflow:hidden;} .reply-right {width:492px; padding:0 14px 18px; margin:0 4px 10px 0; border:#e8e8e8 10px solid; background-color:#f6f6f6; position:relative; float:right;} .reply-right p {margin:10px 0;} .leftArrow {width:11px; height:23px; position:absolute; left:-21px; top:11px; display:block; background-image:url(../images/arrow-left.gif);} a.answer {border-bottom:#3196c5 1px solid;} .reply-left {width:64px; line-height:14px; float:left;} .reply-left h5 {margin:2px 0 0;} .reply-left h5 a {font-size:11px; color:#3196c5;} .reply-left a:hover {text-decoration:underline;} .reply-left span {font-size:10px; color:#999;} form.new-comment .field { overflow: hidden; height: 100%; margin: 10px 0 0 0;} form.new-comment label { display: block;margin-top: 5px; float: left; width: 100px; clear: left;} form.new-comment textarea { margin: 10px 0; width: 630px;} body.blog-archive ul.blog-posts-for-month li { margin-top: 10px; } body.blog #leftCol { padding-top: 20px;} body.blog #subscribe a { display: block;} body.blog .post-body a { border-bottom: 1px dotted #ccc; } /*-----------------------------------------------*/ #gallery-right {width:654px; padding:20px 0 0 15px; float:left;} /*------------------PLANS AND SIGNUP-------------*/ #plansWrap {width:920px; height:247px; background-image:url(../images/bg-plans-wrap.jpg);} .plans, .planFirstLast {width:100px; height:237px; padding:10px 40px 0 50px; line-height:24px; position:relative; float:left;} .plans h3, .planFirstLast h3 {line-height:36px;} .plans a, .planFirstLast a {width:114px; height:38px; background-image:url(../images/bt-plan-sign.png); display:block; text-indent:-9999px; position:absolute; bottom:-16px; left:31px;} .plans a:hover, .planFirstLast a:hover {background-position:bottom;} .plans strong {color:#333;} .plans strong.plan3 {color:#007a89;} .planFirstLast {width:100px; padding:10px 37px 0;} .planFirstLast a {left:25px;} /*---------------------FOOTER--------------------*/ #footer {width:904px; height:53px; padding:12px 16px 0 19px; font-size:11px; color:#999; background-image:url(../images/bg-footer.png);} #footer h2 a {width:98px; height:17px; background-image:url(../images/logo-bottom.png); text-indent:-9999px; display:block; float:right;} #footer a:hover, #footer a.selected {color:#fff;} #fMiddle {width:745px; float:left;} #fLogin {width:60px; height:40px; float:left;} #fLogin a {color:#ccc; font-weight:700;} #fLinks {margin:0 0 4px; float:left;} #fLinks a {margin:0 4px; color:#999;} #fLinks-bottom {font-size:10px; float:left;} #fLinks-bottom a {color:#999;} #copyright {font-size:10px; margin:0 27px 0 10px; float:left;} /* Classes */ .pT {padding:15px 0 0;} .green {color:#d0cc6f !important;} .orange {color:#aa7f0b !important;} .underline {text-decoration:underline;} .title {color:#002222; margin:18px 0;} /* Boxes */ .col-1 {width:48.5%;} /* Form Elements */ textarea, input, .loginInput label {font:13px "Lucida Sans Unicode"; color:#666;} textarea {overflow:auto;} /* Bambuu Facts */ .bambuu-fact {font: italic 16px/30px Georgia; text-align: center; color: #c0c0c0; margin-top: 40px;} .bambuu-fact:first-child { margin-top: 10px;} .bambuu-fact:last-child { margin-bottom: 10px;} /* Forms */ .field-list th { text-align: left; padding-right: 10px;} /* Signup Page */ form .actions {margin: 20px 0 0 225px;} /* Rails error message */ .error-messages { background: #BC1C3D; border: 1px solid #900024; padding: 15px 30px; color: white; margin-bottom: 20px; } .error-messages h2 { color: white; margin-top: 0; padding-bottom: 0; font-size: 16px; } .error-messages li {margin-left: 20px; list-style: square;} .field-with-errors input, .field-with-errors textarea, .field-with-errors select {border: 2px solid #BC1C3D;} body.small-page #container { padding-top: 50px; width: 520px;} body.small-page #skeleton-top { background: url(../images/small-page/bg-smallpage-top.png) no-repeat; width: 520px; } body.small-page #skeleton { width: 500px; padding: 3px 10px 0 10px;} body.small-page #skeleton-bottom { background: url(../images/small-page/bg-smallpage-bottom.png) no-repeat bottom left; width: 520px; height:auto; padding-bottom: 36px;} body.small-page #main-heading { background: url(../images/small-page/private-beta-banner.jpg) no-repeat; width: 520px; text-indent: -10000px; height: 230px;} body.small-page #small-content { padding: 10px 27px 0; margin-top: -20px;} body.small-page p { margin-top: 0; font-size: 13px;} body.small-page h2 { margin-top: 20px; font: bold 16px Helvetica, Arial, sans-serif; color: #444;} body.small-page .error-messages { -moz-border-radius: 10px;} body.small-page .error-messages h2 { color: white; margin: 0 0 5px;} body.small-page h2 a { text-decoration: underline;} body.beta #bt-signup, body.beta #bt-login { text-indent: -10000px; width: 133px; height: 34px; border: none; margin-top: 10px;} body.beta #bt-signup { background: url(../images/small-page/bt-signup.png) no-repeat;} body.beta #bt-login { background: url(../images/small-page/bt-login.png) no-repeat; } body.beta .terms-of-service a { text-decoration: underline; } body.beta #signup-form { display: none;} body.beta #signup-form.show { display: block;} body.beta #login-form.hide { display: none;} body.forgot-password-page a { text-decoration: underline !important;} #forgot-password { float: right; text-decoration: underline; margin: 10px 3px 0 0; color: #666;} body.forgot-password-page .content-body { padding-bottom: 1px;} .label-in-place { position: relative; margin-bottom: 10px; width: 446px; background: url(../images/small-page/smallpage-input.png) no-repeat; height: 42px;} .label-in-place label { position: absolute; top: 14px; left: 12px; } .label-in-place input { border: none; width: 420px; margin: 14px 12px 0; padding: 0;} .label-in-place label, .label-in-place input { font: 18px Helvetica, Arial, sans-serif;} .label-in-place label { color: #999;}