/* * Amazium V1.0.1 * Copyright 2012, Mike Ballan * www.amazium.co.uk */ /***** Place standard 960px view CSS under here *****/ .main-header { background:none; padding:0 0 10px;} .subpage { position:relative; } .subpage p { font-size:14px; line-height:18px; } .footer { background:0; padding-top:20px;} .box { transition-property:background-color .2s linear 0s; -moz-transition:background-color .2s linear 0s; -webkit-transition:background-color .2s linear 0s; -o-transition:background-color .2s linear 0s; } .box .img-right { margin:0; } .home-2_2 { margin:0 3px 6px 3px; padding:0; width:378px; height:236px; float:left; position:relative; color:#FFF; overflow:hidden; } .home-1_2 { margin:0 3px 6px 3px; padding:0; width:186px; height:236px; float:left; position:relative; color:#FFF; overflow:hidden; } .home-1_1 { margin:0 3px 6px 3px; padding:0; width:186px; height:115px; float:left; position:relative; color:#FFF; overflow:hidden; } .home-2_2 h1, .home-2_2 h2 { font-size:40px; line-height:40px; color:#FFF; border:0; background:none; margin-bottom: 9px; } .home-1_2 h1, .home-1_2 h2 { font-size:24px; line-height:26px; color:#FFF; border:0; background:none; margin-bottom: 9px; } .home-1_2.news h3 { color:#FFF; font-size:20px; line-height:22px; } a:hover .home-1_2 h2 { color:#FFF !important; } a:hover .twitter h2 { color:#888 !important; } .home-1_1 h1, .home-1_1 h2 { font-size:20px; color:#FFF; border:0; background:none; margin-bottom: 9px;} .home-2_2 .copy, .home-1_2 .copy, .home-1_1 .copy { padding:15px 18px 18px 18px; } .homepage-ipad { padding:20px 0 0 20px; line-height:23px; } /***** Slideout from top *****/ .home-2_2.slideout-top { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-2_2 .slideout_inner-top { position:absolute; top:-236px; left:0; width:338px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-2_2.slideout-top:hover { top:-236px; cursor:pointer;} .home-2_2.slideout-top:hover .slideout_inner-top { top:0; } .home-1_2.slideout-top { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_2 .slideout_inner-top { position:absolute; top:-236px; left:0; width:146px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-1_2.slideout-top:hover { top:-236px; cursor:pointer;} .home-1_2.slideout-top:hover .slideout_inner-top { top:0; } .home-1_1.slideout-top { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_1 .slideout_inner-top { position:absolute; top:-155px; left:0; width:186px; height:115px; padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); text-align: center;} .home-1_1.slideout-top:hover { top:-155px; cursor:pointer;} .home-1_1.slideout-top:hover .slideout_inner-top { top:0; } /***** Slideout from right *****/ .home-2_2.slideout-right { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-2_2 .slideout_inner-right { position: absolute; top:0; left:378px; width:338px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-2_2.slideout-right:hover { left:378px; cursor:pointer;} .home-2_2.slideout-right:hover .slideout_inner-right { left:0; } .home-1_2.slideout-right { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_2 .slideout_inner-right { position: absolute; top:0; left:186px; width:146px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-1_2.slideout-right:hover { left:186px; } .home-1_2.slideout-right:hover .slideout_inner-right { left:0; } .home-1_1.slideout-right { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_1 .slideout_inner-right { position:absolute; top:0; left:186px; width:186px; height:115px; padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); text-align: center;} .home-1_1.slideout-right:hover { left:186px; cursor:pointer;} .home-1_1.slideout-right:hover .slideout_inner-right { left:0; } /***** Slideout from bottom *****/ .home-2_2.slideout-bottom { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-2_2 .slideout_inner-bottom { position:absolute; top:236px; left:0; width:338px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-2_2.slideout-bottom:hover { top:236px; cursor:pointer;} .home-2_2.slideout-bottom:hover .slideout_inner-bottom { top:0; } .home-1_2.slideout-bottom { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_2 .slideout_inner-bottom { position:absolute; top:236px; left:0; width:146px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-1_2.slideout-bottom:hover { top:236px; cursor:pointer;} .home-1_2.slideout-bottom:hover .slideout_inner-bottom { top:0; } .home-1_1.slideout-bottom { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_1 .slideout_inner-bottom { position:absolute; top:155px; left:0; width:186px; height:115px; padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); text-align: center;} .home-1_1.slideout-bottom:hover { top:155px; cursor:pointer;} .home-1_1.slideout-bottom:hover .slideout_inner-bottom { top:0; } /***** Slideout from left *****/ .home-2_2.slideout-left { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-2_2 .slideout_inner-left { position:absolute; top:0; left:-378px; width:338px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-2_2.slideout-left:hover { left:-378px; cursor:pointer;} .home-2_2.slideout-left:hover .slideout_inner-left { left:0; } .home-1_2.slideout-left { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_2 .slideout_inner-left { position: absolute; top:0; left:-186px; width:146px; height:196px; padding:20px; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); } .home-1_2.slideout-left:hover { left:-186px; cursor:pointer;} .home-1_2.slideout-left:hover .slideout_inner-left { left:0; } .home-1_1.slideout-left { padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; } .home-1_1 .slideout_inner-left { position:absolute; top:0; left:-186px; width:186px; height:115px; padding:0; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; background-image:url('../images/home-overlay.png'); text-align: center;} .home-1_1.slideout-left:hover { left:-186px; cursor:pointer;} .home-1_1.slideout-left:hover .slideout_inner-left { left:0; } /***** Slideout none *****/ .home-2_2.slideout-none { padding:0; } .home-2_2 .slideout_inner-none { position:absolute; top:0; left:0px; width:338px; height:196px; padding:20px; background-image:none; transition-property:background-image .2s linear 0s; -moz-transition:background-image .2s linear 0s; -webkit-transition:background-image .2s linear 0s; -o-transition:background-image .2s linear 0s; } .home-2_2.slideout-none:hover { left:0; cursor:pointer;} .home-2_2.slideout-none:hover .slideout_inner-none { left:0; background-image:url('../images/home-overlay.png');} .home-1_2.slideout-none { padding:0; } .home-1_2 .slideout_inner-none { position: absolute; top:0; left:0; width:146px; height:196px; padding:20px; background-image:none; } .home-1_2.slideout-none:hover { left:0; cursor:pointer;} .home-1_2.slideout-none:hover .slideout_inner-none { left:0; background-image:url('../images/home-overlay.png'); } .home-1_1.slideout-none { padding:0; } .home-1_1 .slideout_inner-none { position:absolute; top:0; left:0; width:186px; height:115px; padding:0; background-image:none; } .home-1_1.slideout-none:hover { left:0; color:#FFF; cursor:pointer;} .home-1_1.slideout-none:hover .slideout_inner-none { left:0; background-image:url('../images/home-overlay.png'); color:#FFF; } .home-2_2 .date, .home-1_2 .date, .home-1_1 .date { font-size:12px; } .home-2_2 p, .home-1_2 p { position:absolute; bottom:15px; font-weight:normal; padding:0 20px 0 0;} .home-1_1 p { text-align:center; } .home-1_1 p.btn { margin:43px 0 0 0; padding:0; display:inline-block; font-size:18px; line-height:17px; width:150px; font-family:FS Pimlico Web Bold, Helvetica, Arial, sans-serif; color:#FFF; background:none; cursor:pointer; } a .agency-lowlight { background-color:#c7c8ca; } a .agency-normal { background-color:#999999; } a .agency-highlight { background-color:#58585a; } a .ppc-lowlight { background-color:#79a75d; } a .ppc-normal { background-color:#3f8117; } a .ppc-highlight { background-color:#254a13; } a .seo-social-lowlight { background-color:#ffc36d; } a .seo-social-normal { background-color:#ffa92e; } a .seo-social-highlight { background-color:#cf7400; } a .creative-lowlight { background-color:#d67787; } a .creative-normal { background-color:#c53c54; } a .creative-highlight { background-color:#712433; } a .analytics-lowlight { background-color:#8088be; } a .analytics-normal { background-color:#4955a2; } a .analytics-highlight { background-color:#2b3360; } a .training-lowlight { background-color:#00d6fb; } a .training-normal { background-color:#00aef0; } a .training-highlight { background-color:#007eca; } a .display-lowlight { background-color:#ae78b0; } a .display-normal { background-color:#8b3f8e; } a .display-highlight { background-color:#4f2754; } a:hover .agency-lowlight, a:hover .agency-normal, a:hover .agency-highlight, a:hover .ppc-lowlight, a:hover .ppc-normal, a:hover .ppc-highlight, a:hover .seo-social-lowlight, a:hover .seo-social-normal, a:hover .seo-social-highlight, a:hover .creative-lowlight, a:hover .creative-normal, a:hover .creative-highlight, a:hover .analytics-lowlight, a:hover .analytics-normal, a:hover .analytics-highlight, a:hover .training-lowlight, a:hover .training-normal, a:hover .training-highlight, a:hover .display-lowlight, a:hover .display-normal, a:hover .display-highlight { background-color:#333; color:#FFF; } .news p { font-size: 14px; line-height: 18px;} /* .twitter { background-image:url('/packages/jellyfish_website/themes/jellyfish/images/twitter-bg.png'); background-repeat:no-repeat; } */ .twitter { background-image:url('/packages/jellyfish_website/themes/jellyfish/images/jf-insights.jpg'); background-repeat:no-repeat; } .twitter h2, a.twitter h2:hover { color:#393939; } .twitter .twitter-image { width: 50px; height:50px; overflow:hidden; display:block; margin-bottom: 10px; border:1px solid #fff;} .twitter .max-image { width: 100px; } /***** Spotlight *****/ #spotlight-wrapper { position: relative; width:762px; margin:0 3px 6px; } .spotlight-nav { position:absolute; right:4px; top:331px; z-index:50; } .spotlight-nav a { display:block; width:15px; height:15px; background:url(/packages/jellyfish_website/themes/jellyfish/images/bg-spotlight.png) 15px top; border:1px solid #58585a; text-indent:-9999px; float:left; margin-right:8px;} .spotlight-nav a.activeSlide { background-position:0 top;} #spotlight { margin:0 0 -1px 0; padding:0; width:762px; height:357px; color:#FFF; overflow:hidden; } #spotlight { background-color:transparent; } #spotlight .item { display:none;} #spotlight .item:first-child { display:block;} #spotlight .copy { position:absolute; left:0; bottom:0; z-index:6; width:762px; height:357px; } #spotlight h1 { margin:20px 0 20px 205px; font-size:80px; background:none; line-height:70px; color:#fff;} #spotlight h2 { margin:20px 0 20px 205px; font-size:50px; background:none; line-height:46px; width:260px; color:#fff;} #spotlight p { margin:0 0 0 205px; width:230px; position:absolute; bottom:20px; color:#fff;} #spotlight p.intro-paragraph { font-size:30px; line-height:32px; width:300px; font-family:FS Pimlico Web Regular, Helvetica, Arial, sans-serif; } #spotlight h1.light-grey, #spotlight h2.light-grey, #spotlight p.light-grey { color:#c7c8ca; } #spotlight h1.grey, #spotlight h2.grey, #spotlight p.grey { color:#999999; } #spotlight h1.dark-grey, #spotlight h2.dark-grey, #spotlight p.dark-grey { color:#58585a; } #spotlight h1.light-green, #spotlight h2.light-green, #spotlight p.light-green { color:#79a75d; } #spotlight h1.green, #spotlight h2.green, #spotlight p.green { color:#3f8117; } #spotlight h1.dark-green, #spotlight h2.dark-green, #spotlight p.dark-green { color:#254a13; } #spotlight h1.light-orange, #spotlight h2.light-orange, #spotlight p.light-orange { color:#ffa92e; } #spotlight h1.orange, #spotlight h2.orange, #spotlight p.orange { color:#ffa92e; } #spotlight h1.dark-orange, #spotlight h2.dark-orange, #spotlight p.dark-orange { color:#cd7300; } #spotlight h1.light-red, #spotlight h2.light-red, #spotlight p.light-red { color:#d67787; } #spotlight h1.red, #spotlight h2.red, #spotlight p.red { color:#c53c54; } #spotlight h1.dark-red, #spotlight h2.dark-red, #spotlight p.dark-red { color:#712433; } #spotlight h1.light-blue, #spotlight h2.light-blue, #spotlight p.light-blue { color:#71dcec; } #spotlight h1.blue, #spotlight h2.blue, #spotlight p.blue { color:#4955a2; } #spotlight h1.dark-blue, #spotlight h2.dark-blue, #spotlight p.dark-blue { color:#2b3360; } #spotlight h1.light-purple, #spotlight h2.light-purple, #spotlight p.light-purple { color:#ae78b0; } #spotlight h1.purple, #spotlight h2.purple, #spotlight p.purple { color:#8b3f8e; } #spotlight h1.dark-purple, #spotlight h2.dark-purple, #spotlight p.dark-purple { color:#4f2754; } #spotlight .item .copy h2 { width: auto; font-size: 80px; line-height: 70px; } .subhome { margin:0; position:absolute; top:-1px; left:3px; z-index:99; } .subhome .nav { margin:0; padding:10px 0 0 20px; width:166px; height:346px; overflow:hidden; background-image:url('/packages/jellyfish_website/themes/jellyfish/images/home-overlay.png'); } .subhome .nav h2 { margin:0 0 15px 0; font-size:20px; line-height:28px; text-transform:none; color:#FFF; } .subhome .nav h3 { margin:0; font-size:20px; text-transform:uppercase; background:none; } .subhome .nav li { margin:0; font-size:13px; } .subhome ul.nav { margin:0; border-top:1px solid #c97382; font-size:16px; } .subhome ul.nav li { text-transform:none; } .subhome ul.nav li a { margin:0; padding:6px 6px 6px 0; display:block; float:none; line-height:20px; text-decoration:none; color:#FFF; border-bottom:1px solid #fff; font-weight:600; } .ppc .subhome ul.nav li a:hover, .ppc .subhome ul.nav li a.nav-selected, .ppc .subhome ul.nav li a.nav-path-selected { color:#3f8117; } .seo-social .subhome ul.nav li a:hover, .seo-social .subhome ul.nav li a.nav-selected, .seo-social .subhome ul.nav li a.nav-path-selected { color:#ffa92e; } .creative .subhome ul.nav li a:hover, .creative .subhome ul.nav li a.nav-selected, .creative .subhome ul.nav li a.nav-path-selected { color:#c53c54; } .display .subhome ul.nav li a:hover, .display .subhome ul.nav li a.nav-selected, .display .subhome ul.nav li a.nav-path-selected { color:#8b3f8e; } .analytics .subhome ul.nav li a:hover, .analytics .subhome ul.nav li a.nav-selected, .analytics .subhome ul.nav li a.nav-path-selected { color:#4955a2; } .training .subhome ul.nav li a:hover, .training .subhome ul.nav li a.nav-selected, .training .subhome ul.nav li a.nav-path-selected { color:#00aef0; } .trainingspotlightheading{color: #9b9b9b !important;} /***** End *****/ @media only screen and (min-width: 768px) and (max-width: 959px) { /***** Place iPad view CSS under here (Smaller than 959px) *****/ /***** End *****/ } @media only screen and (max-width: 767px) { /***** Place iPhone portrait view CSS under here (300px) *****/ .home-2_2 { margin:4px 4px 0 0; width:146px; height:184px; } .home-1_2 { margin:4px 4px 0 0; width:146px; height:184px; } .home-1_1 { margin:4px 4px 0 0; width:146px; height:90px; } .home-2_2 img { display:none; } .home-1_2 img { display:none; } .home-2_2 p, .home-1_2 p { padding:0 11px 0 0; bottom:11px; font-size:12px; line-height:14px; } .home-2_2 h1, .home-1_2 h1, .home-1_1 h1, .home-2_2 h2, .home-1_2 h2, .home-1_1 h2 { font-size:20px; line-height:20px; color:#FFF !important; } .home-2_2 .copy, .home-1_2 .copy, .home-1_1 .copy { padding:11px; } .subpage p { font-size:12px; line-height:16px; } .homepage-ipad { padding:0; line-height:auto; } .twitter { height:184px; } /***** Slideout from top *****/ .home-2_2 .slideout_inner-top { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-2_2.slideout-top:hover { top:0; } .home-2_2.slideout-top:hover .slideout_inner-top { top:0; } .home-1_2 .slideout_inner-top { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-1_2.slideout-top:hover { top:0; } .home-1_2.slideout-top:hover .slideout_inner-top { top:0; } .home-1_1 .slideout_inner-top { display:none; height:0; } .home-1_1.slideout-top:hover { top:0; } .home-1_1.slideout-top:hover .slideout_inner-top { top:0; } /***** Slideout from right *****/ .home-2_2 .slideout_inner-right { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none; } .home-2_2.slideout-right:hover { left:0; } .home-2_2.slideout-right:hover .slideout_inner-right { left:0; } .home-1_2 .slideout_inner-right { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-1_2.slideout-right:hover { left:0; } .home-1_2.slideout-right:hover .slideout_inner-right { left:0; } .home-1_1 .slideout_inner-right { display:none; } .home-1_1.slideout-right:hover { left:0; } .home-1_1.slideout-right:hover .slideout_inner-right { left:0; } /***** Slideout from bottom *****/ .home-2_2 .slideout_inner-bottom { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none; } .home-2_2.slideout-bottom:hover { top:0; } .home-2_2.slideout-bottom:hover .slideout_inner-bottom { top:0; } .home-1_2 .slideout_inner-bottom { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-1_2.slideout-bottom:hover { top:0; } .home-1_2.slideout-bottom:hover .slideout_inner-bottom { top:0; } .home-1_1 .slideout_inner-bottom { display:none; } .home-1_1.slideout-bottom:hover { top:0; } .home-1_1.slideout-bottom:hover .slideout_inner-bottom { top:0; } /***** Slideout from left *****/ .home-2_2 .slideout_inner-left { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-2_2.slideout-left:hover { left:0; } .home-2_2.slideout-left:hover .slideout_inner-left { left:0; } .home-1_2 .slideout_inner-left { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-1_2.slideout-left:hover { left:0; } .home-1_2.slideout-left:hover .slideout_inner-left { left:0; } .home-1_1 .slideout_inner-left { display:none; } .home-1_1.slideout-left:hover { left:0; } .home-1_1.slideout-left:hover .slideout_inner-left { left:0; } /***** Slideout none *****/ .home-2_2 .slideout_inner-none { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none; } .home-2_2.slideout-none:hover { left:0; } .home-2_2.slideout-none:hover .slideout_inner-none { left:0; } .home-1_2 .slideout_inner-none { padding:11px; position:static; top:0; left:0; display:block; width:106px; background-image:none;} .home-1_2.slideout-none { background-image: none; } .home-1_2.slideout-none:hover { left:0; } .home-1_2.slideout-none:hover .slideout_inner-none { left:0; } .home-1_1 .slideout_inner-none { display:none; } .home-1_1.slideout-none:hover { left:0; } .home-1_1.slideout-none:hover .slideout_inner-none { left:0; } .home-2_2.none { width:146px; height:90px; background-color:#333; } .home-2_2.none img { display:block; } .home-1_2.none { width:146px; height:220px; background-color:#333; } .home-1_2.none img { display:block; width:186px; height:234px; } #spotlight { width:296px; height:216px; background-color:#333; } #spotlight img { margin:0; padding:0; width:auto; height:0px; color:#FFF; overflow:hidden; } #spotlight .copy { width:260px; height:195px; } .spotlight-nav { position:none; right:0; bottom:15px; z-index:50; } #spotlight-wrapper { margin:0; width:300px; height:216px; } #spotlight .copy { padding:11px; top:0; } #spotlight h1 { margin:0; font-size:35px; line-height:40px; } #spotlight h2 { margin:11px 0; font-size:30px; line-height: 26px; } #spotlight p { margin:0; width:260px; bottom:5px; } #spotlight .item .copy h2 { font-size: 65px; line-height: 50px; margin-top: 15px; } .generic #spotlight { background:#3f8117 url(/packages/jellyfish_website/themes/jellyfish/images/JF_SPECTRUM.jpg) no-repeat center top; } .ppc #spotlight { background-color:#3f8117; } .seo-social #spotlight { background-color:#ffa92e; } .creative #spotlight { background-color:#c53c54; } .display #spotlight { background-color:#8b3f8e; } .analytics #spotlight { background-color:#4955a2; } .training #spotlight { background-color:#00aef0; } .subhome .nav li { background:url(/packages/jellyfish_website/themes/jellyfish/images/side-arrow-blog.gif) no-repeat right 12px transparent; } #spotlight .item { height:216px; width: 296px; } #spotlight h1.light-grey, #spotlight h2.light-grey, #spotlight p.light-grey { color:#FFF; } #spotlight h1.grey, #spotlight h2.grey, #spotlight p.grey { color:#FFF; } #spotlight h1.dark-grey, #spotlight h2.dark-grey, #spotlight p.dark-grey { color:#FFF; } #spotlight h1.light-green, #spotlight h2.light-green, #spotlight p.light-green { color:#FFF; } #spotlight h1.green, #spotlight h2.green, #spotlight p.green { color:#FFF; } #spotlight h1.dark-green, #spotlight h2.dark-green, #spotlight p.dark-green { color:#FFF; } #spotlight h1.light-orange, #spotlight h2.light-orange, #spotlight p.light-orange { color:#FFF; } #spotlight h1.orange, #spotlight h2.orange, #spotlight p.orange { color:#FFF; } #spotlight h1.dark-orange, #spotlight h2.dark-orange, #spotlight p.dark-orange { color:#FFF; } #spotlight h1.light-red, #spotlight h2.light-red, #spotlight p.light-red { color:#FFF; } #spotlight h1.red, #spotlight h2.red, #spotlight p.red { color:#FFF; } #spotlight h1.dark-red, #spotlight h2.dark-red, #spotlight p.dark-red { color:#FFF; } #spotlight h1.light-blue, #spotlight h2.light-blue, #spotlight p.light-blue { color:#FFF; } #spotlight h1.blue, #spotlight h2.blue, #spotlight p.blue { color:#FFF; } #spotlight h1.dark-blue, #spotlight h2.dark-blue, #spotlight p.dark-blue { color:#FFF; } #spotlight h1.light-purple, #spotlight h2.light-purple, #spotlight p.light-purple { color:#FFF; } #spotlight h1.purple, #spotlight h2.purple, #spotlight p.purple { color:#FFF; } #spotlight h1.dark-purple, #spotlight h2.dark-purple, #spotlight p.dark-purple { color:#FFF; } #spotlight .item { display:none;} #spotlight .item:first-child { display:block;} .ppc .copy a.btn, .ppc .copy span.btn, .ppc .copy p.btn, .ppc .main-body .copy p a.btn, .copy a.btn.green, .copy p.btn.green { background-color:#254a13; color:#fff; } .seo-social .copy a.btn, .seo-social .copy span.btn, .seo-social .copy p.btn, .seo-social .main-body .copy p a.btn, .copy a.btn.orange, .copy p.btn.orange { background-color:#cd7300; color:#fff; } .display .copy a.btn, .display .copy span.btn, .display .copy p.btn, .display .main-body .copy p a.btn, .copy a.btn.purple, .copy p.btn.purple { background-color:#4f2754; color:#fff; } .creative .copy a.btn, .creative .copy span.btn, .creative .copy p.btn, .creative .main-body .copy p a.btn, .copy a.btn.red, .copy p.btn.red { background-color:#712433; color:#fff; } .analytics .copy a.btn, .analytics .copy span.btn, .analytics .copy p.btn, .analytics .main-body .copy p a.btn, .copy a.btn.blue, .copy p.btn.blue { background-color:#2b3360; color:#fff; } .training .copy a.btn, .training .copy span.btn, .training .copy p.btn, .training .main-body .copy p a.btn /*.copy a.btn.blue, .copy p.btn.blue */ { background-color:#007eca; color:#fff; } .subhome { position:inherit; } .subhome .nav { margin:0; padding:0; width:290px; height:auto; background:none; } .subhome ul.nav { margin:40px 0 0 0; border-top:1px solid #e5e5e5; font-size:16px; } .subhome ul.nav li a { color:#666; border-bottom:1px solid #e5e5e5; } .trainingspotlightheading{color: #fff !important;} /***** End *****/ /* Removed bg image 19/12/13 at request of Mark Deeprose */ .twitter { background-image: none; } } @media only screen and (min-width: 480px) and (max-width: 767px) { /***** Place iPhone landscape view CSS under here (456px) *****/ .home-2_2 { margin:4px 4px 0 0; width:224px; height:140px; } .home-1_2 { margin:4px 4px 0 0; width:224px; height:140px; } .home-1_1 { margin:4px 4px 0 0; width:224px; height:140px; } .home-2_2 img { display:none; } .home-1_2 img { display:none; } .home-2_2 p, .home-1_2 p { font-size:12px; line-height:14px; } .home-2_2 h1, .home-1_2 h1, .home-1_1 h1, .home-2_2 h2, .home-1_2 h2, .home-1_1 h2 { font-size:20px; line-height:20px; color:#FFF; } .twitter { height:140px; } /***** Slideout from top *****/ .home-2_2 .slideout_inner-top { position:static; top:0; left:0; display:block; width:184px; height:100px;} .home-2_2.slideout-top:hover { top:0; } .home-2_2.slideout-top:hover .slideout_inner-top { top:0; } .home-1_2 .slideout_inner-top { position:static; top:0; left:0; display:block; width:184px; height:100px;} .home-1_2.slideout-top:hover { top:0; } .home-1_2.slideout-top:hover .slideout_inner-top { top:0; } .home-1_1 .slideout_inner-top { display:none; height:0;} .home-1_1.slideout-top:hover { top:0; } .home-1_1.slideout-top:hover .slideout_inner-top { top:0; } /***** Slideout from right *****/ .home-2_2 .slideout_inner-right { position:static; top:0; left:0; display:block; width:184px; height:100px;} .home-2_2.slideout-right:hover { left:0; } .home-2_2.slideout-right:hover .slideout_inner-right { left:0; } .home-1_2 .slideout_inner-right { position:static; top:0; left:0; display:block; width:184px; height:100px;} .home-1_2.slideout-right:hover { left:0; } .home-1_2.slideout-right:hover .slideout_inner-right { left:0; } .home-1_1 .slideout_inner-right { display:none;} .home-1_1.slideout-right:hover { left:0; } .home-1_1.slideout-right:hover .slideout_inner-right { left:0; } /***** Slideout from bottom *****/ .home-2_2 .slideout_inner-bottom { position:static; top:0; left:0; display:block; width:184px; height:100px;} .home-2_2.slideout-bottom:hover { top:0; } .home-2_2.slideout-bottom:hover .slideout_inner-bottom { top:0; } .home-1_2 .slideout_inner-bottom { position:static; top:0; left:0; display:block; width:184px; height:100px; } .home-1_2.slideout-bottom:hover { top:0; } .home-1_2.slideout-bottom:hover .slideout_inner-bottom { top:0; } .home-1_1 .slideout_inner-bottom { display:none; } .home-1_1.slideout-bottom:hover { top:0; } .home-1_1.slideout-bottom:hover .slideout_inner-bottom { top:0; } /***** Slideout from left *****/ .home-2_2 .slideout_inner-left { position:static; top:0; left:0; display:block; width:184px; height:100px; } .home-2_2.slideout-left:hover { left:0; } .home-2_2.slideout-left:hover .slideout_inner-left { left:0; } .home-1_2 .slideout_inner-left { position:static; top:0; left:0; display:block; width:184px; height:100px; } .home-1_2.slideout-left:hover { left:0; } .home-1_2.slideout-left:hover .slideout_inner-left { left:0; } .home-1_1 .slideout_inner-left { display:none; } .home-1_1.slideout-left:hover { left:0; } .home-1_1.slideout-left:hover .slideout_inner-left { left:0; } /***** Slideout none *****/ .home-2_2 .slideout_inner-none { position:static; top:0; left:0; display:block; width:184px; height:100px; } .home-2_2.slideout-none:hover { left:0; } .home-2_2.slideout-none:hover .slideout_inner-none { left:0; } .home-1_2 .slideout_inner-none { position:static; top:0; left:0; display:block; width:184px; height:100px; } .home-1_2.slideout-none { background-image: none; } .home-1_2.slideout-none:hover { left:0; } .home-1_2.slideout-none:hover .slideout_inner-none { left:0; } .home-1_1 .slideout_inner-none { display:none; } .home-1_1.slideout-none:hover { left:0; } .home-1_1.slideout-none:hover .slideout_inner-none { left:0; } .home-2_2.none { width:224px; height:140px; background-color:#333; } .home-2_2.none img { display:block; } .home-1_2.none { width:224px; height:140px; background-color:#333; } .home-1_2.none img { display:block; } /***** .home-2_2, .home-2_2.slideout-none, .home-2_2.slideout-top, .home-2_2.slideout-right, .home-2_2.slideout-bottom, .home-2_2.slideout-left { margin:4px 4px 0 0; width:224px; height:auto; } .home-2_2 img { display:none; height:0; width:0; overflow:hidden; } .home-1_2, .home-1_2.slideout-none, .home-1_2.slideout-top, .home-1_2.slideout-right, .home-1_2.slideout-bottom, .home-1_2.slideout-left, .home-1_2.slideout-top, .home-1_2.slideout-right, .home-1_2.slideout-bottom, .home-1_2.slideout-right { margin:4px 4px 0 0; width:224px; height:auto; } .home-1_1, .home-1_1.slideout-none { margin:4px 4px 0 0; width:224px; height:140px; overflow:hidden; } .home-1_1 img { height:92px; height:140px; } .home-2_2 .slideout_inner-top, .home-2_2 .slideout_inner-right, .home-2_2 .slideout_inner-bottom, .home-2_2 .slideout_inner-left { position:relative; display:inline-block; top:0; left:0; width:184px; height:auto; padding:20px; background-image:none; background:#333; } .home-1_2 .slideout_inner-none { position:absolute; top:0; left:0; width:224px; height:196px; padding:20px; background-image:none; overflow:hidden; } .twitter { height:236px; }*****/ #spotlight { width:452px; height:206px; } #spotlight .copy { width:416px; height:180px; } #spotlight-wrapper { width:456px; height:206px; } .spotlight-nav { top:230px; } #spotlight h1 { margin:0; font-size:53px; line-height:55px; } #spotlight h2 { margin:20px 0; font-size: 30px; line-height: 26px; } #spotlight p { margin:0; width:400px; bottom:0; } #spotlight .item { height:256px; width:416px; } .subhome .nav { margin:20px 0 0 0; padding:0; width:453px; height:auto; background:url(/packages/jellyfish_website/themes/jellyfish/images/side-arrow-blog.gif) no-repeat right 12px transparent; } .trainingspotlightheading{color: #fff !important;} /***** End *****/ } @media only screen and (max-width: 479px) { #spotlight .item .copy h2 { font-size: 60px; line-height: 50px; margin-top: 15px; } }