/* * Skeleton V1.0.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 5/20/2011 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ table, td { vertical-align:top !important;} .left { float:left;} .right { float:right;} .spacer { height:20px;} .transition { display: block; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; transition: all 0.3s ease; } /* #Page Styles ================================================== */ .container { /* margin:30px 0;*/ padding-top:30px; } #countries { padding-top:30px; text-align:right; display:none;} #header { padding-bottom:30px; } a.logo { background:url(../images/logo_zylone.png) 0 0; background-size:100% 100%; display:inline-block; width:252px; height:68px;} a.logo img { max-width:100%; height:auto;} /* #homeBanner { margin-bottom: 30px;} #homeBanner img { max-width: 100%; /* border: 0.5em #000 solid;* height: auto; } .banner { position: relative; overflow:hidden; } .banner li { list-style: none; width:100%; height:100%;} .banner ul li { float: left; } */ .feature img { max-width: 100%; height: auto; } .feature h3 { color:#595959; margin-bottom:7px;} #Hero { background:#28a085; color:#fff; padding:40px 0;} #Hero h2 { text-transform:uppercase; margin-top:20px;} #Hero p { text-align:justify;} #Hero .special { color:#00ffff;} .breadcrumb { padding-bottom:0.5em; padding-left:0.2em; text-align:left;} /* Callout ////////////////////////////////////////////////////////// */ .flexslider { position: relative; display: block; width: 98.5%; background: #000; overflow: hidden; height:28em; text-align:center; padding:0.5em; margin-bottom:2.7em; } .flexslider ul.slides { display: block; width: 100%; height: 100%; } .flexslider ul.slides li { position: relative; width: 100%; height: 100%; } .flexslider ul.slides li a.a-block { position: absolute; left: 0; bottom: 0; display: block; width: 100%; } .flexslider ul.slides li div { position:relative; top:2.1em; left:0;} .flexslider ul.slides li div a strong {color: #30261c; display: block; font-weight: normal; } .flexslider ul.slides li div a h3 { color: #28a085; font-weight:normal; font-size:2.1em; line-height:normal; padding:0; margin:15px 0 0 0; } .flexslider ul.slides li div a h3.line2 { padding-left:7.5em; } .flexslider ul.slides li div a:hover { text-decoration:none;} .flexslider ul.slides li div a span { color: rgba(255,255,255,0.5); text-transform: uppercase; font-weight: 700; } .flexslider ul.slides li#slide-1 { background: url(../images/banners/banner_01.jpg) center bottom no-repeat #30261c; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 5; } .flexslider ul.slides li#slide-2 { background: url(../images/banners/banner_02.jpg) center bottom no-repeat #30261c; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 4; } .flexslider ul.slides li#slide-3 { background: url(../images/banners/banner_03.jpg) center bottom no-repeat #30261c; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; z-index: 3; } .flex-control-nav { display: none; } .flex-direction-nav { position: absolute; z-index: 10; top: 50%; width: 100%; } .flex-direction-nav a.prev { position: absolute; top: -25px; left: 30px; background: url(http://www.thejtsite.com/images/arrow-l.png) no-repeat; width: 27px; height: 50px; text-indent: -9999px; } .flex-direction-nav a.next { position: absolute; top: -25px; right: 30px; background: url(http://www.thejtsite.com/images/arrow-r.png) no-repeat; width: 27px; height: 50px; text-indent: -9999px; } /* Banner ////////////////////////////////////////////////////////// */ .innerbanner { font-size:1em; line-height:1.5em; min-height:8em; color:#fff;} .innerbanner h1 { font-size:2.5em; text-transform:uppercase; margin-bottom:1em;} .innerbanner#banner-long { background:url(../images/bg1.jpg) 0 20% no-repeat; background-size:cover;} .innerbanner#banner-short { background:url(../images/bg2.jpg) 0 20% no-repeat; background-size:cover; } .innerbanner#banner-portfolio { background:url(../images/bg3.jpg) 0 5% no-repeat; background-size:cover; } .innerbanner#banner-xmas { background:url(../images/bg4.jpg) 0 5% no-repeat; background-size:cover; } .innerbanner#banner-long .bannercontent { padding:3em 0;} .innerbanner#banner-long .bannercontenttall { padding:4em 0;} .innerbanner#banner-short .bannercontent { padding:4em 0 2em 0;} .innerbanner#banner-long .bannercontent h1, .innerbanner#banner-portfolio .bannercontent h1 { margin:0; padding:0;} .innerbanner#banner-long .bannercontenttall p { padding:0 12em; margin:0;} .innerbanner#banner-short .bannercontent p { padding:0 12em; margin:0;} .innerbanner#banner-portfolio .bannercontent { padding:2.5em 0;} .innerbanner#banner-xmas .bannercontent { padding:2.5em 0;} .innerbanner#banner-xmas .bannercontent h1 { margin:0; padding:0;} .innerbanner#banner-xmas .bannercontent p { padding:0 12em; margin:0;} /* Quad ////////////////////////////////////////////////////////// */ #quad { clear: both; overflow: auto; background: #ffffff; } .quad { display: inline; float: left; text-align: center; position: relative; overflow: hidden; /*width:326px;*/width:244px; height:266px; } .quad a { position: relative; z-index: 1; zoom: 1; opacity: 0; filter: alpha(opacity=0); display: block; padding:0em 2.25em; height:100%; } .quad a:hover { zoom: 1; opacity: 1; filter: alpha(opacity=1); background: rgba(129,129,129,0.8); text-decoration:none; } .quad p { color: rgba(255,255,255,1); font-weight:normal; font-size:1.125em; line-height:1.5em; } .quad .more { color:#ffff00; font-size:1.25em; text-transform:uppercase;} .quad#services-branding { background: url(../images/image_01.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .quad#services-web { background: url(../images/image_05.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .quad#services-marketing { background: url(../images/image_03.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .quad#services-sms { background: url(../images/image_07.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .quad#services-google { background: url(../images/image_09.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #Quote { background:#f4921c; color:#fff; padding:20px 0;} #Quote h2 { text-transform:uppercase; margin-top:15px; margin-bottom:10px;} #Quote a.btn { background:#000; color:#fff; padding:0 1em; text-transform:uppercase; margin-left:0.625em; display:inline-block; border:2px solid #000;} #Quote a.btn:hover { background:#f4921c; color:#000; text-decoration:none;} #Quote p, #Quote a.btn {line-height:2.2em; font-size:1.125em; } a#Contact { background:#e6e6e6; color:#000; font-size:1.5em; display:block; padding:30px 20px; text-transform:uppercase; line-height:normal;} a#Contact:hover { background:#000; color:#f4921c; text-decoration:none;} #checkDomain .container { border-bottom:1px dashed #999; padding:60px 0 50px 0;} #checkDomain form { width:auto; margin:0 auto; padding:0 15px; text-align:left; display:inline-block;} #checkDomain label { color:#28a085;font-size:1.125em; font-weight:normal; margin-bottom:10px;} #checkDomain input[type="text"], #checkDomain select { font-size:1.125em; display:inline-block;} #checkDomain input[type="text"] { margin-right:6px;} #checkDomain select { width:auto; max-width:100%; margin-right:8px; padding:6px 8px;} /* Infinite Scroll /////////////////////////////////////////////////*/ #to-top {opacity: 0.3;border-radius: 50% 50% 50% 50%;} #to-top { width: 40px; height: 40px; text-align: left; text-indent: -9999px; background: url(../images/sprite.png) no-repeat scroll -120px -50px transparent; overflow: hidden; display: none; position: fixed; right: 20px; bottom: 20px; } #to-top:hover {opacity: 1;} /* About Us ////////////////////////////////////////////////////////// */ #AboutUs { background:#f4faf9;} #AboutUs .st-accordion {padding:2em 12em 4.5em 12em;} #AboutUs .st-accordion a { font-family: 'FoxesInLove', 'Courier New', Courier, monospace; color:#000;} #AboutUs .st-accordion a:focus { text-decoration:none; color: #28a085 !important;} /* Services ////////////////////////////////////////////////////////// */ #Services { background:#56b2a6; padding:0;} #Services h3 { font-family: 'FoxesInLove', 'Courier New', Courier, monospace; color:#fff; margin:0; padding:1.5em 0; background:#56b2a6; display:none;} #Services a { color:#00ffff; text-transform:uppercase; font-size:120%; font-weight:bold;} #Services .short-inner { color:#ffffff; padding:4em; text-align: center; line-height:1.5em; font-size:1em; } .service { display: inline; float: left; text-align: center; position: relative; overflow: hidden; /*width:326px;*/width:244px; height:266px; font-size:70%; } .service a { position: relative; z-index: 1; zoom: 1; opacity: 0.2; filter: alpha(opacity=0); display: block; padding:3.75em 1.5em !important; height:100%; color:#000 !important; font-family: 'FoxesInLove', 'Courier New', Courier, monospace; font-size:2.5em !important; line-height:normal; } .service a:hover { zoom: 1; opacity: 1; filter: alpha(opacity=1); background: rgba(259,259,259,0.5); text-decoration:none; } .service#services-branding { background: url(../images/image_01.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .service#services-web { background: url(../images/image_05.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .service#services-marketing { background: url(../images/image_03.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .service#services-sms { background: url(../images/image_07.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .service#services-google { background: url(../images/image_09.jpg) center bottom no-repeat; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #Services h2 { margin:1.5em 0 0 0; padding: 0.5em 1em; font-size:2em; font-weight:bold; display:inline-block; color:#fff; background:#fff url(../images/bg2.jpg) 0 25% no-repeat; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; } #Services h2.bottom {background:#fff url(../images/bg2.jpg) bottom center no-repeat; } #Services .highlightbox { margin:0 6em 2em 6em; padding:0.5em 1em; border:#ff0 dotted 2px; color:#ff0; text-shadow:2px 2px 4px #000; -moz-box-shadow: 0 0 8px rgba(0,0,0,.5); -webkit-box-shadow: 0 0 8px rgba(0,0,0,.5); box-shadow: 0 0 8px rgba(0,0,0,.5); } #Services .st-accordion {padding:2em 2em 2.5em 2em;} #Services .st-accordion li {background:none; border-bottom:1px dashed #fff;} #Services .st-accordion .st-content { padding-bottom:0; height:auto;} #Services .st-accordion p { margin:0; margin-bottom:1em; } #Services .st-accordion a { font-family: 'FoxesInLove', 'Courier New', Courier, monospace; color:#000; text-transform:capitalize; font-size:1.75em;} #Services .st-accordion a:hover, #Services .st-accordion a:visited { color:#00ffff !important;} #Services .st-accordion a:focus { text-decoration:none; color: #00ffff !important;} #Services .st-accordion .st-content a { font-size:1.3em;} #Services .st-accordion a.btn { font-family:"Century Gothic", Helvetica, Arial, sans-serif; margin-bottom:0;} #Services .st-accordion a.btn:hover, #Services .st-accordion a.btn:visited { color:#fff !important;} #Services .st-accordion ul li > a span { background: transparent url(../images/down_white.png) no-repeat center center;} #Services .st-accordion a .icon{ background:url(../images/cart.png) top right no-repeat; padding-right:1.5em; margin-right:0.9em; width: 1em; height:1em; } #Services .st-content li {background:none; border:0; padding:0 1em 0.5em 1.5em;} #Services .st-content ul.tickorange li {background:url(../images/tick-orange.png) 0 0.2em no-repeat; padding:0 1em 0.5em 1.5em;} .short-inner a.btn { background:#000; color:#fff !important; padding:0.3em 1em; text-transform:uppercase; margin:0 0 1em 0.625em; display:inline-block; line-height:2em; font-size:1.1em; } .short-inner a.btn:hover { background:#f4921c; text-decoration:none;} ul.tickblack, ul.tickorange, ul.think, ul.sms-icons { margin:0; padding:0;} ul.tickblack li { margin:0; display:inline-block; background:url(../images/tick-black.png) 0 0.2em no-repeat; padding:0 1em 0.5em 1.5em;} ul.tickorange li { margin:0; display:inline-block; background:url(../images/tick-orange.png) 0 0.2em no-repeat; padding:0 1em 0.5em 1.5em;} ul.think li { margin:0; display:block; background:url(../images/think.png) 0 0.2em no-repeat; padding:0 1em 0.5em 2.5em; font-style:italic; text-align:left;} ul.sms-icons li { margin:0; display:inline-block; padding:0 0.6em; width:16%; float:left; } #Services .highlight { color:#fff200;} /* Domain Register ////////////////////////////////////////////////////////// */ #DRegister { background:#f4faf9;} #DRegister .short-inner { padding:4em; text-align: center; line-height:1.5em; font-size:1em; } #DRegister table {margin:0 auto;} #DRegister input[type="text"], #Enquiry selectinput[type="text"], #DRegister input[type="password"], #DRegister input[type="email"], #DRegister input[type="website"], #DRegister input[type="phone"], #DRegister textarea, #DRegister select { font-size:1.125em; display:inline-block; width:20em; padding:0.3em; margin-bottom:0.3em;} #DRegister select { /*width:auto; max-width:100%; margin-right:8px; padding:6px 8px;*/width:20.5em;} #DRegister .highlight { color:#28a085;} /* Contact ////////////////////////////////////////////////////////// */ #Contact { background:#f4faf9;} #Contact .short-inner { padding:4em; text-align: center; line-height:1.5em; font-size:1em; } #Contact .highlight { color:#28a085;} /* Enquiry ////////////////////////////////////////////////////////// */ #Enquiry { background:#f4faf9;} #Enquiry .short-inner { padding:4em; text-align: center; line-height:1.5em; font-size:1em; } #Enquiry table {margin:0 auto;} #Enquiry input[type="text"], #Enquiry selectinput[type="text"], #Enquiry input[type="password"], #Enquiry input[type="email"], #Enquiry input[type="website"], #Enquiry input[type="phone"], #Enquiry textarea, #Enquiry select { font-size:1.125em; display:inline-block; width:20em; padding:0.3em; margin-bottom:0.3em;} #Enquiry select { /*width:auto; max-width:100%; margin-right:8px; padding:6px 8px;*/width:20.5em;} .mark { color:#F00;} /* Portfolio ////////////////////////////////////////////////////////// */ #Portfolio { background:#ffffff;} #Portfolio .short-inner { padding:2.2em 0 4em 0;} #Portfolio .subnav { padding:1.5em 0; background:#f7f7f7;} #Portfolio .subnav ul{ margin:0; padding:0; width:100%; font-size:1.2em;} #Portfolio .subnav li { margin:0.7em 2em; padding:0; display:inline-block; } #Portfolio .subnav li a { color:#999; border:2px solid #999; padding: 0.5em 1em; display:inline-block;} #Portfolio .subnav li a:hover { text-decoration:none; color:#f4921c; border:2px solid #f4921c;} #Portfolio h3 { font-family: 'FoxesInLove', 'Courier New', Courier, monospace; background:url(../images/subtitle_headbg.png) top left repeat-x; color:#28a085; padding:1em 1.5em 0 1.5em; margin:1.8em 0 0 0; font-size:2em; display:inline-block; } .nohand { cursor:default;} /* Terms ////////////////////////////////////////////////////////// */ #Terms { background:#f4faf9;} #Terms .short-inner { padding:4em; text-align:left; line-height:1.5em; font-size:1em; } /* Privacy ////////////////////////////////////////////////////////// */ #Privacy { background:#f4faf9;} #Privacy .short-inner { padding:4em; text-align:left; line-height:1.5em; font-size:1em; } /* e-Card ////////////////////////////////////////////////////////// */ #eCard { background:none;} #eCard .short-inner p { line-height:1.5em; font-size:1.2em; } #Footer { background:url(../images/footer_bg.jpg) bottom left repeat-x; padding:60px 0 50px 0;} #Footer .footer-nav { line-height:2.25em; margin-bottom:10px;} /*img { max-width: 100%; height: auto; }*/ /* #Media Queries ================================================== */ /* iPad Portrait/Browser */ @media only screen and (min-width: 768px) and (max-width: 991px) { .container { overflow:hidden; width: 95.5%;} #quad h3 { font-size:1.3em;} #quad .one-forth-full { width:25%;} .quad { width:100%; } .quad a { font-size:0.9em !important; line-height:normal !important;} #Services .one-forth-full { width:25%;} .service { width:100%; font-size:50%;} .service a { padding-top:5em !important;} ul.sms-icons li { width:17%;} #Footer .footer-nav2 .one-third-full.column { width:33%;} } /* Mobile/Browser */ @media only screen and (max-width: 767px) { .container { overflow:hidden;} .flexslider { width: 95.5%;} a.logo img { max-width:60%; height:auto;} a.logo { width:164px; height:44px;} .quad { width:100%; } / .quad-last, .service-last { display:none;} .innerbanner#banner-long .bannercontenttall p, .innerbanner#banner-long .bannercontentt p { padding:0 1em; margin:0;} #AboutUs .st-accordion {padding:0.5em 1em 3em 1em;} #Services .st-accordion {padding:0.5em 0 2em 0; margin:0;} #Services .st-accordion a .icon{ display:none;} #Services h2 { font-size:1.5em;} #Services .highlightbox {margin:0 1em 1em 1em;} #Enquiry .short-inner { font-size:0.95em;} #Enquiry input[type="text"], #Enquiry selectinput[type="text"], #Enquiry input[type="password"], #Enquiry input[type="email"], #Enquiry input[type="website"], #Enquiry input[type="phone"], #Enquiry textarea, #Enquiry select { font-size:0.8em; width:97%; padding:0.1em;} #Enquiry select { width:100%;} .short-inner { padding:1em !important;} .short-inner img { max-width:75%; height:auto;} .short-inner figure img { max-width:100%;} .flexslider ul.slides li div a h3.line2 { padding-left:1em; margin-top:0; } ul.sms-icons li { margin:0; display:block; padding:0 0.6em 1em 0.6em; width:95%; float:none; } ul.tickorange li { text-align:left; width:100%;} ul.tickorange strong { display:block;} } /* Mobile Landscape/Browser */ @media only screen and (min-width: 480px) and (max-width: 767px) { .container { overflow:hidden;} .flexslider { width: 95.5%;} a.logo img { max-width:75%; height:auto;} a.logo { width:189px; height:51px;} .innerbanner#banner-long .bannercontenttall p, .innerbanner#banner-long .bannercontentt p { padding:0 1em; margin:0;} #AboutUs .st-accordion {padding:0.5em 1em 3em 1em;} #Services .st-accordion {padding:0.5em 0 2em 0; margin:0;} #Services .st-accordion a .icon{ display:none;} #Services h2 { font-size:1.5em;} #Services .highlightbox {margin:0 1em 1em 1em;} .short-inner { padding:1em !important;} .short-inner img { max-width:75%; height:auto;} .short-inner figure img { max-width:100%;} } /* Anything smaller than standard 960 */ @media only screen and (max-width: 959px) { } /* iPad Portrait Only */ @media only screen and (min-width: 768px) and (max-width: 991px) and (max-device-width: 1000px) { .container { overflow:hidden;} .flexslider { width: 95.5%;} a.logo img { max-width:75%; height:auto;} a.logo { width:189px; height:51px;} .short-inner img { max-width:75%; height:auto;} .short-inner figure img { max-width:100%;} } /* Mobile Only */ @media only screen and (max-width: 767px) and (max-device-width: 1000px) { .container { overflow:hidden;} .flexslider { width: 95.5%;} a.logo img { max-width:50%; height:auto;} a.logo { width:126px; height:34px;} .short-inner img { max-width:75%; height:auto;} .short-inner figure img { max-width:100%;} } /* Mobile Landscape Only */ @media only screen and (min-width: 480px) and (max-width: 767px) and (max-device-width: 1000px) { .container { overflow:hidden;} .flexslider { width: 95.5%;} a.logo img { max-width:75%; height:auto;} a.logo { width:189px; height:51px;} } /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ @font-face { font-family: 'ErasLight'; src: url('../fonts/ErasLight.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'FoxesInLove'; src: url('../fonts/FoxesInLove.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'LetterGothic'; src: url('../fonts/LetterGothic.eot'); src: url('../fonts/LetterGothic.eot?iefix') format('eot'), url('../fonts/LetterGothic.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Century Gothic'; src: url('../fonts/CenturyGothic.eot'); src: local('CenturyGothic'), url('../fonts/CenturyGothic.woff') format('woff'), url('../fonts/CenturyGothic.ttf') format('truetype'); font-weight: normal; font-style: normal; }