/****************************** - SHOWBIZ PRO STYLES - Created By ThemePunch www.themepunch.com Release Date: 27.02.2013 ********************************/ /************************************** - BASIC STYLING FOR CONTENTS - ***************************************/ .showbiz { position:relative;} .showbiz .divide5 { width:100%;height:5px;} .showbiz .divide10 { width:100%;height:10px;} .showbiz .divide15 { width:100%;height:15px;} .showbiz .divide20 { width:100%;height:20px;} .showbiz .divide30 { width:100%;height:30px;} .showbiz .p20 { padding-top:20px;} .showbiz .p30 { padding-top:30px;} .showbiz .p40 { padding-top:30px;} .showbiz .p60 { padding-top:60px;} .showbiz .leftfloat { float:left;} .sbclear { clear:both;} .showbiz .txt-center { text-align:;} .showbiz .txt-centerr { text-align:center;} .showbiz .txt-left { text-align: left;} .showbiz .txt-right { text-align: right;} .showbiz .vert-center { vertical-align:middle;height:100%;} .showbiz-title .greenbg { background-color:#366300; padding:2px 10px;} .showbiz-title .redbg { background-color:#b2170a; padding:2px 10px;} .showbiz-title .bluebg { background-color:#1d628a; padding:2px 10px;} .showbiz-title .blackbg { background-color:#000; padding:2px 10px;} .showbiz p { font-size:13px; line-height:22px; color:#777; font-family: Arial, sans-serif; position:relative;} .showbiz p.orange { color:#ff6c00;} .showbiz p.bigger { font-size:17px; line-height:20px;} .showbiz p.bolder { font-weight:700;} .showbiz-title, .showbiz-title a, .showbiz-title a:visited, .showbiz-title a:hover { color:#555; font-family: 'Open Sans', sans-serif; font-size:15px; text-decoration: none; font-weight:600;} .showbiz-title.large, .showbiz-title.large a, .showbiz-title.large a:visited, .showbiz-title.large a:hover { font-size:20px; line-height:25px; font-weight:800;} .showbiz-price .number { color:#555; font-family: 'Open Sans', sans-serif; font-size:50px; font-weight: 800;} .showbiz-price .currency { color:#555; font-family: 'Open Sans', sans-serif; font-size:35px; font-weight: 400;} .showbiz-button { background:url(../assets/pre.png) repeat-x; height:40px; box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); -moz-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); -webkit-box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.2); width:auto; margin:auto;text-align:center; border-radius:6px; -moz-border-radius:6px; -webkit-border-radius:6px; font-size:14px; color:#555; font-family: 'Open Sans', sans-serif; line-height:42px;font-weight:700;text-shadow:0px 1px #fff; position:relative; cursor:pointer; -webkit-transition: all 0.2s ease-out; -moz-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; padding:10px 20px; overflow: hidden; position: relative; border: 1px solid #ccc; } .showbiz-button:hover { background:url(../assets/prehover.png) repeat-x; box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.2); -moz-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0px 1px 1px 0px rgba(0,0,0,0.2); border: 1px solid #999; } /********************************************************* - NAVIGATION SETTINGS - USE STYLE CLASS IN THE SHOWBIZ NAVIGATION CONTAINER **********************************************************/ .showbiz-navigation { width:65px; height:30px;} .showbiz-navigation.center { margin:auto;} .sb-navigation-left, .sb-navigation-right { width:28px;height:28px; cursor:pointer; float:left; border-radius: 3px; -moz-border-radius: 3px;-webkit-border-radius: 3px; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sb-navigation-left { margin-right:5px;} .sb-navigation-left i, .sb-navigation-right i { line-height:28px; font-size:22px; color:#fff; width:100% !important} .sb-navigation-left i:before, .sb-navigation-right i:before { width:100%;} .sb-navigation-left.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} .sb-navigation-right.notclickable { cursor:default; -moz-opacity:0.3; filter:alpha(opacity=30); opacity:0.3;} /*** WHITE NAV BUTTONS ***/ .sb-nav-light .sb-navigation-left, .sb-nav-light .sb-navigation-right { background:#fff; border:1px solid #d5d5d5; } .sb-nav-light.showbiz-navigation i { color:#777; font-size:19px; line-height:30px;} .sb-nav-light .sb-navigation-left:hover, .sb-nav-light .sb-navigation-right:hover { border:1px solid #b5b5b5;} .sb-nav-light .sb-navigation-left.notclickable:hover, .sb-nav-light .sb-navigation-right.notclickable:hover { border:1px solid #d5d5d5;} /*** GREY BUTTONS ***/ .sb-nav-grey .sb-navigation-left.notclickable:hover, .sb-nav-grey .sb-navigation-right.notclickable:hover, .sb-nav-grey .sb-navigation-left, .sb-nav-grey .sb-navigation-right { background:url(../assets/greyskinbg.png) repeat-x; border-top:1px solid #919191; border-left:1px solid #969696; border-right:1px solid #969696; border-bottom:1px solid #6c6c6; } .sb-nav-grey .sb-navigation-left:hover, .sb-nav-grey .sb-navigation-right:hover { background-image:url(../assets/greyskinbg-hover.png);} /*** DARK GREY BUTTON ***/ .sb-nav-dark .sb-navigation-left.notclickable:hover, .sb-nav-dark .sb-navigation-right.notclickable:hover, .sb-nav-dark .sb-navigation-left, .sb-nav-dark .sb-navigation-right { background:#555; border:1px solid #919191; border:1px solid #333; border-radius: 0px; -moz-border-radius: 0px;-webkit-border-radius: 0px; } .sb-nav-dark .sb-navigation-left:hover, .sb-nav-dark .sb-navigation-right:hover { background:#333} /***************************************** - HOVER ICONS AND ANIMATIONS - ******************************************/ .linkicon, .lupeicon { position:absolute; left:50%;top:50%; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; color:#fff; font-size:28px; font-weight:bold; margin-top:-16px; margin-left:-15px; } .linkicon.notalone { margin-left:8px;} .lupeicon.notalone { margin-left:-38px;} .hoverr i:hover {color: #000;} .showbiz .mediaholder .linkicon, .showbiz .mediaholder .lupeicon { top:65%; -webkit-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -o-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -ms-transition: all 0.2s cubic-bezier(0.175, 0.885, 0.320, 1.275); -moz-opacity:0; filter:alpha(opacity=0); opacity:0; } .showbiz li:hover .mediaholder .linkicon, .showbiz li:hover .mediaholder .lupeicon { top:50%; -moz-opacity:1; filter:alpha(opacity=100); opacity:1;} .showbiz li:hover .mediaholder .lupeicon { transition-delay: 0.1s; -moz-transition-delay: 0.1s; /* Firefox 4 */ -webkit-transition-delay: 0.1s; /* Safari and Chrome */ -o-transition-delay: 0.1s; /* Opera */ } /************************************************** - THE BASIC CONTAINER SETTINGS - NO NEED TO MODIFICATE ANYTHIN HERE ALL DETAIL SETTINGS CAN BE SET VIA THE SKINS **************************************************/ .showbiz ul, .showbiz li { list-style: none; margin:0; padding:0; } .showbiz ul li { position:relative; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000px; -moz-backface-visibility: hidden; -moz-transform: translateZ(10); -moz-perspective: 1000px; /* Firefox */ -ms-perspective: 1000px; } .showbiz .overflowholder { overflow: hidden;position: relative;width: 100%; z-index:2;} .showbiz .overflowholder ul { width:100000px; position: absolute; top: 0px; left: 0px; } .showbiz .overflowholder ul li { float: left !important; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position:relative; } .showbiz .mediaholder { position:relative; box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box; background:transparent;padding:0px; border:none;} .showbiz .mediaholder_innerwrap { position:relative; overflow:hidden; width:100%; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box;} .showbiz .mediaholder img { width:100%; position:relative; margin-bottom:-5px;} .showbiz .hovercover { width:100%;height:100%; position:absolute; top:0px; left:0px; background-color:#52bde9;background-color:rgba(82,189,233,0.85); -webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out; -moz-opacity:0; filter:alpha(opacity=0); opacity:0; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } .showbiz li:hover .hovercover { -moz-opacity:0.85; filter:alpha(opacity=85); opacity:0.85; } /************************************************* - THE GREY SKIN EXTRAS - **************************************************/ .sb-grey-skin.showbiz-navigation i { text-shadow:0px 1px 0px rgba(0,0,0,0.4); font-size:20px;} .sb-grey-skin .mediaholder { background-color:#d5d5d5;border:1px solid #cecece; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px; padding:7px; } .sb-grey-skin .hovercover { background:rgba(0,0,0,0.5); } li.sb-grey-skin:hover .mediaholder img { filter: url("data:image/svg+xml;utf8,#grayscale"); /* Firefox 10+, Firefox on Android */ filter: gray; /* IE6-9 */ -webkit-filter: grayscale(100%); } /************************************************* - THE LIGHT SKIN EXTRAS - **************************************************/ li.sb-light-skin { margin-right:20px; box-shadow:0px 0px 1px 0px rgba(0,0,0,0.2);-moz-box-shadow:0px 0px 1px 0px rgba(0,0,0,0.2);-webkit-box-shadow:0px 0px 1px 0px rgba(0,0,0,0.2); } .sb-light-skin .detailholder { background-color:#fdfdfd; padding:10px 15px 5px 15px; border-bottom: 1px solid #9c6; } .sb-light-skin .hovercover { background:#9c6; } .sb-light-skin .reveal_wrapper { border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; } /************************************************* - THE MEDIA SKIN EXTRAS - **************************************************/ .showbiz-title a:hover { color:#99CC66 } /* TITLE AND CONTENT */ .sb-media-skin .showbiz-title, .sb-media-skin .showbiz-title a, .sb-media-skin .showbiz-title a:visited, .sb-media-skin .showbiz-title a:hover { color:#99CC66} .sb-media-skin .mediaholder { background-color:#fff;border:none;padding:5px; border-radius:2px;-moz-border-radius:2px;-webkit-border-radius:2px; } /************************************************* - THE SHOWCASE FULLWIDTH SKIN EXTRAS - **************************************************/ .showbiz ul li.sb-showcase-skin { margin-right:30px; position:relative; background:#fff; } .sb-showcase-skin .detailholder { padding:5px 0px; } .sb-showcase-skin .mediaholder img { height:170px; /* width:auto; */} .sb-showcase-skin .mediaholder_innerwrap { text-align: center; } /****************************************************** - THE REVEAL FUNCTIONS - *********************************************************/ .reveal_container { position:absolute; width:100%;height:100%; top:0px; left:0px; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; visibility:hidden; } .reveal_container.tofullwidth { visibility:visible; z-index:20;} .reveal_container.tofullwidth.sb-removemesoon { visibility:visible; z-index:5; background:#ff0000;} .showbiz-title.go-to-top { position:absolute;top:100%; margin-top:-40px;z-index:5; left:20px; -webkit-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);-moz-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);-o-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275);-ms-transition: all 0.5s cubic-bezier(0.175, 0.885, 0.320, 1.275); -webkit-transform: translateZ(10);-webkit-backface-visibility: hidden;-webkit-perspective: 1000; } .reveal_container .reveal_wrapper { position:absolute; background:#fff; background:rgba(255,255,255,0.9); width:100%; height:100%; top:0px; left:0px; visibility:hidden; padding:20px 20px 20px; height:0px; box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box; overflow:hidden; -webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease-in-out;-o-transition: all 0.3s ease-in-out;-ms-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -moz-opacity:0; filter:alpha(opacity=0); opacity:0; -webkit-transform: translateZ(10); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } /*** BIG WHITE OPENER- DEFAULT ***/ .reveal_opener { width:40px; height:40px; line-height:40px;text-align:center; font-size:23px; font-family:Arial; font-weight:700; position:absolute; right:0px;bottom:0px;background-color:#fbfbfb; border-radius:4px 0px 0px 0px; -moz-border-radius:4px 0px 0px 0px; -webkit-border-radius:4px 0px 0px 0px; cursor:pointer; -webkit-transition: opacity 0.2s ease-out;-moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out;-ms-transition: opacity 0.2s ease-out; z-index:1; } .reveal_opener_clients { position:absolute; right:0px;bottom:0px; top: 0px; left: 0px;cursor:pointer; -webkit-transition: opacity 0.2s ease-out;-moz-transition: opacity 0.2s ease-out; -o-transition: opacity 0.2s ease-out;-ms-transition: opacity 0.2s ease-out; z-index:1;} .plus:hover {text-decoration: none; color: #9c6; } .reveal_opener.sb-centered { left:50%;top:50%;} /*** SMALL WHITE OPENER ***/ .reveal_opener.opener_small_white { background:#fff; width:25px;height:27px;line-height:25px; border-radius:0px 0px 6px 6px;-moz-border-radius:0px 0px 6px 6px;-webkit-border-radius:0px 0px 6px 6px;} /*** SMALL GRAY OPENER ***/ .reveal_opener.opener_small_grey { background:#d5d5d5; width:25px;height:27px;line-height:25px;border-radius: 0px; -moz-border-radius: 0px;-webkit-border-radius: 0px; bottom:0px;right:0px;} /*** GREY COLORED OPENER ***/ .reveal_opener.opener_big_grey { width:29px; height:29px; line-height:29px;color:#888; background-color:#d5d5d5;font-weight:700; border-radius: 5px 0px 0px 0px; -moz-border-radius: 5px 0px 0px 0px;-webkit-border-radius: 5px 0px 0px 0px; } .reveal_opener.revactive.opener_big_grey { font-size:30px;width:40px;height:35px;line-height:35px;} /** REVEAL OPENER PLAY BUTTON **/ .reveal_opener.sb-controll-button { color:#fff; width:40px;height:40px; line-height:40px; background-color:#000; background-color:rgba(0,0,0,0.8); border-radius: 5px !important; -moz-border-radius: 5px !important;-webkit-border-radius: 5px !important; margin-top:-10px;margin-left:-10px;} /*** HIDE / SHOW OPENER ONLY ON HOVER **/ .reveal_opener.show_on_hover { -moz-opacity:0; filter:alpha(opacity=0); opacity:0; } li:hover .reveal_opener.show_on_hover { -moz-opacity:1; filter:alpha(opacity=100); opacity:1;} .tofullwidth .reveal_wrapper { background:#fff; } .tofullwidth .reveal_wrapper .table { display:table;} .tofullwidth .reveal_wrapper .table-cell { display:table-cell; vertical-align:top; } .tofullwidth .reveal_wrapper .table-cell.onethird { width:33%;} .tofullwidth .reveal_wrapper .table-cell.pl20 { padding-left:20px;} @media only screen and (max-width: 480px) { .tofullwidth .reveal_wrapper .table-cell { display:table-row;} } /******************* REVEAL ACTIONS ***/ .reveal_opener .openme { display:block;} .reveal_opener .closeme { display:none;} .reveal_container.revactive .reveal_wrapper { } .revactive .showbiz-title.go-to-top { position:absolute;top:20px; margin-top:0px; z-index:5; left:20px;} .revactive.reveal_opener .openme { display:none;} .revactive.reveal_opener .closeme { display:block;} .revactive.reveal_opener.sb-controll-button.sb-centered { left:auto; top:10px; right:10px !important; margin:0;}