/* Theme Name: Decon Theme Theme URI: http://www.deconcreativegroup.com/ Description: The official Decon theme for Twenty-10 Version: 1.0 Author: Cando Entertainment Author URI: http://www.cando-ent.com */ @charset "utf-8"; /* -------------------------------------------------------------- * Filename: style.css * Version: 1.0 (2010-06-25) -------------------------------------------------------------- */ /* Global */ html, body { margin: 0; padding: 0; color: #a1a1a1; } body { background: #fff; } a { text-decoration: none; outline: 0; color: #000; } a:hover { outline: 0; color: #fff; } h1, h2, h3, h4, h5, h6 { color: #000; } h1 { margin: 0 0 3px 0; padding: 0; font: normal 24px "Helvetica Neue", helvetica, arial, sans-serif; text-transform: uppercase; letter-spacing:0.03em; } h2 { font: normal 1.45em "myriad pro", "trebuchet ms", "tahoma", sans-serif; color: #e5006a; text-transform: uppercase; border-bottom: solid 1px #9c9c9c; } h3 { font: normal 1.2em "myriad pro", "trebuchet ms", "tahoma", sans-serif; color: #333; text-transform: uppercase; } strong { color: #000; } hr { background-color: #333; border:1px dotted #000; } .content { padding: 5px; } .center { text-align: center; } .auto-height { height: auto !important; } .bold { font-weight: bold; } a.title-link { color: #fff; } a.title-link:hover { border-bottom: solid 2px #e5006a; } a.link { color: #000; } a.link:hover { border-bottom: solid 2px #e5006a; } a.active { border-bottom: solid 2px #e5006a; } /* Page Structure */ #page { width: 1070px; margin: 0 auto; } #masthead { height: 90px; border-bottom: solid 1px #a6a6a6; } #content { display: none; } #nav { height: 19px; float: right; } #nav ul { float:right; list-style: none; padding: 0; margin: 35px 0 0; } #nav ul li { float: left; margin: 0 0 0 25px; height:19px; overflow:hidden} #nav ul li a { height: 38px; display: block; background-position: 0 0; text-indent: -99999px; position:relative } #nav ul li.about a { width: 48px; background: url('images/nav_about.gif') no-repeat; } #nav ul li.portfolio a { width: 75px; background: url('images/nav_portfolio.gif') no-repeat; } #nav ul li.reels a { width: 40px; background: url('images/nav_reels.gif') no-repeat; } #nav ul li.clients a { width: 53px; background: url('images/nav_clients.gif') no-repeat; } #nav ul li.press a { width: 42px; background: url('images/nav_press.gif') no-repeat; } /*#nav ul li a:hover, #nav ul li.current a { background-position: 0 -19px; padding-bottom: 5px; border-bottom: solid 4px #e5006a; }*/ #nav ul li.current a { top: -19px; } #nav ul li.current { padding-bottom: 5px; border-bottom: solid 4px #e5006a; } #inside_logo { height: 59px; margin: 15px 0 0 0px; background: url('images/decon_logo.gif') no-repeat; } #inside_logo:hover { cursor: pointer; } /* Commented Backslash Hack hides rule from IE5-Mac \*/ #nav ul li a span {float:none;} /* End IE5-Mac hack */ /* Project Navigation */ .navigation { display: block; text-align: center; margin: 20px 0 20px 0; } .navigation a { background-color: #E5006A; padding: 3px 5px 3px 5px; color: #fff; font-size:10px; text-transform:uppercase; } .navigation a:hover { color: #dedede; } .alignright { float: right; } .alignleft { float: left; } .slider_next a, .slider_prev a { display: block; width: 9px; height: 9px; text-indent: -99999px; } .slider_next a { background: url('images/nav_next.gif') no-repeat; } .slider_next a:hover { background-position: 0 -9px; } .slider_prev a { background: url('images/nav_prev.gif') no-repeat; } .slider_prev a:hover { background-position: 0 -9px; } /* Footer */ #footer { width: 100%; height: 80px; overflow: hidden; clear:both; } #footer .wrapper { display: none; width: 1070px; height: 60px; background: #000; margin: 5px auto 0; } #footer .meta { color: #9c9c9c; float: left; padding: 10px 0 0 10px; font-size:0.9em; text-transform: uppercase; } #footer a { color: #e5006a; } #footer ul { list-style: none; padding: 0; margin: 0; } #footer ul li { float: right; margin: 5px 10px 0 0; } form#email_signup { margin-bottom: 2px; } #user_email_field { border: solid 2px #333; background: #dedede; padding: 3px 5px; color: #666; } #user_email_field:focus { border: solid 2px #e5006a; color: #000; background: #fff; } #email_signup_message { display: none; font-size: 1.1em; color: #e5006a; font-weight: bold; margin-bottom: 8px; } /* Clients Page */ .page-clients { padding-top: 25px; } #link_artists { } #link_artists .subheader { height: 18px; border-bottom: solid 1px #9c9c9c; background: url('images/sub_musicartists.gif') top left no-repeat; } #link_artists ul { list-style: none; padding: 0; margin: 3px 0 0; } #link_artists ul li { color:#333; margin-bottom: 3px; } #link_artists ul li a { font-size: 1.1em; color: #8b8b8b; text-decoration: none; border: 0; } #link_artists ul li a:hover { color: #000; border-bottom: solid 3px #E5006A; } #link_brands { } #link_brands .subheader { height: 18px; border-bottom: solid 1px #9c9c9c; background: url('images/sub_brands.gif') top left no-repeat; } #link_brands ul { list-style: none; padding: 0; margin: 15px 0 0 0; } #link_brands ul li { float: left; margin: 0 20px 0 0;} /* #link_brands ul li a:hover { color: #000; border-bottom: solid 3px #E5006A; } */ /* About Page */ .page-clients { padding-top: 25px; } #section_featured { overflow: hidden; } #section_featured .subheader { height: 18px; border-bottom: solid 1px #9c9c9c; background: url('images/sub_featured.gif') top left no-repeat; } #section_featured ul { list-style: none; padding: 0; margin: 0; /* 15px 0 0 0; */ } #section_featured ul li { line-height: 1.2em; margin-bottom: 10px; color: #4d4d4d; font-size: 0.9em; border-bottom: solid 1px #9c9c9c; padding-bottom: 10px; } #section_featured ul li .title { /* margin-top:-9px; */ } #section_featured ul li a { font-size:1em; padding-top: 3px; color: #e5006a; text-transform: uppercase; font-weight: bold; } #section_featured ul li a:hover { color: #000; } #section_featured ul li img:hover { -moz-box-shadow: 0px 0px 6px #888; -webkit-box-shadow: 0px 0px 6px #888; -webkit-transition: all 0.1s ease-out; } #section_recent { } #section_recent .subheader { height: 18px; border-bottom: solid 1px #9c9c9c; background: url('images/sub_recentwork.gif') top left no-repeat; } #section_recent ul { list-style: none; padding: 0; margin: 15px 0 0 0; } #section_recent ul li { float: left; margin: 0; } #section_about { color: #a1a1a1; border-left: solid 2px #000; padding-left: 5px; font-size: 1.1em; line-height:1.4em; margin: 20px 0 0; } #section_about .slug { float: left; display: block; width: 65px; height: 100px; background: url('images/aboutdcg.gif') no-repeat; margin-right:15px; } /* Large Slider */ #slider_large { width: 710px; height: 480px; overflow: hidden; margin-top: -33px; } #slider_large .slider_next { float: right; width: 10px; height: 19px; margin: 9px 0 0 0; } #slider_large .slider_prev { float: right; width: 10px; height: 19px; margin: 9px 15px 0 0; } #slider_large .item_container .item_holder img { width: 710px; height: auto; } /* Project Detail */ .page-detail { padding-top: 25px; } .page-detail p { color: #777; line-height:1.4em; } .page-detail p a { color: #E5006A; } .page-detail p a:hover { border-bottom: solid 2px #E5006A; } .page-detail a.post-edit-link { color: #000; font-style: italic; } .page-detail a.post-edit-link:hover { border-bottom: solid 2px #000; } /* Project Large Slider */ #project_slider_large { width: 710px; height: 405px; overflow: hidden; margin-top: -33px; } #project_slider_large .slider_next { float: right; width: 26px; height: 19px; margin: 0 0 0 10px; } #project_slider_large .slider_prev { float: right; width: 26px; height: 19px; margin: 0 0 0 10px; } #project_slider_large .item_container .item_holder img { width: 710px; height: auto; } /* Portfolio Page */ .page-portfolio { padding-top: 25px; } .page-portfolio .item_holder { margin-bottom: 10px; } .page-portfolio .item_holder img { width: 260px; height: 173px; } .page-portfolio h2, .page-portfolio h3, .page-portfolio p { margin: 0; padding: 5px 5px 0 5px; border: 0; } .page-portfolio h2 { color: #000; font-size: 1.3em; font-weight: bold; line-height: 1em; } .page-portfolio h3 { color: #000; font-size: 1em; } .page-portfolio p a { color: #333; font-size: .9em; border-bottom: solid 2px #333; } .page-portfolio a:hover { color: #000; /* border-bottom: solid 2px #e5006a; */ } /* Reels page */ .page-reels { padding-top: 25px; margin-bottom: 15px; } .page-reels .span-24 .span-6 { color: #787878; } .page-reels .span-24 .span-6 strong { color: #e5006a; text-transform: uppercase; font-weight: normal; } .reel-block { border-top: solid 1px #a6a6a6; border-bottom: solid 1px #a6a6a6; padding: 10px 0 10px 0; margin: 10px 0 10px 0 !important; } .reel_button { border: solid 1px #bbb; background: url('images/reel_btn_back.gif') no-repeat; font: 1.2em/21px "myriad pro","trebuchet ms","tahoma",sans-serif; text-transform: uppercase; text-align: center; padding:3px 14px 0; display: inline; } .reel_button a { color: #e5006a; } .reel_button a:hover { color: #000; } a#skip-btn { margin: 2px 0 0 0; display: block; background: #e5006a; padding: 3px; color: #fff; font-size: 10px; width: 80px; text-align: center; text-transform: uppercase; } a#skip-btn:hover { color: #333; } a#play-all-btn { margin: 0; background: url('images/arrow_right.gif') 0 1px no-repeat; padding: 0 0 0 15px; color: #000; font-size: 13px; text-transform: uppercase; } a#play-all-btn:hover { color: #e5006a; } #accordion h3 a:hover { color: #000; } #accordion .meta a:hover { color: #e5006a; } .highlight-block { display: none; } .highlight-block .video { margin: 0 0 10px 0; } .highlight-block .meta { font-size: .9em; color: #555; width: 100px; } .directors_nav { margin: 0 0 15px 0; padding: 0 0 15px 0; border-bottom: solid 1px #9c9c9c; } .video .meta { font-size: 10px; } .video .meta a { color: #000; } .video .meta a:hover { color: #e5006a; } /* Curve Boxes */ .curve { -moz-border-radius: 6px; -khtml-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; } .curve-3 { -moz-border-radius: 3px; -khtml-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .curve-12 { -moz-border-radius: 12px; -khtml-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; } /* Shadow */ .shadow { text-shadow: 1px 1px 0px #efefef; } #load { display: none; position: absolute; right: 10px; top: 10px; background: url(images/ajax-loader.gif); width: 43px; height: 11px; text-indent: -9999em; } #content { } /* Box Grid */ .boxgrid { width: 260px; height: 173px; float:left; overflow: hidden; position: relative; } .boxgrid img { position: absolute; top: 0; left: 0; border: 0; } .boxcaption{ float: left; position: absolute; background: #fff; height: 100px; width: 100%; opacity: .9; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .caption .boxcaption { top: 175px; left: 0; } /* Panel Grid */ .panelgrid { width: 710px; height: 410px; /* float:left; */ overflow: hidden; position: relative; } .panelgrid h2, .panelgrid h3 { border: 0; margin: 0; font-weight: bold; } .panelgrid h2 { color: #000; font-size: 25px; padding:10px 10px 0 10px; } .panelgrid h3 { color: #000; font-size: 16px; padding: 0px 10px 0; } .panelgrid img { position: absolute; top: 0; left: 0; border: 0; } .panelcaption{ float: left; position: absolute; background: #fff; height: 100px; width: 100%; opacity: .9; /* For IE 5-7 */ filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90); /* For IE 8 */ -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)"; } .caption .panelcaption { top: 410px; /* 383px; */ left: 0; } /* Tooltips ala Tipsy */ .tipsy { padding: 5px; font-size: 10px; opacity: 0.8; filter: alpha(opacity=80); background-repeat: no-repeat; background-image: url('images/tipsy.gif'); } .tipsy-inner { padding: 5px 8px 4px 8px; background-color: black; color: white; max-width: 200px; text-align: center; } .tipsy-inner { -moz-border-radius:3px; -webkit-border-radius:3px; } .tipsy-north { background-position: top center; } .tipsy-south { background-position: bottom center; } .tipsy-east { background-position: right center; } .tipsy-west { background-position: left center; } div.gallery-scroller { position: relative; width: 100%; height: 15px; background-color: #dedede; } div.gallery-dragger { cursor: pointer; position: absolute; width: 40px; height: 15px; background: #e5006a url('images/arrows.gif') no-repeat; } a.btn-close { background-color:#E5006A; color:#FFFFFF; font-size:10px; padding: 0px 14px; text-transform:uppercase; } a.btn-close:hover { color: #000; } #grid-wrapper { position: relative; width: 1070px; height: 540px; overflow: hidden; } div.gallery-video-screen { width: 710px; height: 420px; overflow: hidden; display: none; margin-top:-12px; } #gallery-video-wrapper { width: 710px; height: 400px; background-color:#000000; } .project_video_thumb_btn:hover { cursor: pointer; background-position: 0 -83px; } .project_video_thumb_btn { display: block; width: 125px; height: 83px; background: url('images/project_video_overlay.png') no-repeat; } #thumbs-holder { overflow: hidden; position: relative; height: 300px; width: 300px; }