/* * * Base CSS File (always applies) * * @author: JE * * Last Update: 3-22-13 * * todo: minimize overlap of styles!!! */ /******************************************************************************************************************************** Animate.CSS http://daneden.me/animate/ ********************************************************************************************************************************/ body{-webkit-backface-visibility:hidden;} html, body, form { height:100%;} /* Animate.css - http://daneden.me/animate*/ .animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.hinge{-webkit-animation-duration:2s;animation-duration:2s}@-webkit-keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);transform:translateY(-15px)}}@keyframes bounce{0%,100%,20%,50%,80%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}40%{-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}60%{-webkit-transform:translateY(-15px);-ms-transform:translateY(-15px);transform:translateY(-15px)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce}@-webkit-keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,100%,50%{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes pulse{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}50%{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes rubberBand{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}30%{-webkit-transform:scaleX(1.25) scaleY(0.75);-ms-transform:scaleX(1.25) scaleY(0.75);transform:scaleX(1.25) scaleY(0.75)}40%{-webkit-transform:scaleX(0.75) scaleY(1.25);-ms-transform:scaleX(0.75) scaleY(1.25);transform:scaleX(0.75) scaleY(1.25)}60%{-webkit-transform:scaleX(1.15) scaleY(0.85);-ms-transform:scaleX(1.15) scaleY(0.85);transform:scaleX(1.15) scaleY(0.85)}100%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);transform:translateX(10px)}}@keyframes shake{0%,100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}10%,30%,50%,70%,90%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}20%,40%,60%,80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);-ms-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);-ms-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);-ms-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);-ms-transform:rotate(-5deg);transform:rotate(-5deg)}100%{-webkit-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;-ms-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}@keyframes tada{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}10%,20%{-webkit-transform:scale(0.9) rotate(-3deg);-ms-transform:scale(0.9) rotate(-3deg);transform:scale(0.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale(1.1) rotate(3deg);-ms-transform:scale(1.1) rotate(3deg);transform:scale(1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale(1.1) rotate(-3deg);-ms-transform:scale(1.1) rotate(-3deg);transform:scale(1.1) rotate(-3deg)}100%{-webkit-transform:scale(1) rotate(0);-ms-transform:scale(1) rotate(0);transform:scale(1) rotate(0)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);transform:translateX(0%)}}@keyframes wobble{0%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}15%{-webkit-transform:translateX(-25%) rotate(-5deg);-ms-transform:translateX(-25%) rotate(-5deg);transform:translateX(-25%) rotate(-5deg)}30%{-webkit-transform:translateX(20%) rotate(3deg);-ms-transform:translateX(20%) rotate(3deg);transform:translateX(20%) rotate(3deg)}45%{-webkit-transform:translateX(-15%) rotate(-3deg);-ms-transform:translateX(-15%) rotate(-3deg);transform:translateX(-15%) rotate(-3deg)}60%{-webkit-transform:translateX(10%) rotate(2deg);-ms-transform:translateX(10%) rotate(2deg);transform:translateX(10%) rotate(2deg)}75%{-webkit-transform:translateX(-5%) rotate(-1deg);-ms-transform:translateX(-5%) rotate(-1deg);transform:translateX(-5%) rotate(-1deg)}100%{-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05);-ms-transform:scale(1.05);transform:scale(1.05)}70%{-webkit-transform:scale(.9);-ms-transform:scale(.9);transform:scale(.9)}100%{opacity:1;-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}}.bounceIn{-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}60%{opacity:1;-webkit-transform:translateY(30px);-ms-transform:translateY(30px);transform:translateY(30px)}80%{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}60%{opacity:1;-webkit-transform:translateX(30px);-ms-transform:translateX(30px);transform:translateX(30px)}80%{-webkit-transform:translateX(-10px);-ms-transform:translateX(-10px);transform:translateX(-10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes bounceInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}60%{opacity:1;-webkit-transform:translateX(-30px);-ms-transform:translateX(-30px);transform:translateX(-30px)}80%{-webkit-transform:translateX(10px);-ms-transform:translateX(10px);transform:translateX(10px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes bounceInUp{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}60%{opacity:1;-webkit-transform:translateY(-30px);-ms-transform:translateY(-30px);transform:translateY(-30px)}80%{-webkit-transform:translateY(10px);-ms-transform:translateY(10px);transform:translateY(10px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);transform:scale(.3)}}@keyframes bounceOut{0%{-webkit-transform:scale(1);-ms-transform:scale(1);transform:scale(1)}25%{-webkit-transform:scale(.95);-ms-transform:scale(.95);transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3);-ms-transform:scale(.3);transform:scale(.3)}}.bounceOut{-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes bounceOutDown{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes bounceOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes bounceOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}20%{opacity:1;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes bounceOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}20%{opacity:1;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}100%{opacity:1}}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}100%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}100%{opacity:0}}@keyframes fadeOut{0%{opacity:1}100%{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);transform:translateY(20px)}}@keyframes fadeOutDown{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(20px);-ms-transform:translateY(20px);transform:translateY(20px)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);transform:translateY(2000px)}}@keyframes fadeOutDownBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(2000px);-ms-transform:translateY(2000px);transform:translateY(2000px)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);transform:translateX(-20px)}}@keyframes fadeOutLeft{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-20px);-ms-transform:translateX(-20px);transform:translateX(-20px)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes fadeOutLeftBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);transform:translateX(20px)}}@keyframes fadeOutRight{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes fadeOutRightBig{0%{opacity:1;-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);transform:translateY(-20px)}}@keyframes fadeOutUp{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-20px);-ms-transform:translateY(-20px);transform:translateY(-20px)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes fadeOutUpBig{0%{opacity:1;-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(0) scale(1);transform:perspective(400px) translateZ(0) rotateY(0) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(170deg) scale(1);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-ms-transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);transform:perspective(400px) translateZ(150px) rotateY(190deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}100%{-webkit-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-ms-transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);transform:perspective(400px) translateZ(0) rotateY(360deg) scale(1);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;-ms-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-10deg);-ms-transform:perspective(400px) rotateX(-10deg);transform:perspective(400px) rotateX(-10deg)}70%{-webkit-transform:perspective(400px) rotateX(10deg);-ms-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg)}100%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}}.flipInX{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-10deg);-ms-transform:perspective(400px) rotateY(-10deg);transform:perspective(400px) rotateY(-10deg)}70%{-webkit-transform:perspective(400px) rotateY(10deg);-ms-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg)}100%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}}.flipInY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px) rotateX(0deg);-ms-transform:perspective(400px) rotateX(0deg);transform:perspective(400px) rotateX(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateX(90deg);-ms-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px) rotateY(0deg);-ms-transform:perspective(400px) rotateY(0deg);transform:perspective(400px) rotateY(0deg);opacity:1}100%{-webkit-transform:perspective(400px) rotateY(90deg);-ms-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-backface-visibility:visible!important;-ms-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}60%{-webkit-transform:translateX(-20%) skewX(30deg);-ms-transform:translateX(-20%) skewX(30deg);transform:translateX(-20%) skewX(30deg);opacity:1}80%{-webkit-transform:translateX(0%) skewX(-15deg);-ms-transform:translateX(0%) skewX(-15deg);transform:translateX(0%) skewX(-15deg);opacity:1}100%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}@keyframes lightSpeedOut{0%{-webkit-transform:translateX(0%) skewX(0deg);-ms-transform:translateX(0%) skewX(0deg);transform:translateX(0%) skewX(0deg);opacity:1}100%{-webkit-transform:translateX(100%) skewX(-30deg);-ms-transform:translateX(100%) skewX(-30deg);transform:translateX(100%) skewX(-30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(-200deg);-ms-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;-webkit-transform:rotate(200deg);-ms-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:left bottom;-ms-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);opacity:1}100%{-webkit-transform-origin:right bottom;-ms-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);transform:translateY(0)}}@keyframes slideInDown{0%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}100%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInLeft{0%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes slideInRight{0%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);transform:translateX(-2000px)}}@keyframes slideOutLeft{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(-2000px);-ms-transform:translateX(-2000px);transform:translateX(-2000px)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);transform:translateX(2000px)}}@keyframes slideOutRight{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0)}100%{opacity:0;-webkit-transform:translateX(2000px);-ms-transform:translateX(2000px);transform:translateX(2000px)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);transform:translateY(-2000px)}}@keyframes slideOutUp{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0)}100%{opacity:0;-webkit-transform:translateY(-2000px);-ms-transform:translateY(-2000px);transform:translateY(-2000px)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}@-webkit-keyframes hinge{0%{-webkit-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);transform:translateY(700px);opacity:0}}@keyframes hinge{0%{-webkit-transform:rotate(0);-ms-transform:rotate(0);transform:rotate(0);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);-ms-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%{-webkit-transform:rotate(60deg);-ms-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}80%{-webkit-transform:rotate(60deg) translateY(0);-ms-transform:rotate(60deg) translateY(0);transform:rotate(60deg) translateY(0);opacity:1;-webkit-transform-origin:top left;-ms-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}100%{-webkit-transform:translateY(700px);-ms-transform:translateY(700px);transform:translateY(700px);opacity:0}}.hinge{-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translateX(-100%) rotate(-120deg);-ms-transform:translateX(-100%) rotate(-120deg);transform:translateX(-100%) rotate(-120deg)}100%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}@keyframes rollOut{0%{opacity:1;-webkit-transform:translateX(0px) rotate(0deg);-ms-transform:translateX(0px) rotate(0deg);transform:translateX(0px) rotate(0deg)}100%{opacity:0;-webkit-transform:translateX(100%) rotate(120deg);-ms-transform:translateX(100%) rotate(120deg);transform:translateX(100%) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut} .delay03s { animation-delay: 0.3s; -webkit-animation-delay: 0.3s; -moz-animation-delay: 0.3s; -o-animation-delay: 0.3s; -ms-animation-delay: 0.3s; } .delay05s { animation-delay: 0.5s; -webkit-animation-delay: 0.5s; -moz-animation-delay: 0.5s; -o-animation-delay: 0.5s; -ms-animation-delay: 0.5s; } .delay1s { animation-delay: 1s; -webkit-animation-delay: 1s; -moz-animation-delay: 1s; -o-animation-delay: 1s; -ms-animation-delay: 1s; } /* Loading Animation */ .loading {position: relative;} .loading:before { content: ""; z-index: 15; position: absolute; top: 0; left: 0; display: block; height: 100%; width: 100%; background-color: #999999; opacity: 0.6;} .loading:after {z-index:15;content: "";height: 40px;width: 40px;position: absolute;top: 50%;left: 50%;margin: -20px 0 0 -20px;transition: all .75s ease 0s;-webkit-transition: all .75s ease 0s; border-radius: 100%;border-top: 4px solid #555555; animation: loading .75s infinite linear; -webkit-animation: loading .75s infinite linear;} .loading:after {border-right: 4px solid rgba(120,120,120,.8);border-top: 4px solid rgba(120,120,120,.8);border-left: 4px solid rgba(150,150,150,.8);border-bottom: 4px solid rgba(190,190,190,.8);}@-webkit-keyframes loading {from {-webkit-transform: rotate(0deg);}to {-webkit-transform: rotate(360deg) }}@keyframes loading {from {transform: rotate(0deg);}to {transform: rotate(360deg);}} .userLogin a { font-weight:bold;} /******************************************************************************************************************************** TYPOGRAPHY ********************************************************************************************************************************/ body { font-size: 75%; /* 12px */ line-height: 1.5em; /* 18px */ font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; } input { font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; } /******************************************************************************************************************************** LAYOUT FRAMEWORK 960px Body 940px Content + Widget Row ?px Widget Column ********************************************************************************************************************************/ /* ====== Basic Layout Framework ====== */ html { background:#fff;} /* Set TOTAL site width - 940px by default*/ body { width:100%; margin:auto; background:#ccc;} /*Set TOTAL site width */ .contentWrapper {width:960px; margin:auto;} .contentHeader, .contentBody, .contentFooter { background:; margin: 0 auto;} /*Set active width WITH padding/margin */ .contentHeader, .contentFooter { padding:0 10px;} .contentBody { margin:;} .contentFooter { padding-bottom:30px; } /* Page Column/Row Layouts */ .wlRow { *zoom: 1;} .wlRow:after { clear: both; display: block; visibility: hidden; overflow: hidden; height: 0!important; line-height: 0; font-size: xx-large; content: " x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x x "; } .wlCol { float: left; margin:0 10px 20px 10px;} .wlCol { width: 100%; overflow: hidden; _overflow: visible; _zoom: 1; *position: relative; } /*.layoutFp .col1, .layoutSbL .col2, .layoutSbR .col2, .layoutSbB .col3, .layoutCol2 .col2, .layoutCol3 .col3, .layoutCol4 .col4, .layoutCol5 .col5 { margin-right: 0px; }*/ /* ====== Layout Types and Width for FULLSCREEN DESKTOP ====== */ .layoutFp { } .layoutFp .wlCol { width: 940px; } .layoutSbL { } .layoutSbL .col1 { width: 300px; } .layoutSbL .col2 { width: 620px; } .layoutSbR { } .layoutSbR .col1 { width: 620px; } .layoutSbR .col2 { width: 300px; } .layoutSbB { } .layoutSbB .col1 { width: 160px; } .layoutSbB .col2 { width: 580px; } .layoutSbB .col3 { width: 160px; } .layoutCol2 { } .layoutCol2 .wlCol { width:460px; } .layoutCol3 { } .layoutCol3 .col1 { width:300px;} .layoutCol3 .col2 { width:300px;} .layoutCol3 .col3 { width:300px;} .layoutCol4 { } .layoutCol4 .wlCol { width:220px;} .layoutCol5 { } .layoutCol5 .wlCol { width:172px;} /******************************************************************************************************************************** USER ICONS Font Created with http://icomoon.io/app/ - to edit, be sure to load the JSON file located in ../fonts/ ********************************************************************************************************************************/ @font-face { font-family: 'wlib3-user'; src:url('../fonts/wlib3-user/fonts/wlib3-user.eot'); src:url('../fonts/wlib3-user/fonts/wlib3-user.eot?#iefix') format('embedded-opentype'), url('../fonts/wlib3-user/fonts/wlib3-user.woff') format('woff'), url('../fonts/wlib3-user/fonts/wlib3-user.ttf') format('truetype'), url('../fonts/wlib3-user/fonts/wlib3-user.svg#wlib3-user') format('svg'); font-weight: normal; font-style: normal; } @media screen and (-webkit-min-device-pixel-ratio:0) { @font-face { font-family: 'wlib3-user'; src:url('../fonts/wlib3-user/fonts/wlib3-user.svg#wlib3-user') format('svg'); } } .userIcon { font-family:'wlib3-user';speak: none;font-style: normal;font-weight:normal;font-variant: normal;text-transform: none; line-height: 1;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;} .userIcon.envelope:before {content: "\e000";} .userIcon.user:before {content: "\e001";} .userIcon.cog:before {content: "\e002";} .userIcon.switch:before {content: "\e003";} .userIcon.cart:before {content: "\e004";} .userIcon.bubble:before {content: "\e005";} .userIcon.bubbles:before {content: "\e006";} .userIcon.thumbs-up:before {content: "\e007";} .userIcon.thumbs-down:before {content: "\e00d";} .userIcon.checkmark:before {content: "\e008";} .userIcon.home:before {content: "\e60c";} .userIcon.facebook:before {content: "\e009";} .userIcon.twitter:before {content: "\e00a";} .userIcon.twitter-alt:before {content: "\e00a";} .userIcon.googleplus:before {content: "\e60d";} .userIcon.youtube:before {content: "\e60f";} .userIcon.instagram:before {content: "\e610";} .userIcon.websites:before {content: "\e60a";} .userIcon.partners:before {content: "\e60b";} .userIcon.cancel-circle:before {content: "\e00b";} .userIcon.remove-sign:before {content: "\f057";} .userIcon.warning-sign:before {content: "\f071";} .userIcon.info-sign:before {content: "\f05a";} .userIcon.ok-sign:before {content: "\f058";} .userIcon.newspaper:before {content: "\e00c";} .userIcon.film:before {content: "\f008";} .userIcon.picture:before {content: "\f03e";} .userIcon.podcast:before {content: "\e600";} .userIcon.preview:before {content: "\e00c";} .userIcon.checkeredflag:before {content: "\e609";} .userIcon.report:before {content: "\e607";} .userIcon.results:before {content: "\e605";} .userIcon.standings:before {content: "\e608";} .userIcon.calendar:before {content: "\e606";} .userIcon.no88:before {content: "\e605";} .userIcon.no9:before {content: "\e606";} .userIcon.no7:before {content: "\e607";} .userIcon.no5:before {content: "\e608";} .userIcon.no3:before {content: "\e609";} .userIcon.caret-down:before {content: "\e601";} .userIcon.caret-up:before {content: "\e602";} .userIcon.caret-left:before {content: "\e603";} .userIcon.caret-right:before {content: "\e604";} .userIcon.expand:before {content: "\e611";} .userIcon.contract:before {content: "\e612";} /* Allow Font Awesome Icons in lieu of jQuery UI and only apply when using a FA icon */ .ui-icon[class*=" userIcon"] { /* Remove the jQuery UI Icon */ background: none repeat scroll 0 0 transparent; /* Remove the jQuery UI Text Indent */ text-indent: 0; /* Bump it up - jQuery UI is -8px */ margin-top: -0.5em; } .ui-button-icon-only .ui-icon[class*=" userIcon"] { /* Bump it - jQuery UI is -8px */ margin-left: -7px; } /******************************************************************************************************************************** BASIC MENU FRAMEWORK ********************************************************************************************************************************/ /* Navigation */ .contentHeader .navWrapper { position: relative;} .contentHeader .navWrapper .masthead { display: inline-block; float: left; margin:5px 0;width:190px; height:65px; padding:0 5px;} .contentHeader .navWrapper .masthead img.svg, .contentHeader .navWrapper .masthead svg { width: auto; height: 100%; -webkit-filter: drop-shadow( 0 0 2px #000 ); filter: drop-shadow( 0 0 2px #000 ); /* Same syntax as box-shadow }*/ } .contentHeader .navWrapper #navControl { display:none;} .contentHeader .navWrapper .expandIcon { display:none;} .contentHeader .navWrapper #navControl { color: white;position: absolute;right: 10px; border:1px solid #fff; padding:3px 5px; border-radius:5px; top:25px;} .contentHeader .navWrapper #navControl:hover, .contentHeader .navWrapper #navControl:active { color:#000;border:1px solid #fff; background:#fff;} /* Navigation LEVEL 1 */ .contentHeader .menu.mainMenu { position:absolute;bottom: 0;float: left;margin-left:200px;bottom:0;} .contentHeader .menu.mainMenu li { display:block; float:left; position:relative;} .contentHeader .menu.mainMenu>li { padding:0;} .contentHeader .menu.mainMenu li a { display: block; padding:5px; color:#fff; border-right:1px dotted #fff;} .contentHeader .menu.mainMenu li a:hover, .contentHeader .menu.mainMenu li a:active { background:rgba(255,255,255,.2);} /* Navigation LEVEL 2 */ .contentHeader .menu.mainMenu .sub { display:none; position:absolute;z-index:1000; top:100%; width:170px;} .contentHeader .menu.mainMenu li:hover>.sub { display:block;} .contentHeader .menu.mainMenu .sub li a { display:block;position:relative; border-right:0px;} .contentHeader .menu.mainMenu .sub ul li { width:170px; background:#ccc;} /* Navigation LEVEL 3 */ .contentHeader .menu.mainMenu .sub_side { display:none; position:absolute;z-index:1000;left: 170px;top:0;} .contentHeader .menu.mainMenu li:hover > .sub_side { display:block;} .contentHeader .menu.mainMenu .sub a.expand:after { font-family: 'wlib3-admin'; content: "\f0da"; display: inline-block; margin-left:5px; float: right; width:; line-height: 10px; font-size: 8px; } /******************************************************************************************************************************** BREADCRUMB FRAMEWORK ********************************************************************************************************************************/ .pageBreadcrumb ul {} .pageBreadcrumb li { display:block; float:left; margin-right:5px;} .pageBreadcrumb li a:after { margin-left:5px; content:" > ";} /******************************************************************************************************************************** PAGER FRAMEWORK ********************************************************************************************************************************/ .pager li { display: inline-block;text-align: center;} .pager li a { background: #eee;color: #888;height: 16px;width: 12px;padding: 0 2px 0 2px;line-height: 16px;border: 1px solid #ccc;margin:0 2px 0 2px; } .pager li.pageStatus {} .pager li.gotoFirst {} .pager li.prev {} .pager li.next {} .pager li.gotoLast {} .pager li.gotoPage {} /******************************************************************************************************************************** Basic Widget FRAMEWORK ********************************************************************************************************************************/ .wgContent { padding:10px;} /******************************************************************************************************************************** TOOLBOX WIDGET and ROW CLASSES [Widget Classes] - reset (removes all styling from item, needs to also be defined in theme.css - noPadding (Removes all padding from item) - [Row Classes] - equalHeight (equalizes the height of the widgets inside the row.) - reset () ********************************************************************************************************************************/ .wgWrapper.noPad .wgContent { padding:0;} .wgWrapper.reset .wgContent { background:none; border:none; padding:0; margin:0;} .wlRow.reset .wgContent { border:none; padding:0; margin:0; background:none;} .wgWrapper.ad img { width:100%; max-width:300px; height:auto;} .wgWrapper.ad .wgHeader, .wgWrapper.ad .wgSubtitle, .wgWrapper.ad .wgFooter { display:none;} body.Banners .wgWrapper.ad .wgHeader, body.Banners .wgWrapper.ad .wgSubtitle, body.Banners .wgWrapper.ad .wgFooter { display:inherit;} .wgWrapper.hidden .wgHeader, .wgWrapper.hidden .wgSubtitle, .wgWrapper.hidden .wgContent, .wgWrapper.hidden .wgFooter { visibility:hidden; display:none;} .wgWrapper.hidden .uiEdit:after { content:"Element Hidden"; color:#fff; margin-left:10px;} .vertical-align {position: relative;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);} /******************************************************************************************************************************** Basic HTML Elements (inside wgEditor) ********************************************************************************************************************************/ /* Headings */ .wgEditor h1, .wgEditor h2, .wgEditor h3, .wgEditor h4, .wgEditor h5, .wgEditor h6 { font-weight:bold; } .wgEditor h1 { font-size: 32px; line-height: 36px; } .wgEditor h2 { font-size: 28px; line-height: 32px; } .wgEditor h3 { font-size: 24px; line-height: 28px; } .wgEditor h4 { font-size: 20px; line-height: 24px; } .wgEditor h5 { font-size: 18px; line-height: 22px; } .wgEditor h6 { font-size: 14px; line-height: 16px; } .wgEditor p { font-size:14px; line-height:18px; margin-bottom:20px;} .wgEditor blockquote { padding: 10px 20px;margin: 0 0 20px; font-size:14px; line-height:18px; border-left: 5px solid rgba(0,0,0,.6);} .wgEditor blockquote footer, .wgEditor blockquote small, .wgEditor blockquote .small {display: block;font-size:12px;color: #888;} .wgEditor ul {display: block;list-style: disc inside; padding-left:20px; font-size:14px; line-height:18px; margin-bottom:20px;} .wgEditor ul ul { list-style:circle inside; margin-bottom:0px;} .wgEditor ul li { display:list-item;} .wgEditor ol { display:block; list-style:decimal inside; padding-left:20px; font-size:14px; line-height:18px; margin-bottom:20px;} .wgEditor p:last-of-type { margin-bottom:0px;} /******************************************************************************************************************************** User Dialog ********************************************************************************************************************************/ .userDialogOverlay {background:#000;opacity: .75;filter: Alpha(Opacity=75);z-index: 500;position: fixed;top: 0;left: 0;width: 100%;height: 100%;} .userDialog { position:fixed; background:#fff; z-index:550; top:100px; left:50%; overflow:; max-width:900px; max-height:600px; } .userDialog.small { width:250px; max-height:167px;} .userDialog.medium { width:500px;max-height:333px;} .userDialog.large { width:700px;max-height:467px;} .userDialog.full { width:900px; max-height:600px;} .userDialog .userDialogHeader { padding:5px; cursor:move;} .userDialog .userDialogBody { padding:5px; overflow-y:auto;overflow-x:hidden;} .userDialog .userDialogFooter { padding:5px; display:block; border-top:1px solid; } .mediaDialog .userDialog .userDialogBody { -webkit-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1);-moz-box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1);box-shadow: 0px 0px 50px 10px rgba(0, 0, 0, 1); } .userDialog .close { background:#000; color:#fff; display:block; position:absolute; top:-10px; right:-10px; cursor:pointer; background: url(http://www.jrmracing.com/static/themes/jrmracing/images/gallery-close.png);width: 29px;height: 28px;} /******************************************************************************************************************************** USER WIDGETS FRAMEWORK ********************************************************************************************************************************/ /* ====== Profile File Upload ===========*/ .fileWrapper { padding: 1px 2px 1px 2px; height: 20px; width: 64px; overflow: hidden; position: relative; cursor: pointer; background-color: #DDF; } .fileInput { cursor: pointer; height: 100%; position: absolute; top: 0; right: 0; z-index: 99; font-size: 50px; opacity: 0; -moz-opacity: 0; filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); } /* ====== Profile View ====== */ .profileView {} .profileView .profileInfo { width:220px; float:left; display:block; padding:10px; line-height:18px;} .profileView .profileInfo span { display: block; } .profileView .profileInfo .profileUserImage img { width:220px; height:220px; display:block; margin-bottom:10px;} .profileView .userTools li a, .profileView .adminTools li a { display: block; background:#aaa; margin-bottom:1px; padding:5px;} .profileView .adminTools, .profileView .userTools { margin-bottom:10px;} .wgProfilePicture { position: relative;} .wgProfilePicture .profileEdit { position: absolute; bottom: 0; left: 0; padding: 0px 2px; } .profileView .messageCount { display:inline; float:right; background:#000; padding:0px 4px; color:#fff;} .profileView .profileInfo .profileUserInfoHeader { font-weight:bold; font-size:14px;} .profileView .profileUserStats { text-align:left; margin-bottom:10px;} .profileView .profileUserStats th { padding-right:5px;} .profileView .profileUserName { font-size: 36px; line-height: normal; display: block; } .profileView .profileUserName .profileUserStatus { display:inline-block; font-size:12px; margin-left:10px;} .profileView .profileUserName .profileUserStatus .statusIcon { display:inline-block; width:12px; height:12px; margin-right:2px;} .profileView .profileUserName .profileUserStatus { color:red; font-weight:normal;} .profileView.online .profileUserName .profileUserStatus { color:green; font-weight:bold;} .profileView .profileUserName .profileUserStatus .statusIcon { background:red;} .profileView.online .profileUserName .profileUserStatus .statusIcon { background:green;} .profileView .profileUserInfo { text-align:left;} .profileView .profileUserInfo th { padding-right:20px;} .profileView .profileBody {padding: 10px;} .profileView .profileTabs {} .profileView h4 { font-size:14px; line-height:28px; } .profileView .wgTable {} .profileView .wgTable textarea { width:530px; height:150px;} /******************************************************************************************************************************** MEDIA WIDGET LIST/DETAIL/DIALOG ********************************************************************************************************************************/ .videoMethodEmbedded {position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .videoMethodEmbedded iframe, .videoMethodEmbedded object, .videoMethodEmbedded embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%;} .gallery { } .gallery .item { position:relative; } .gallery .item.photo .meta .userIcon:before { content: "\f03e";} .gallery .item.video .meta .userIcon:before { content: "\f008";} .gallery .item.article .meta .userIcon:before { content: "\e00c";} .gallery .item.external .meta .userIcon:before { content: "\e00c";} .gallery .item.podcast .meta .userIcon:before { content: "\e600";} .gallery .item .onClick { cursor:pointer;} .mediaItemAdmin { margin-bottom:5px;} .mediaItemAdmin .adminTools a {display: inline-block;padding:2px;margin-right:2px;background: #f5f5f5;color: #888;border: 1px solid #ddd;border-radius: 4px;font-size:12px;line-height:14px;} .mediaItemAdmin .adminTools a:hover { color:#222;} .mediaItemAdmin .adminTools .adminIcon { margin-right:2px;} .gallery .item .adminTools .adminIcon { font-size:11px;} .gallery .item .adminTools a { color:#555;} .gallery .item .adminTools a:hover { color:#222; border-color:#555;} .gallery .item .adminStatus { font-size:10px; float:left; margin-right:5px;} .gallery .item .adminStatus { padding:0 2px; line-height:12px; border-radius:4px; margin-top:2px;} .gallery .item.expired .adminStatus { background:rgba(255,0,0,.25); border:1px solid red!important;} .gallery .item.unpublished .adminStatus { background:rgba(0,0,255,.25); border:1px solid blue!important;} .gallery .item.tobepublished .adminStatus {background:rgba(255,255,0,.25); border:1px solid yellow!important;} /* Article Gallery */ .gallery .list .item {margin-bottom: 10px;} .gallery .list .item .adminTools { position:absolute; right:10px; bottom:0;} .gallery .list .item .thumb { display:block; width:30%; float:left; padding-right:10px;} .gallery .list .item.podcast .thumb { width:20%} .gallery .list .item .thumb img { width:100%; height:auto; border: 1px solid #C9C9C9; background-color: #fff;padding: 2px; max-width:160px; max-height:90px;} .gallery .list .item.podcast .thumb img { width:100%; height:auto; border: 1px solid #C9C9C9; background-color: #fff;padding: 2px; max-width:100px; max-height:100px;} .gallery .list .item .title { display:block; width:70%; float:left;} .gallery .list .item.podcast .title { width:80%;} .gallery .list .item h3 {} .gallery .list .item .meta {} .gallery .list .item .description {} .showMore { display:block; clear:both; text-align:center; padding:4px;margin-top:10px;background: #f5f5f5;color: #555;border: 1px solid #ddd;border-radius:4px;font-size:14px;line-height:14px;} .showMore:hover { color:#222;border-color:#888;} .gallery .list .item .adminTools { top: 0;} /* Image Gallery */ .gallery .grid .item { width:33%; height:200px; float:left; padding:10px 8px;} .gallery .grid .item .thumb { width: 100%; padding-bottom: 56.25%; position: relative;} .gallery .grid .item .thumb .img { border: 1px solid #C9C9C9; background-color: #fff;padding: 2px; width:100%; height:100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0;} .gallery .grid .item h3 {font-size: 14px;text-decoration: none;color: #222;display: block;} .gallery .grid .item .meta { font-size:11px;font-style: normal;color: #888;} .gallery .grid .item .description { display:none;} .gallery .grid .item.photo .thumb { } .gallery .grid .item.photo .thumb .img {} /* Fullpage View */ .mediaFullpage { } .mediaFullpage .img { } .mediaFullpage .header { } .mediaFullpage .header h1 { font-size:30px; line-height:34px; } .mediaFullpage .header h2 { font-size:12px; line-height:16px; font-weight:normal; margin-bottom:5px;} .mediaFullpage .meta p { font-size:11px; line-height:10px; font-style:normal; color:#888; margin-bottom:5px;} .mediaFullpage .meta .tags { margin-bottom:5px;} .mediaFullpage .summary { display:none;} .mediaFullpage .shareblock { float:right; clear:both; margin-bottom:10px;} .ie7 .mediaFullpage .shareblock { float:right; clear:both; margin-bottom:10px;} .mediaFullpage .shareblock .fbLike, .mediaFullpage .shareblock .twRetweet, .mediaFullpage .shareblock .commentsBtn { display:inline-block; margin-left:0; font-weight:normal;} .mediaFullpage .shareblock .social-btn { } .ie7 .mediaFullpage .media { clear:both; margin-top:30px;} .mediaFullpage .media { clear:both;} .mediaFullpage .detail { margin:20px 0 10px 0; float:right;width:430px;font-size:14px; line-height:18px; } .mediaFullpage .detail p { margin-bottom: 20px;} .mediaFullpage .article-list p { margin-bottom:0px;} .mediaFullpage .detail a { color:#ec1c24; font-weight:bold; border-bottom: 1px dotted #888; } .mediaFullpage .detail a:hover, .mediaFullpage .detail a:active { color:#760e12; border-bottom: 1px dotted #760e12; background:#eee; } .mediaFullpage .lftbar { float:left;width:155px; margin-right:10px; margin-top:20px;} .mediaFullpage .lftbar h3 { text-transform:uppercase; font-size:11px; margin-bottom:5px;} .mediaFullpage .recent li { background:url(../images/red-ball.png) 0 5px no-repeat; font-size:11px; display:block; line-height:14px; margin-bottom:5px; } .mediaFullpage .recent li a { display:inline-block; width:135px; color:#222;} .mediaFullpage .recent li .ball { border-radius:4px; width:4px; height:4px; background:red; display:inline-block; float:left; margin:5px 5px 2px 0;} .mediaFullpage .recent li:hover a { color:#888;} .mediaFullpage .caption { width:600px; margin:5px 0 0 0; font-size:11px; line-height:13px; color:#888;font-style:italic;} /*.mediaFullpage .ad { display:inline-block;margin:10px 0 30px 0; clear:both; width:598px; height:68px; background:#888; border:1px solid #000;}*/ /* Comments */ .mediaFullpage .comments { border-top:3px solid #000;} .mediaFullpage .comments .header { float:left; display:block;} .mediaFullpage .comments h3 { font-size:14px; line-height:normal;} .mediaFullpage .comments .header .commentCount { font-size:14px; font-weight:normal;} .mediaFullpage .comments .login { width:250px; float:right; display:block;} .mediaFullpage .newComment { clear:both; margin-bottom:20px; margin-top:10px; border-bottom:1px dotted #000; padding-bottom:20px;} .mediaFullpage .newComment h3 { margin-bottom:5px;} .mediaFullpage .newComment textarea { font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; width: 534px; height:75px;} .mediaFullpage .newComment .postBody { font-size:12px; line-height:normal;} .mediaFullpage .newComment .button { float:right;} .mediaFullpage .newComment .terms { text-align:right; display: block; line-height: 24px;} .mediaFullpage .comments .newComment .button { background:#000; color:#fff; padding:5px 10px; margin-left:10px;} .mediaFullpage .comments .newComment .button:hover { background:#222;} .mediaFullpage .comments .newComment .button:active { position:relative; top:1px; left:1px;} .mediaFullpage .comments .comment { border-bottom:1px dotted #000; margin-bottom:10px; padding-bottom:10px; position:relative;} .mediaFullpage .comments .userImage { float:left;} .mediaFullpage .comments .userImage img { max-width:55px; max-height:55px; } .mediaFullpage .comments .comment .meta .username { font-size:14px; font-weight:bold;} .mediaFullpage .comments .postBody { width:540px; float:right; margin:0;} .mediaFullpage .comments .postBody p { font-size:14px; line-height:normal;} .mediaFullpage .comments .comment .postBody .voteTools { position:absolute; bottom:10px; right:0;} .mediaFullpage .comments .comment .postBody .voteTools .button {padding: 2px 4px 3px 4px;display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;font-weight: bold;line-height: 1;vertical-align: middle; cursor:pointer;} .mediaFullpage .comments .comment .postBody .voteTools .button { display: inline-block; background-color: #fff; /* Saf4+, Chrome */ border: 1px solid #ccc; color: #666; text-align: center; text-shadow: 0 -1px 0 #fff; background-image: -webkit-linear-gradient(top, #fff, #ddd); background-image: -moz-linear-gradient(top, #fff, #ddd); background-image: -ms-linear-gradient(top, #fff, #ddd); background-image: -o-linear-gradient(top, #fff, #ddd); background-image: linear-gradient(top, #fff, #ddd); } .mediaFullpage .comments .comment .postBody .voteTools .button:hover { background-color: #fff; /* Saf4+, Chrome */ border: 1px solid #ccc; color: #666; text-align: center; text-shadow: 0 -1px 0 #fff; background-image: -webkit-linear-gradient(top, #ddd, #fff); background-image: -moz-linear-gradient(top, #ddd, #fff); background-image: -ms-linear-gradient(top, #ddd, #fff); background-image: -o-linear-gradient(top, #ddd, #fff); background-image: linear-gradient(top, #ddd, #fff); } .mediaFullpage .comments .comment .postBody .voteTools .button:active { background-color: #ddd; background-image: none; filter: none; } .mediaFullpage .comments .comment .postBody .voteTools .button.disabled {padding: 2px 4px 3px 4px;display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;font-weight: bold;line-height: 1;vertical-align: middle; cursor:default;} .mediaFullpage .comments .comment .postBody .voteTools .button.disabled { background-color: #fff;border: 1px solid #a5e5ab; color: #188722; text-shadow: 0 -1px 0 #fff;background-image: -webkit-linear-gradient(top, #fff, #d5f0d8);background-image: -moz-linear-gradient(top, #fff, #d5f0d8);background-image: -ms-linear-gradient(top, #fff, #d5f0d8);background-image: -o-linear-gradient(top, #fff, #d5f0d8);background-image: linear-gradient(top, #fff, #d5f0d8);} .mediaFullpage .comments .comment .postBody .voteTools .counter { margin-left:0;} .mediaFullpage .comments .comment .postBody .userTools{ margin-top:5px;font-size:12px; line-height:normal;} .mediaFullpage .comments .comment .postBody .adminTools { position:absolute; top:0; right:0;} /******************************************************************************************************************************** Media Dialog ********************************************************************************************************************************/ .mediaDialog .userDialogBody { padding:0;} .mediaDialog .userDialogFooter, .mediaDialog .userDialogHeader { display:none;} .mediaDialog .mediaInfo { width:300px; display:block; float:right; max-height:500px; overflow:hidden;} .mediaDialog .mediaInfo .header { background:#333; color:#fff; padding:5px;} .mediaDialog .mediaInfo .header h1 { font-size:22px; line-height:30px;} .mediaDialog .mediaInfo .info { padding:5px 10px;} .mediaDialog .mediaInfo .description {padding:0 10px; height:313px; min-height:313px; overflow-y: scroll;} .mediaDialog .mediaInfo .meta {font-size: 11px;font-style: normal;color: #888;} .mediaDialog .tags { border-bottom:1px dotted #ccc; margin-bottom:5px; padding-bottom:5px;} .mediaDialog .buttons a { padding:5px; background:red; display:block; text-align:center; color:#fff;} .mediaDialog .buttons a .userIcon { } .mediaDialog .multimedia { width:600px; display:block; float:left;} .mediaDialog .ad { width:900px; height:110px; display:block; clear:both; float:left; background:#333;} .mediaDialog .ad img { width:600px; height:90px; margin:10px auto; -moz-box-shadow: 0 0 5px #000; -webkit-box-shadow: 0 0 5px #000;box-shadow: 0 0 5px #000;} /******************************************************************************************************************************** Slider/Album ********************************************************************************************************************************/ .bx-wrapper .bx-viewport { box-shadow:none; border:none; left: 0px;} .bx-wrapper .bx-controls-direction a { z-index:100;} .sliderThumbsWrapper .active { border-left:1px solid red; border-right:1px solid red;} .sliderAlbumWrapper .bx-viewport { margin-bottom:;} .sliderAlbumWrapper ul li img { margin: auto;} .sliderAlbumWrapper .bx-controls-direction .bx-prev, .sliderAlbumWrapper .bx-controls-direction .bx-next { display: block; height: 100%; width:25%; top: 0;margin: 0; background:none;} .sliderAlbumWrapper .bx-controls-direction .bx-prev:hover, .sliderAlbumWrapper .bx-controls-direction .bx-next:hover { background:rgba(0,0,0,.4);} .sliderAlbumWrapper .bx-controls-direction .bx-prev:hover:before, .sliderAlbumWrapper .bx-controls-direction .bx-prev:active:before, .sliderAlbumWrapper .bx-controls-direction .bx-next:hover:before, .sliderAlbumWrapper .bx-controls-direction .bx-next:active:before { opacity:.5; content:""; display:block; width:100%; height:100%; background-size:cover; background:center center no-repeat;} .sliderAlbumWrapper .bx-controls-direction .bx-prev { left: 0;} .sliderAlbumWrapper .bx-controls-direction .bx-next { right:0; } .sliderAlbumWrapper .bx-controls-direction .bx-prev:hover:before, .sliderAlbumWrapper .bx-controls-direction .bx-prev:active:before { background-image:url(../images/prev.png) ; } .sliderAlbumWrapper .bx-controls-direction .bx-next:hover:before, .sliderAlbumWrapper .bx-controls-direction .bx-next:active:before { background-image:url(../images/next.png);} .sliderThumbsWrapper li:before { content:""; display:block; width:100%; height:100%; background:rgba(0,0,0,1);} /******************************************************************************************************************************** Tag List ********************************************************************************************************************************/ .tags a, .tags span {display: inline-block;padding: 0 2px;margin-right:2px;background: #f5f5f5;color: #555;border: 1px solid #ddd;border-radius: 2px;font-size: 10px;line-height:14px;max-width: 10em;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;} /******************************************************************************************************************************** PODCAST WIDGET ********************************************************************************************************************************/ .podcastDisplay { margin-bottom:10px;background:;} .podcastDisplay .podcastDisplayInfo { margin-bottom:5px;} .podcastDisplay .thumb { width:20%;display:block; float:left; padding-right:10px;} .podcastDisplay .thumb img { width:100%; height:auto; border: 1px solid #C9C9C9; background-color: #fff;padding: 2px; max-width:100px; max-height:100px;} .podcastDisplay .title { display:block; width:80%; float:left;} .podcastDisplay h3 {} .podcastDisplay .meta {} .podcastDisplay .description {} .podcastDisplay .podcastPlayerWrapper { width:100%; display:block; clear:both; height:30px;} .podcastDisplay { } .podcastDisplay .podcastDisplayInfo .title h3 { } .podcastDisplay .podcastDisplayInfo .title h3 b { font-weight:normal;} .podcastDisplay .podcastDisplayInfo .meta { color: #888;} .podcastDisplay .podcastDisplayInfo .meta .userIcon:before {content: "\e600";} /* Podcast Player */ .podcastPlayer { padding-bottom:20px; margin-bottom:20px; border-bottom:1px solid #888; display:block; } .podcastPlayer .podcastPlayerDisplay { margin-bottom:10px;} .podcastPlayer .podcastPlayerDisplay .img { display:block; float:left; width:100px; height:100px; overflow:hidden;} .podcastPlayer .podcastPlayerDisplay .podcastPlayerInfo { display:inline-block; padding-left:10px; width: 445px;} .podcastPlayer .podcastPlayerDisplay .title { font-size:18px; line-height:18px;} .podcastPlayer .podcastPlayerDisplay p {} .podcastPlayer .podcastPlayerDisplay .jwPlayer { display:block;width:445px; height: 40px;background: #222; } .podcastPlayer .podcastPlayerButtons a { padding:2px; display:inline-block;} /******************************************************************************************************************************** RACING WIDGETS ********************************************************************************************************************************/ .racingSchedule {} .racingResults {} .racingStandings {} .eventSchedule .scheduleTabs { display:none;} .eventSchedule .scheduleTabs span { background:rgba(0,0,0,.3); line-height:19px; padding:2px 5px; cursor:pointer;} .eventSchedule .scheduleTabs span.active {background: #000;color: #fff;} .eventSchedule { float: left;clear: left;display:block; margin-bottom:10px; overflow:hidden;} .eventSchedule table { font-size:11px; line-height:16px; font-weight:normal; width:100%; line-height:20px;} .eventSchedule table td { padding:1px 2px; vertical-align:top;} .eventSchedule table tr.odd { background:rgba(255,255,255,.3)} .eventSchedule table tr.even { background:rgba(255,255,255,.1)} .eventSchedule table thead tr { background:red; color:#fff;} .eventSchedule table td.date { width:; } .eventSchedule table td.event { width:; font-weight:bold; } .eventSchedule table td.time { width:; text-align:right;} .eventSchedule table td.network { text-align:right;} .eventSchedule table td.network .networkLogos { float:right;} .eventSchedule table.appearanceSchedule td.event {} .eventSchedule table td.network span { display:block; float:left; width:51px; height:20px; overflow:hidden;} .eventSchedule table td.network .tvNetwork { margin-right:3px;} .eventSchedule table td.network img { height:20px; max-width:51px; } .eventSchedule table td.network svg { fill: #000 !important; width:51px; height:20px; overflow:hidden; margin:0; line-height:16px; } .eventSchedule table.appearanceSchedule td.event i { font-weight:normal; margin-left: 5px;} /******************************************************************************************************************************** Schedule ********************************************************************************************************************************/ .racingSchedule { } .racingSchedule .scheduleListHeader { position: relative; display: block; height:40px; background: #888;overflow:hidden; cursor:pointer;} .racingSchedule .scheduleListHeader:hover { background:rgba(0,0,0,.2)} .racingSchedule .header .scheduleListHeader { background: #888; cursor:default;} .racingSchedule .active .scheduleListHeader { background:rgba(0,0,0,.5)} .racingSchedule .scheduleListHeader>div { float:left;border-right:1px solid #000; padding:5px 10px;} .racingSchedule .scheduleListHeader>div>span { display:block; line-height:15px;} .racingSchedule .scheduleListHeader>div>.adminIcon, .racingSchedule .scheduleListHeader>div>.position { line-height:30px;} .racingSchedule .scheduleListHeader>div:last-child { border-right:none;} .racingSchedule .header .scheduleListHeader>div>span {line-height:30px;} .racingSchedule .header .scheduleListHeader { border-bottom:1px solid #000;} .racingSchedule .header .scheduleListHeader .userIcon { opacity:0;} .racingSchedule .info .scheduleListHeader { position: relative; display: block; height:30px; background:orange;overflow:hidden;} .racingSchedule .info .scheduleListHeader .chaseInfo {line-height:30px; text-align:center; padding:0; width:100%;} .racingSchedule .scheduleListHeader .expandIcon { width:5%;} .racingSchedule .scheduleListHeader .expandIcon .userIcon { line-height:30px;} .racingSchedule .active .expandIcon .userIcon:before {content: "\e612";} .racingSchedule .expandIcon .userIcon:before {content: "\e611";} .racingSchedule .scheduleListHeader .statusIcon { width:5%;} .racingSchedule .scheduleListHeader .statusIcon .userIcon { line-height:30px;} .racingSchedule .header .statusIcon .userIcon.raceflag:before { content: "\e609";} .racingSchedule .incomplete .statusIcon .userIcon.raceflag:before { content: "\e609"; color:red;} .racingSchedule .complete .statusIcon .userIcon.raceflag:before { content: "\e609"; color:green;} .racingSchedule .current .statusIcon .userIcon.raceflag:before { content: "\e609"; color:yellow;} .racingSchedule .scheduleListHeader .dayTime { width:17%;} .racingSchedule .scheduleListHeader .dayTime .date {font-weight:bold;} .racingSchedule .scheduleListHeader .dayTime .time {} .racingSchedule .scheduleListHeader .eventTrack { width:40%;} .racingSchedule .scheduleListHeader .eventTrack .event {font-weight:bold; overflow:hidden; white-space: nowrap; text-overflow: ellipsis;} .racingSchedule .scheduleListHeader .eventTrack .track {} .racingSchedule .scheduleListHeader .start { width:9%;} .racingSchedule .scheduleListHeader .start .position {} .racingSchedule .scheduleListHeader .finish { width:9%;} .racingSchedule .scheduleListHeader .start .position {} .racingSchedule .scheduleListHeader .postRace { width:15%;} .racingSchedule .scheduleListHeader .postRace .results {} .racingSchedule .scheduleListHeader .postRace .report {} .racingSchedule li.current .scheduleListHeader { background:;} .racingSchedule li.complete .scheduleListHeader { background:;} .racingSchedule li.incomplete .scheduleListHeader { background:;} .racingSchedule .scheduleListContent { display:none; overflow:hidden!important;} .racingSchedule .scheduleListContent { padding:10px; position:relative; z-index:2;} .racingSchedule .scheduleListContent .bgImage { display:; position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: auto; } .racingSchedule .scheduleListContent .trackInfo { float:left; display:block; margin-bottom:10px;} .racingSchedule .scheduleListContent .trackInfo h2 { font-size:18px; font-weight:bold; text-transform:uppercase;} .racingSchedule .scheduleListContent .trackInfo .raceInfo { width:220px; float:left;} .racingSchedule .scheduleListContent .trackInfo p { margin-left:10px;} .racingSchedule .scheduleListContent .trackInfo .trackImage { width:130px; overflow:hidden; float:left; margin-top:5px;} .racingSchedule .scheduleListContent .trackInfo .trackImage svg { fill: #000 !important; width:100%;} .racingSchedule .scheduleListContent .trackInfo .trackImage svg .st0 { fill:red !important;} .racingSchedule .scheduleListContent .trackInfo .trackImage img { max-width:130px; max-height:75px; } .racingSchedule .scheduleListContent .eventSchedule {width: 350px;} .racingSchedule .scheduleListContent .eventInfo {width: 350px; display: inline-block;} .racingSchedule .eventButtons { float: left;clear:left;display: block; margin-bottom:10px; overflow:hidden; width:100%;} .racingSchedule .eventButtons a { display:block; float:left; background:red; padding:5px 10px; width:186px; margin-bottom:10px; margin-right:10px; line-height:30px; font-size:16px; font-weight:bold; color:#fff;} .racingSchedule .eventButtons a .userIcon { margin-right:5px;} .racingSchedule .eventButtons a.resultsLink, .racingSchedule .eventButtons a.nnsLink { margin-right:0;} .racingSchedule .eventButtons a.nnsLink { width:340px; line-height:16px; font-size:12px; font-weight:normal; text-align:center;} .racingSchedule .eventButtons a.nnsLink b { display:block;font-size:14px;} .racingSchedule .scheduleListContent .drivers { display:block; position:absolute; top:10px; right:10px; padding-bottom:20px;} .racingSchedule .drivers .car { width:225px; display:block; position:relative; margin-bottom:10px;} .racingSchedule .drivers .car img { width:100%; padding-bottom: 40px;} .racingSchedule .drivers .nameplate { position:absolute; bottom:0; right:-10px; width: 100%;height:40px; padding:5px; line-height:30px; color:#fff; background:rgba(0,0,0,.5);} .racingSchedule .drivers .nameplate .number { font-family:Impact; font-size:36px; font-weight:normal; font-style:italic; margin-right:10px; display:inline-block;text-indent:-9999px; position:relative; height:30px; width:53px;} .racingSchedule .drivers .nameplate .number img { width:53px; height:30px;position:absolute; top:0; left:0; fill:#fff !important;} .racingSchedule .drivers .nameplate .number svg { width:53px; height:30px;position:absolute; top:0; left:0; fill:#fff !important;} .racingSchedule .drivers .nameplate .name { display:inline-block; font-style:italic;} .racingSchedule .drivers .nameplate .name .firstName { display:block; line-height:12px;} .racingSchedule .drivers .nameplate .name .lastName { display:block; line-height:18px; font-weight:bold; font-size:18px;} .racingSchedule .drivers .raceplate { position:absolute; bottom:25px; right:-10px; width:95px;} .racingSchedule .drivers .raceplate .position { box-shadow: 0px 0px 5px #000; display:block;float:left;margin-right:5px; width:40px; text-align:center;padding-bottom:6px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.5);} .racingSchedule .drivers .raceplate .position b { background:rgba(0,0,0,.5);;display:block; text-transform:uppercase; font-size:10px; line-height: 12px; color:; padding-bottom:1px;} .racingSchedule .drivers .raceplate .position span { background:none;display:block; font-size:16px; line-height:16px; font-weight:bold;} /******************************************************************************************************************************** Stats [Results & Standings] ********************************************************************************************************************************/ table.stats { width:100%;} table.stats td { border-left:1px solid rgba(200,200,200,1); text-transform:capitalize;} table.stats thead th:last-child, table.stats tbody td:last-child { border-right:1px solid rgba(200,200,200,1);} table.stats th, table.stats td { padding:5px 8px 5px 8px;} table.stats thead th { text-align:left; background:#000; color:#fff;} table.stats tbody { border-bottom:1px solid rgba(200,200,200,1);} table.stats tbody tr.odd { background:rgba(255,255,255,1);} table.stats tbody tr.even { background:rgba(240,240,240,1);} table.stats tbody tr.highlight { background:yellow;} table.stats tfoot td { padding:0; border:none;} table.stats tfoot .eventButtons a { display:block; float:left; background:red; padding:5px 10px; width:; margin-right:10px; line-height:16px; font-weight:; color:#fff;} table.stats tfoot .eventButtons a .userIcon { margin-right:5px; font-size:16px;} table.stats tfoot .eventButtons a .userIcon { line-height:16px;} table.stats tfoot .eventButtons a.scheduleLink .userIcon { font-size:14px;} table.stats thead .raceDate th { font-size:10px; font-weight:normal;} table.stats tbody .event { display:block;} .statsHeader { position:relative; margin-bottom:10px; } /*.statsHeader .selector { width:230px; position:absolute; right:0; font-size:px;} .statsHeader .selector .eventInfo { background:red; color:#fff; padding:5px 10px; line-height:19px;} .statsHeader .selector .eventInfo span { display:block;} .statsHeader .selector .eventInfo .date { line-height:24px; position:absolute; left:5px;} .statsHeader .selector .eventInfo .event, .statsHeader .selector .eventInfo .track { } .statsHeader .selector .userIcon { position:absolute; right:5px; line-height:29px; top:0;} .statsHeader .selector .eventInfo .event { font-weight:bold;} .statsHeader .selector .dropdown { display:none; max-height:200px; overflow-y:auto; border-top:none;} .statsHeader .selector:hover .dropdown { display:block; position:relative; background:#fff;} .statsHeader .selector .dropdown .eventInfo { cursor:pointer; border:none; color:#222;} .statsHeader .selector .dropdown .eventInfo.odd, .statsHeader .selector .dropdown .eventInfo.odd.incomplete:hover { background:rgba(0,0,0,.3)} .statsHeader .selector .dropdown .eventInfo.even, .statsHeader .selector .dropdown .eventInfo.even.incomplete:hover { background:rgba(0,0,0,.1)} .statsHeader .selector .dropdown .eventInfo:hover { background:red; color:#fff;} .statsHeader .selector .dropdown .eventInfo.incomplete { opacity:.5;} .statsHeader .selector .dropdown .eventInfo.current { background:yellow; color:#222;}*/ .statsHeader h2 { font-size:24px; line-height:28px;} .statsHeader .eventButtons { display: block; margin-top:10px; position:relative;} .statsHeader .eventButtons a { display:block; float:left; background:red; padding:5px 10px; width:; margin-right:10px; line-height:16px; font-weight:; color:#fff;} .statsHeader .eventButtons .selector { display:block; float:right; background:red; padding:5px 10px; line-height:16px; font-weight:; color:#fff;} .statsHeader .eventButtons .selector select { width: 100%; } .statsHeader .eventButtons a .userIcon { margin-right:5px; font-size:16px;} .statsHeader .eventButtons a.nnsLink { width:340px; line-height:16px; font-size:12px; font-weight:normal; text-align:center;} .statsHeader .eventButtons a.nnsLink b { display:block;font-size:14px;} /******************************************************************************************************************************** Race Center [Next Race + Countdown + Schedule] - [Last Race] - [Custom HTML] ********************************************************************************************************************************/ .countdown { width: 215px; margin:auto;} .countdown .group { display:block; float:left; width:50px; background:; margin-right:5px;} .countdown .group:last-child { margin-right:0;} .countdown .title {display:block; text-align:center; font-size:10px; line-height:12px; text-transform:uppercase; font-weight:bold; background:red; color:#fff;} .countdown .digits {display:block; text-align:center; font-size:24px; line-height:38px; font-weight:bold; background:#222; color:#fff;} .countdown .countdownComplete { display:none; } .countdown .countdownComplete .group { width:215px; background:#222; color:#fff;} .countdown .countdownComplete .networks { padding:4px 5px; padding-botom:0px;} .countdown .countdownComplete svg { fill:#fff; height:30px; width:100px; overflow:hidden; display:block; float:left;} .countdown .countdownComplete img { fill:#fff; max-height:30px; max-width:100px; overflow:hidden; display:block; float:left;} .raceCenter .nextRace { border-bottom:1px dotted #000; padding-bottom:10px;} .raceCenter h2 { font-size:16px;} .raceCenter .trackInfo { margin-bottom:10px; position:relative; display:block; height:70px;} .raceCenter .trackInfo h2 { font-size:18px; font-weight:bold; text-transform:uppercase;} .raceCenter .trackInfo .raceInfo { } .raceCenter .trackInfo p { margin-left:10px;} .raceCenter .trackInfo .trackImage { width:100px; position:absolute; top:-10px; right:0; margin-top:5px;} .raceCenter .trackInfo .trackImage svg { fill: #000 !important; width:100px; height:75px; } .raceCenter .trackInfo .trackImage img { max-width:100px; max-height:75px; } .raceCenter .drivers { position:relative; } .raceCenter .drivers .car { position:relative; z-index:10; height:70px;} .raceCenter .drivers .car .carRender { width:120px; display:block; position:absolute; top:-10px; right:0; z-index:500;} .raceCenter .drivers .car img { width:120px;} /*.raceCenter .drivers .car:hover .carRender { transition:0.5s; width:250px; } .raceCenter .drivers .car:hover img { transition:0.5s; width:250px;}*/ .raceCenter .drivers .nameplate { position:absolute; top:5px; left:0; width:85%; color:#fff; background:rgba(0,0,0,.5); padding:2px; z-index:0;} .raceCenter .drivers .sponsor { display:block; position:relative;bottom:0;} .raceCenter .drivers .nameplate .number { font-family:Impact; font-size:36px; font-weight:normal; font-style:italic; margin-right:42px; display:inline-block;text-indent:-9999px;} .raceCenter .drivers .nameplate .number img { max-width:36px; max-height:36px;position:absolute; top:0; left:5px;} .raceCenter .drivers .nameplate .number svg { width:36px; height:36px;position:absolute; top:0; left:5px; fill:#fff !important;} .raceCenter .drivers .nameplate .name { display:inline-block; font-style:italic;} .raceCenter .drivers .nameplate .name .firstName { display:block; line-height:12px;} .raceCenter .drivers .nameplate .name .lastName { display:block; line-height:16px; font-weight:bold; font-size:16px;} .raceCenter .drivers .raceplate { position:absolute; bottom:top; right:-5px;} .raceCenter .drivers .raceplate .position { box-shadow: 0px 0px 5px #000; display:block;float:left;margin-right:5px; width:40px; text-align:center;padding-bottom:6px; overflow:hidden; background:#fff;} .raceCenter .drivers .raceplate .position:last-child {margin-right: 0px;} .raceCenter .drivers .raceplate .position b { background:rgba(0,0,0,.5);display:block; text-transform:uppercase; font-size:10px; line-height: 12px; color:; padding-bottom:1px;} .raceCenter .drivers .raceplate .position span { background:none;display:block; font-size:16px; line-height:16px; font-weight:bold;} .raceCenter .eventSchedule {width: 100%; float:none; clear:none;} .raceCenter .eventSchedule .scheduleTabs { display:block;} .raceCenter .eventSchedule .appearanceSchedule { display:none;} .raceCenter .eventSchedule table td.date { width:17%;} .raceCenter .eventSchedule table td.event { width:; } .raceCenter .eventSchedule table td.time { width:;} .raceCenter .eventSchedule table td.network { width:25%;} .raceCenter .lastRace { margin-top:10px; margin-bottom:5px;} .raceCenter .lastRace .drivers .car { position:relative; z-index:10; margin-bottom:10px; height:auto;} .raceCenter .lastRace .drivers .car:last-child { margin-bottom:0;} .raceCenter .lastRace .nameplate { display:block; position:relative;} .raceCenter .lastRace .raceplate { display:; top:5px; right:0;} /******************************************************************************************************************************** USER TABS ********************************************************************************************************************************/ .userTabs {} .userTabs .userTabHeader ul li { display:block; float:left;} .userTabs .userTabHeader ul li a { display:block;background: #333; color:#fff; width: 100px; padding: 2px 5px; margin-right: 1px; } .userTabs .userTabHeader ul li a:hover {background:#666; color:#fff;} .userTabs .userTabHeader ul li a.selected { background:#ccc; color:#222; } .userTabs .userTabBody { background:#ccc; padding:10px;} /******************************************************************************************************************************** TOOLBOX CLASSES ********************************************************************************************************************************/ .pull { float:left;clear:left;display:block;} .push { float:right;clear:right;display:block;} img.pull { margin-right:10px;} img.push { margin-left:10px;} img.pull, img.push { margin-bottom:10px;} /******************************************************************************************************************************** INPUT FIELDS ********************************************************************************************************************************/ input[type=checkbox], input[type=radio] { vertical-align: middle; position: relative; bottom: 2px; margin-right:5px; } .valid { background-color: #aaffaa;} .invalid { background-color: #ffcccc;} .hint { font-size: smaller; color: #888888; } /******************************************************************************************************************************** TABLES ********************************************************************************************************************************/ .wgTable { } .wgTable td { padding: 1px 3px 1px 3px; vertical-align: middle; } .wgTable th { padding-right:20px; font-weight:normal;} /******************************************************************************************************************************** JQUERY-UI OVERWRITES ********************************************************************************************************************************/ .ui-widget, .ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button { font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size: 100%;} /******************************************************************************************************************************** BUTTONS ********************************************************************************************************************************/ /* Shareblock Buttons*/ .shareblock .button {padding: 2px 4px 3px 4px;display: inline-block;-webkit-border-radius: 4px;-moz-border-radius: 4px;-ms-border-radius: 4px;-o-border-radius: 4px;border-radius: 4px;font-weight: bold;line-height: 1;vertical-align: middle; cursor:pointer;} /* Facebook Button*/ .fbLike .button {background-color: #eceef5;border: 1px solid #cad4e7; color: #3b5998; text-shadow: 0 -1px 0 #fff;background-image: none; } .fbLike .button:hover {background-color: #eceef5;border: 1px solid #9dacce; color: #3b5998; cursor: pointer;} .fbLike .button .userIcon { margin-right:3px;} .fbLike .counter { display:none;} /* Twitter Button*/ .twRetweet .button { background-color: #fff; border: 1px solid #a4cce5; color: #186487; text-shadow: 0 -1px 0 #fff; background-image: -webkit-linear-gradient(top, #fff, #d5e6ef); background-image: -moz-linear-gradient(top, #fff, #d5e6ef); background-image: -ms-linear-gradient(top, #fff, #d5e6ef); background-image: -o-linear-gradient(top, #fff, #d5e6ef); background-image: linear-gradient(top, #fff, #d5e6ef); } .twRetweet .button:hover { background-color: #d5e6ef; border: 1px solid #a4cce5; color: #186487; text-shadow: 0 -1px 0 #fff; background-image: -webkit-linear-gradient(top, #d5e6ef, #fff); background-image: -moz-linear-gradient(top, #d5e6ef, #fff); background-image: -ms-linear-gradient(top, #d5e6ef, #fff); background-image: -o-linear-gradient(top, #d5e6ef, #fff); background-image: linear-gradient(top, #d5e6ef, #fff); } .twRetweet .button:active { background-color: #d5e6ef; background-image: none; filter: none; } .twRetweet .button .userIcon { margin-right:3px;} /* Comment Button*/ .commentsBtn .button { background-color: #fff;border: 1px solid #a5e5ab; color: #188722; text-shadow: 0 -1px 0 #fff;background-image: -webkit-linear-gradient(top, #fff, #d5f0d8);background-image: -moz-linear-gradient(top, #fff, #d5f0d8);background-image: -ms-linear-gradient(top, #fff, #d5f0d8);background-image: -o-linear-gradient(top, #fff, #d5f0d8);background-image: linear-gradient(top, #fff, #d5f0d8);} .commentsBtn .button:hover { background-color: #d5f0d8; border: 1px solid #a5e5ab; color: #188722; text-shadow: 0 -1px 0 #fff; background-image: -webkit-linear-gradient(top, #d5f0d8, #fff); background-image: -moz-linear-gradient(top, #d5f0d8, #fff); background-image: -ms-linear-gradient(top, #d5f0d8, #fff); background-image: -o-linear-gradient(top, #d5f0d8, #fff); background-image: linear-gradient(top, #d5f0d8, #fff); } .commentsBtn .button:active {background-color: #d5f0d8;background-image:none;filter:none;} .commentsBtn .button .userIcon { margin-right:3px;} /* Social Counter*/ .counter {color:#222;padding: 2px 4px 3px 4px;position: relative;line-height: 1; vertical-align:middle;display: inline-block;margin-left: 5px;border-image: initial;background: white;border: #bbb solid 1px;zoom: 1; } .counter i, .counter u {position: absolute;top: 50%;left: 0;width: 0;height: 0;margin: -4px 0 0 -4px;line-height: 0;border: 4px transparent solid;border-left: 0;_border-color: pink;border-right-color: #AAA;zoom: 1;_filter: chroma(color=pink);border-image: initial;} .counter u {margin-left: -3px;border-right-color: white;} /******************************************************************************************************************************** MESSAGES ********************************************************************************************************************************/ .message .userIcon { margin-right:5px;} .message.error .userIcon:before {content: "\f057";} .message.warning .userIcon:before {content: "\f071";} .message.info .userIcon:before {content: "\f05a";} .message.success .userIcon:before {content: "\f058";} .message.error { color:red;} .message.warning { color:yellow;} .message.info { color:blue;} .message.success { color:green;} .userIcon.infoPanel { position:relative; cursor:help;} .panelBody { display:none; position: absolute; background: #fbf9ee; border: 1px solid #fcefa1; color:#222; padding: 10px; width:120px; top:-10px; left:20px; font-family: 'Segoe UI', 'Helvetica Neue', Arial, Helvetica, sans-serif; opacity:0; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; z-index:100; } .panelBody:after, .panelBody:before { right: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } .panelBody:after { border-color: rgba(136, 183, 213, 0); border-right-color: #fbf9ee; border-width: 10px; top: 15px; margin-top: -10px; } .panelBody:before { border-color: rgba(194, 225, 245, 0); border-right-color: #fcefa1; border-width: 11px; top: 15px; margin-top: -11px; } .userIcon.infoPanel:hover .panelBody { display:block; opacity:1;} .ui-dialog .ui-dialog-content, .ui-dialog { overflow: visible;} /******************************************************************************************************************************** RESPONSIVE STYLING Breakpoints: [Default] [701-975px] [501-700px] [0-500px] ********************************************************************************************************************************/ /* Breakpoint #1 (975px and below) */ @media only screen and (max-width: 974px) { body { width:100%; padding:0;} .contentWrapper { width:100%;} .contentHeader, .contentBody, .contentFooter {margin:auto;} .contentHeader, .contentFooter { padding:0 10px;} .wlCol { margin:0; margin-bottom:20px;} .wlRow { padding:0 10px;} img {max-width: 100%;height: auto!important;} .layoutFp { } .layoutFp .wlCol { width: 100%; } .layoutSbL { } .layoutSbL .col1 { width:40%;padding-right:10px;} .layoutSbL .col2 { width:60%;} .layoutSbR { } .layoutSbR .col1 { width:60%; padding-right:10px;} .layoutSbR .col2 { width:40%; } .layoutSbB { } .layoutSbB .col1 { width:50%; padding-right:10px;} .layoutSbB .col2 { width:50%; } .layoutSbB .col3 { width:50%; padding-right:10px;} .layoutCol2 { } .layoutCol2 .col1 { width:50%;padding-right:10px;} .layoutCol2 .col2 { width:50%;} .layoutCol3 { } .layoutCol3 .col1 { width:50%; padding-right:10px;} .layoutCol3 .col2 { width:50%; } .layoutCol3 .col3 { width:50%; padding-right:10px;} .layoutCol4 { } .layoutCol4 .col1 { width:50%; padding-right:10px;float:left;} .layoutCol4 .col2 { width:50%; float:right;} .layoutCol4 .col3 { width:50%; padding-right:10px;float:left; clear:left;} .layoutCol4 .col4 { width:50%; float:right;float:right; clear:right;} .layoutCol5 { } .layoutCol5 .col1 { width:50%; padding-right:10px; float:left;} .layoutCol5 .col2 { width:50%; float:right;} .layoutCol5 .col3 { width:50%; padding-right:10px; float:left; clear:left;} .layoutCol5 .col4 { width:50%; float:right; clear:right; } .layoutCol5 .col5 { width:50%; padding-right:10px; float:left; clear:left;} /* Racing Schedule */ .racingSchedule .scheduleListHeader .expandIcon { width: 9%;} .racingSchedule .scheduleListHeader .dayTime {width: 28%;} .racingSchedule .scheduleListHeader .eventTrack {width: 63%; border-right:none;} .racingSchedule .scheduleListHeader .statusIcon, .racingSchedule .scheduleListHeader .start, .racingSchedule .scheduleListHeader .finish, .racingSchedule .scheduleListHeader .postRace { display:none;} /* Racing Schedule */ .racingSchedule .scheduleListHeader {border-bottom:1px solid #555; height:auto;} .racingSchedule .scheduleListHeader>div { border-right:none; padding:2px 5px;} .racingSchedule .scheduleListHeader .expandIcon { display:none;} .racingSchedule .scheduleListHeader .statusIcon { display:none;} .racingSchedule .scheduleListHeader .statusIcon .adminIcon { } .racingSchedule .scheduleListHeader .dayTime { width:30%; } .racingSchedule .scheduleListHeader .dayTime .date {font-weight:bold;} .racingSchedule .scheduleListHeader .dayTime .time { display:;} .racingSchedule .scheduleListHeader .eventTrack { width:70%; } .racingSchedule .scheduleListHeader .eventTrack .event {font-weight:bold;} .racingSchedule .scheduleListHeader .eventTrack .track { display:;} .racingSchedule .scheduleListHeader .start { display:none;} .racingSchedule .scheduleListHeader .start .position {} .racingSchedule .scheduleListHeader .finish { display:none;} .racingSchedule .scheduleListHeader .start .position {} .racingSchedule .scheduleListHeader .postRace { display:none;} .racingSchedule .scheduleListHeader .postRace .results {} .racingSchedule .scheduleListHeader .postRace .report {} /* Racing Schedule -Expanded */ .racingSchedule .scheduleListContent .trackInfo{ width:100%; float:none;} .racingSchedule .scheduleListContent .trackInfo .trackImage { float:none;} .eventSchedule {float: none;clear: left;display: block;width:100%;} .racingSchedule .scheduleListContent .drivers {display:; margin-top:none!important;} .racingSchedule .scheduleListContent .eventSchedule { width:100%;} .eventSchedule .scheduleTabs { display: block;} .eventSchedule table.appearanceSchedule { display: none; } .racingSchedule .eventButtons {float: none;clear: none;display: block;width: 100%;} .racingSchedule .eventButtons a.nnsLink {width: 100%;} .racingSchedule .eventButtons a.nnsLink b { font-size:12px;} .racingSchedule .eventButtons a { width:48%; font-size:12px;} .racingSchedule .info .scheduleListHeader .chaseInfo { line-height: 20px;} .racingSchedule .scheduleListContent .drivers {display: block;position:static; padding-bottom:none; width:100%;} .racingSchedule .drivers .car {width: 100%;} .racingSchedule .drivers .car img {width:75%;padding-bottom:0;} .racingSchedule .drivers .nameplate { position: initial;width: 100%;height: 40px;padding: 5px;line-height: 30px;color: #fff;background: rgba(0,0,0,.5);} .racingSchedule .drivers .raceplate {position: absolute;bottom: 15px;right: 10px;width: 40px;} .racingSchedule .drivers .raceplate .position {margin-right: 0px;} .racingSchedule .drivers .raceplate .position:first-of-type { margin-bottom:5px;} .statsHeader .eventButtons { display: block; margin-top:10px; position:relative;} .statsHeader .eventButtons a { display:block; float:left; background:red; padding:5px 10px; margin-bottom:5px; margin-right:10px; line-height:16px; font-weight:; color:#fff;} .statsHeader .eventButtons .selector { float:none; clear:left; padding:5px 10px;} .statsHeader .eventButtons .selector select { width: 100%; } .statsHeader .eventButtons a .userIcon { margin-right:5px; font-size:16px;} .statsHeader .eventButtons a.nnsLink { width:340px; line-height:16px; font-size:12px; font-weight:normal; text-align:center;} .statsHeader .eventButtons a.nnsLink b { display:block;font-size:14px;} } /* Breakpoint #2 (700px and below) */ @media only screen and (max-width: 699px) { .layoutSbL { } .layoutSbL .col1 { width:50%; padding-right:10px;} .layoutSbL .col2 { width:50%; } .layoutSbR { } .layoutSbR .col1 { width:50%; padding-right:10px;} .layoutSbR .col2 { width:50%; } /* MENU */ .contentHeader { margin-bottom:20px;} .contentHeader .navWrapper #navControl { display:block;} .contentHeader .menu.mainMenu .expandIcon { position:absolute; right:0; background:#000; padding:0px 17px; line-height:28px;} .contentHeader .navWrapper .expandIcon { display:block; z-index:500; color:#fff;} .contentHeader .navWrapper .expandIcon:before { content: "\e601";} .contentHeader .navWrapper .expandIcon.navRotate:before {content: "\e602";} /* Navigation LEVEL 1 */ .contentHeader .navWrapper { width: 100%; } .contentHeader .menu.mainMenu {bottom: 0; display:none;float:left;position:static;width: 100%; margin:0;} .contentHeader .menu.mainMenu li { width:100%; border-top:1px solid #000; } .contentHeader .menu.mainMenu li a { border-right:0px;} /* Navigation LEVEL 2 */ .contentHeader .menu.mainMenu .sub { display:none; position:static; top:0;left:0;width:100%; } .contentHeader .menu.mainMenu .sub>ul {border-top:1px solid #000;} .contentHeader .menu.mainMenu .sub ul li { width:100%; background:rgba(0,0,0,.2); border-top:none;} .contentHeader .menu.mainMenu .sub, x:-moz-any-link { top:38px; } .contentHeader .menu.mainMenu li:hover>.sub { display:none;} .ie7 .contentHeader .menu.mainMenu .menu>li:hover>.sub { top:36px;} .contentHeader .menu.mainMenu .sub li a { display: block; width:100%; } .contentHeader .menu.mainMenu .sub a.expand:after { display:none;} .contentHeader .menu.mainMenu .sub_side { display:none; position:static; top:0;left:0;width:100%; border-top:1px solid #000;} .contentHeader .menu.mainMenu li:hover > .sub_side { display:none;} .gallery .grid .item { width:50%; height:200px; min-width:140px;} } /* Breakpoint #3 (650px and below) - bottoms out at 320px */ @media only screen and (max-width: 649px) { .contentHeader, .contentBody, .contentFooter {margin:auto;} .contentHeader, .contentFooter { padding:0 10px;} html { min-width:320px!important;} .wlCol { width:100%!important; padding-right:0!important; margin-bottom:10px;} .wlRow { padding:0 10px;} } /* Visibility Classes ---------------------- */ /* Mobile - Tablet - Desktop - Full */ /* Full Desktop */ .show-for-mobile, .show-for-tablet, .show-for-tablet-down, .hide-for-desktop, .hide-for-desktop-up, .show-for-full, .show-for-print { display: none !important; } .hide-for-mobile, .hide-for-tablet, .hide-for-tablet-down, .show-for-desktop, .show-for-desktop-up, .hide-for-full, .hide-for-print { display: inherit !important; } /* Smaller Desktop */ @media only screen and (max-width: 974px) { .hide-for-mobile, .hide-for-tablet, .hide-for-tablet-down, .hide-for-desktop, .show-for-desktop-up, .show-for-full { display: inherit !important; } .show-for-mobile, .show-for-tablet, .show-for-tablet-down, .show-for-desktop, .hide-for-desktop-up, .hide-for-full { display: none !important; } } /* Tablet */ @media only screen and (max-width: 699px) { .hide-for-mobile, .show-for-tablet, .show-for-tablet-down, .hide-for-desktop, .hide-for-desktop-up, .hide-for-full { display: inherit !important; } .show-for-mobile, .hide-for-tablet, .hide-for-tablet-down, .show-for-desktop, .show-for-desktop-up, .show-for-full { display: none !important; } } /* mobile display targeting */ @media only screen and (max-width: 649px) { .show-for-mobile, .hide-for-tablet, .show-for-tablet-down, .hide-for-desktop, .hide-for-desktop-up, .hide-for-full { display: inherit !important; } .hide-for-mobile, .show-for-tablet, .hide-for-tablet-down, .show-for-desktop, .show-for-desktop-up, .show-for-full { display: none !important; } }