/* db 88 88""Yb 888888 88""Yb dP"Yb 88b 88 888888 dPYb 88 88__dP 88__ 88__dP dP Yb 88Yb88 88 dP__Yb 88 88"Yb 88"" 88"Yb Yb dP 88 Y88 88 dP""""Yb 88 88 Yb 88 88 Yb YbodP 88 Y8 88 ------------------------------------------------------- site specific css for: CalabashFilms ------------------------------------------------------- Please feel free to look around and learn that's how I did it too but equally don't steal wholesale! @paulmsmith or @airfrnt on twitter for questions. */ /* @group - css reset ----------------------------------------------------------- */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr, acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike, strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend, table,caption,tbody,tfoot,thead,tr,th,td, article, aside, dialog, figure, footer, header,hgroup,menu,nav,section,time,mark,audio,video{background:transparent;border:0;font-size:100%;margin:0;outline:0;padding:0;vertical-align:baseline;background-repeat:no-repeat;} ol,ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after{ content: ''; content: none; } :focus{ outline:0; } ins { text-decoration: none; } del { text-decoration: line-through; } table { border-collapse: collapse; border-spacing: 0; } em { font-style: italic; } article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; } /* @group - redefine standard elements ----------------------------------------------------------- */ body { font:normal normal normal 62.5% Arial,Helvetica,Verdana,sans-serif; line-height:1em; text-align: center; color: #b2b2b2; background: #000; } div { text-align: left; } /* @group - common link styles ----------------------------------------------------------- */ a { text-decoration: none; color: #b2b2b2; } a:hover { color: #fff; } /* @group - classes / utilities (mainly for debugging) ----------------------------------------------------------- */ /* self clearing elements and classes */ .columnset:after, .group:after, .frow:after, .section:after{clear:both;content:".";display:block;height:0;visibility:hidden;} .clearfloats, .cf{clear:both;} .clearleft, .cl{clear:left;} .clearright, .cr{clear:right;} .floatright,.fr{float:right !important;} .nofloat,.nf{float:none !important;} .floatleft,.fl{float:left !important;} img.floatright,img.fr,blockquote.fr,blockquote.floatright{margin:0 0 5px 10px;} img.floatleft,img.fl,blockquote.fl,blockquote.floatleft{margin:0 10px 5px 0;} img{border:none;} .ar{text-align:right !important;} div.hr{background:transparent;border-bottom:1px solid #000;height:0px;margin:0 0 10px 0;padding:0;} .hide,#access-panel{display:block;height:0;overflow:hidden;width:0;margin:0;padding:0;} noscript{font-size:120%;} .replace{position:relative;margin:0px;padding:0px;cursor:pointer;display:block;} .replace span{display:block;position:absolute;top:0px;left:0px;z-index:1;} /* @group - base elements ----------------------------------------------------------- */ a{} a:hover{} p{font-size:1.3em;line-height:15px;margin:0 0 15px 0;} strong{font-weight:bold;color:#fff;} h1,h2,h3,h4{color:#fff;margin:0 0 15px 0;} h1{font-size:3.8em;line-height:45px;text-transform:uppercase;} h2{font-size:2.5em;line-height:30px;text-transform:uppercase;} h3,.entry-title{font-family:Arial,"MS Trebuchet",sans-serif;font-size:2em;line-height:25px;font-weight:normal;} h4,#blog .bars-title{font-size:1.5em;line-height:20px;} /* @group - doc and grid selectors ----------------------------------------------------------- */ /* layout */ .page-block, .columnset-home { width: 960px; margin: 0 auto; } .columnset{display:block;} .col{float:left;display:inline;margin:0 10px;} /* grid arrangement for homepage */ .columnset-home{margin-bottom:30px;} .columnset-home .columnset-home-inner .col{width:300px;margin:0;} .columnset-home .columnset-home-inner .col-a{float:left;} .columnset-home .columnset-home-inner .col-b{float:right;} /* blog landing columns */ .columnset-blog-l .col { width: 220px; margin: 0 8px 0px; float: none; display: inline-block; vertical-align: top; border-top: 1px solid #393939; padding-top: 15px; } /* browser by tag columnset */ .columnset-bbt{background:transparent url(../img/global/line.png) repeat-y 230px 0; margin-bottom: 15px; } .columnset-bbt .col-a{ width:210px; padding-right: 10px;} /* content page - columnset */ .columnset-content {} .columnset-content .col-a { } .columnset-content .col-b { } /* used for building custom grids */ .col-1{width:60px;} .col-2{width:140px;} .col-3{width:220px;} .col-4, .columnset-home .col-a, .columnset-content .col-b{width:300px;} .col-5{width:380px;} .col-6{width:460px;} .col-7{width:540px;} .col-8, .columnset-home .col-b, .columnset-content .col-a{width:620px;} .col-9, .columnset-bbt .col-b{width:700px;} .col-10{width:780px;} .col-11{width:860px;} .col-12, .col-full {width:940px; margin: 0; } .col-first { margin-left: 0; } .col-last { margin-right: 0; } /* col reformatting */ .linear .col{width:100% !important;display:block !important;float:none !important;} /* @group - header ----------------------------------------------------------- */ #header{padding:25px 0;border-bottom:1px solid #393939; } #logo{width:251px;height:44px;display:block;overflow:hidden;float:left; background: transparent url(../img/global/logo.png) 0 0; line-height: 44px; color:#fff; font-size: 3.3em;} #logo span { color: #888500; margin-left: -5px;} #logo:hover { background-position: 0 -44px; } #logo:hover span { color: #dedb00; } #nav{float:right;padding:10px 0 0 0;} #nav li { display: inline; font-size: 1.7em; font-weight: 100; text-transform: uppercase; margin: 0 0 0 30px; padding: 0 0 3px 0; line-height: 25px; } #nav li a { color: #e7e7d7; } #nav li a:hover { color: #fff; } #nav li.active a, #home .nl-1 a, #about .nl-2 a, #work .nl-3 a, #services .nl-4 a, #blog .nl-5 a, #contact .nl-6 a{border-bottom:2px solid #9d9b00;color:#fff;} /* @group - footer ----------------------------------------------------------- */ #footer{padding:20px 0;border:1px solid #393939;border-left:0;border-right:0;margin:0 0 15px 0;} #footer p{margin:0 10px;line-height:1em;} p.company-details{font-weight:bold;color:#fff;float:left; padding-top: 3px;} p.rss-cta{font-size:1.1em;float:right;} p.rss-cta a{background:transparent url(../img/global/elements-sprite.png) no-repeat right -50px;color:#ccc;padding:5px 30px 5px 0;display:inline-block;} p.rss-cta a:hover{color:#fff;} #siteinfo p{font-size:1.1em;margin:0 10px 15px;} #siteinfo p.copyright { float: left; } #siteinfo p.credit { float: right; } /* @group - components ----------------------------------------------------------- */ /* misc type styles */ .bdr-b { padding-bottom: 10px; border-bottom: 1px solid #393939;} .bdr-t { padding-top: 10px; border-top: 1px solid #393939;} .tel { font-size: 2.5em; line-height: 30px; color: #fff; margin: 0 0 10px 0; } .entry-title { background:url(../img/global/elements-sprite.png) no-repeat scroll left -300px; padding: 5px 0 5px 40px; } .bars-title { padding: 10px 0 10px 0; border: 1px solid #393939; border-right: 0; border-left: 0; } .comments-title { background:url(../img/global/elements-sprite.png) no-repeat scroll left -437px; padding-left: 25px; } /* Call to Action buttons and styles */ .cta-btn{background:#dedb00;padding:15px;text-transform:uppercase;color:#000;display:inline-stack;display:inline-block;font-size:1.6em; border: 0; cursor: pointer;} .cta-btn:hover{background:#f9f604; color: #000;} .cta-btn-sml { padding: 12px; font-size: 1.4em; } .welcome-ctas{ margin: 10px 0; padding: 10px 0 0 0;} .welcome-ctas li{float:left;display:inline;} .welcome-ctas li.last{float:right;} .showreel-cta{color:#fff;background:transparent url(../img/global/cta-arrow.png) no-repeat 100% 50%;padding:15px 30px 15px 0;display:inline-stack;display:inline-block;font-size:1.6em;text-transform:uppercase;} .elsewhere-ctas, .divider-block { border-top: 1px solid #333; border-bottom: 1px solid #333; margin: 0 0 15px 0; padding: 15px 0;} .elsewhere-ctas { padding-bottom: 5px; } .social-cta { font-size: 1.6em; font-weight: normal; color: #dedb00; text-transform: uppercase; line-height: 20px; } .social-cta a { color: #dedb00; padding-bottom: 5px; } .social-cta a:hover { text-decoration: underline; } .twitter-cta, .facebook-cta, a.rss-cta { padding: 1px 0 1px 35px; background: transparent url(../img/global/elements-sprite.png) no-repeat 0 0; } .twitter-cta { background-position: 0 -100px; } .facebook-cta { background-position: 0 -150px; } a.rss-cta { padding: 5px 0 5px 35px; background-position: 0 -500px; } .cta-read-more { float: left; } .cta-read-more a{background:url(../img/global/elements-sprite.png) no-repeat scroll right -197px transparent;color:#DEDB00;padding-right:12px;} .cta-read-more a:hover { text-decoration: underline; } .cta-comments { float: right; } .cta-comments a { background:transparent url(../img/global/elements-sprite.png) no-repeat right -250px; padding-right: 20px;} .cta-comments a:hover { text-decoration: underline; color: #fff; } .cta-comments span { display: none; } /* blog entry */ .entry,li.comment{margin:0 0 45px 0;} li.comment{padding-left:160px;position:relative; min-height: 30px;} li.comment .comment-meta{position:absolute;top:0;left:0;} li.comment .comment-meta p{margin:0;font-size:1.1em;} li.no-comments { padding: 20px 0 ;} /* graphic and overlay classes */ .overlay { position: absolute; left: 50%; top: 50%; } .overlay-scan{background:transparent url(../img/global/scanline.png) repeat 0 0;height:355px;left:0;top:0;width:510px;z-index:10;} .overlay-play { background: transparent url(../img/global/play-overlay.png) no-repeat 0 0; width: 83px; height: 104px; margin-top: -52px; margin-left: -41px; z-index: 12; cursor: pointer;} .scan-image{position:relative; overflow: hidden;} .scan-image img{display:block; border: 1px solid #424242;} .scan-image .overlay-scan { width: 100%; height: 500px; } /* feaured content block */ .featured-content{padding:30px 0 31px; border-bottom:1px solid #393939; margin: 0 0 25px 0; } .item-description{background:#000;padding:15px 20px;float:left;width:370px;} .item-description p { font-size: 1.4em; } .item-description h1 { margin-bottom: 15px; } .featured-item { background: #000 url(../img/global/loader.gif) no-repeat 50% 50%; padding: 10px 10px; float: right; height: 355px; width: 510px; position: relative; } .flash-target { background: transparent url(../img/global/loader.gif) no-repeat 50% 50%; position: relative; width: 510px; height: 355px; } .featured-select { padding: 15px 10px; background: #000; } .flash-loading { position: absolute; top: 50%; left: 50%; width: 128px; height: 15px; z-index: 3000; margin: -7px 0 0 -64px; background: transparent url(../img/global/loader.gif) no-repeat 0 0; } /* testimonials widget - homepage */ .testimonials { } .testimonials li { padding-left: 30px; background: transparent url(../img/global/quote-left.png) no-repeat 0 0; } .testimonials li p { padding-right: 30px; background: transparent url(../img/global/quote-right.png) no-repeat 90% bottom; font-size: 1.4em; } .testimonials li p.cite { background: none; color: #fff; margin: 0; } .jsne .testimonials li p.cite { margin-bottom: 10px; } .jse .testimonials{padding:21px 20px 0 30px;position:relative; height: 145px;} .jse .testimonials li{float:left;width:230px;} .jse .testimonials .carousel-control{display:block;overflow:hidden;text-indent:-1000em;position:absolute;top:50%;margin:-31px 0 0 0;background:transparent url(../img/global/carousel-controls.png) no-repeat 0 0;width:16px;height:31px; cursor: pointer;} .jse .testimonials .carousel-control:hover{background-position:0 -31px;} .jse .testimonials .carousel-previous{left:0;} .jse .testimonials .carousel-next{background-position:right 0;right:0;} .jse .testimonials .carousel-next:hover{background-position:right -31px;} /* misc elements and widgets */ .blog-thumb{margin:0 0 15px 0;} object { background: #000; } .page-title{padding:0 0 10px;border-bottom:1px solid #393939;margin:15px 10px 30px;} .page-title h1{margin:0; float: left; } .page-title .page-desc { width: 50%; float: right; padding-top: 10px; } .page-title-full { margin: 0; } .page-title-full h1 { float: none; width: 960px; margin: 15px auto 10px; } .results-pagination{margin:0 10px 15px;padding:10px 0;border-bottom:1px solid #393939;border-top:1px solid #393939;} .results-pagination p, .results-pagination ul, .results-pagination li { margin-bottom: 0; } .results-pagination .current-page-meta{float:left;} .results-pagination .pagination-links{float:right;} .results-pagination .pagination-links li{display:inline; margin-right: 5px;} .results-pagination .pagination-links li a{display:block;float:right;width:11px;height:17px;background:transparent url(../img/global/pagination-arrows.png) no-repeat 0 0;overflow: hidden;text-indent: -1000em;} .results-pagination .pagination-links li.next a{background-position:right 0; margin-left: 5px;} .results-pagination .pagination-links li.next a:hover{background-position:right -17px;} .results-pagination .pagination-links li.prev a{background-position:0 0;} .results-pagination .pagination-links li.prev a:hover{background-position:0 -17px;} .tag-cloud li{font-size:2em;font-weight:normal;display:inline;line-height:25px;text-transform:uppercase;margin-right:15px;} .tag-cloud li a{color:#b2b2b2;} .tag-cloud li a:hover{color:#fff;} .tag-cloud-v li{display:block;} .tag-cloud-sml li{font-size:1.4em;} .entry-meta{} .entry-meta p{font-size:1.2em;} .side-block { margin-bottom: 20px; padding-left: 10px; } .sub-nav{float:right;} .sub-nav li{display:inline;font-size:1.5em;font-weight:bold;margin-left:20px;} .jsne .js-tabs{display:none;} .jsne .tab-pane{margin-bottom:20px;} .sub-nav li a{color:#b2b2b2;} .jse .tab-pane{display:none;} .sub-nav li a:hover,.sub-nav li a.active{color:#dedb00;} .tab-pane{width:400px;margin-left:10px;} .about-copy p a, .tab-pane p a { color: #fff; text-decoration: underline; } p.latest-tweet{font-size:1.4em;font-weight:normal;color:#ff25fc;} /* forms */ form{margin:0 0 20px 0;} /* frow basics */ .frow { font-size: 1.2em; line-height: 15px; margin: 0 0 10px 0; } .frow * { font-size: 1em; } .frow .frow-label { width: 30%; float: left; } .frow .frow-input { width: 68%; float: right; } .frow .frow-label label, .frow .frow-input input.txt, .frow .frow-input textarea { width: 97%; } .frow .frow-error { display: none; } .frow .frow-error p { margin: 5px 0; color: #f00; } /* frow type specifics */ .frow input.txt, .frow .frow-input textarea {border:0;padding:5px;} .frow .frow-input textarea { height: 100px; } .frow .frow-input input.txt, .frow .frow-input textarea{background:#ccc;} .frow .frow-input input.txt:focus, .frow .frow-input textarea:focus{background:#fff;} .frow-text .frow-label label{line-height:2em;} .frow-action .frow-submit{float:right;} /* @group - page/section specific selectors ----------------------------------------------------------- */ /* homepage */ body#home { background: #000 url(../img/home/bg-a.jpg) no-repeat 50% 0; } #home .blog-thumb .overlay-scan { height: 170px; } #home .featured-content .item-description p { line-height: 1em; } /* blog */ #blog h2{text-transform:none;} #blog .blog-thumb .overlay-scan{height:195px;cursor:pointer;} #blog .blog-thumb img{width:218px;} #blog .blog-landing .blog-thumb{height:195px;} .post-image{float:left;margin:0 10px 0px 0;border:1px solid #333;} .entry-body object,.entry-body embed{margin:0 0 15px 0;width:100%;} .entry-body a{color:#fff;text-decoration:underline;} .entry-comments{margin-bottom:40px;} p.comment-author{font-size:1.4em !important;} /* work */ #work .featured-content{background:transparent url(../img/work/work-bg.jpg) no-repeat 50% 0; margin: 0; border-bottom: 0; padding-bottom: 100px; } #work .featured-item, #work .item-desscription{margin-bottom:20px;} .jse .work-desc ul li{float:left;width:370px;} .jse .work-thumbs li{float:left;width:160px; height: 120px;} .jse .work-desc .carousel-control, .jse .work-desc .carousel-pagination {display:none;} .jse .work-thumbs .carousel-wrap{width:780px;margin-left:80px;} .jse .work-thumbs{position:relative;} .jse .work-thumbs .carousel-control{display:block;overflow:hidden;text-indent:-1000em;position:absolute;top:50%;margin:-30px 0 0 0;background:transparent url(../img/global/carousel-controls-lrg.png) no-repeat 0 0;width:35px;height:64px; cursor: pointer;} .jse .work-thumbs .carousel-control:hover{background-position:0 -64px;} .jse .work-thumbs .carousel-previous{left:10px;} .jse .work-thumbs .carousel-next{background-position:right 0;right:10px;} .jse .work-thumbs .carousel-next:hover{background-position:right -64px;} .jse .work-thumb{position:relative;width:100%;height:118px;} .jse .work-thumb a img{border:1px solid #000;} .jse .work-thumb .work-thumb-title{position:absolute;width:126px;bottom:0px;left:2px;padding:10px 5px;background:#000;display:none; line-height: 1.5em;} .jse .work-thumb .work-thumb-title h5{font-size:1.4em;font-weight:bold;} .jse .work-thumb a:hover img{border:1px solid #dedb00;} .jsne .work-thumbs { display: none; } .jse p.yt-link { display: none; } /* #videoPlayer { width: 510px; height: 355px; } */ /* services */ .services{background:transparent url(../img/services/bg.jpg) no-repeat 163% 0;min-height:500px;padding-top:15px;} #services .page-title h1{margin-bottom:10px;} #services .sub-nav { margin: 0; padding: 20px 0 0 0;} /* about */ .about{background:transparent url(../img/about/bg.jpg) no-repeat 100% 0;min-height:460px;padding-top:15px;} .about-copy { width: 400px; padding-top: 30px; } /* contact */ #contact .page-title-full{margin:0 0 20px 0;} #contact .col-a{margin-left:0;} #contact .frow-radios{padding-left:32%;}