/* CSS Document */
* { margin:0; padding:0; }
a { outline:none; color:#262626; }
a img { border:0; outline:0; }
.clear { width:100%; clear:both; height:0; overflow:hidden;}

@font-face {
	font-family: "Futura";
	src: url("FuturaStd-Light.otf");
}    
body { font-family: "Futura", Arial, sans-serif; background-color:#262626; }


#wrapper { width:948px; height:auto; margin:auto; position:relative; }

#header { width:100%; height:83px; background-image:url(../images/header-bg.png); background-repeat:no-repeat; background-position:top right; position:relative; top:0; z-index:10; }
#header div.logo { width:233px; height:39px; float:right; padding:25px 0 0 0; }

/* Navbar */
#navbar-container { width:100%; height:162px;  position:absolute; top:0; left:0;  z-index:111;  }
#navbar { width:970px; height:162px; padding:0 0 0; margin:auto; position:relative; }
#navbar span { height:150px; display:inline-block; }

#navbar span.jquery_bounce1 { width:100px; height:150px; display:inline-block; }
#navbar span.jquery_bounce2 { width:100px; height:150px; display:inline-block; }
#navbar span.jquery_bounce3 { width:100px; height:150px; display:inline-block; }
#navbar span.jquery_bounce4 { width:100px; height:150px; display:inline-block; }
#navbar span.jquery_bounce5 { width:100px; height:150px; display:inline-block; }
#navbar span.jquery_bounce6 { width:100px; height:150px; display:inline-block; }
#navbar span.jquery_bounce7 { width:100px; height:150px; display:inline-block; }


#navbar a.home { width:177px; height:145px; float:left; background-image:url(../images/nav-home-btn.png); background-repeat:no-repeat; background-position:0 0; position:absolute; z-index:20; left:0px; cursor:pointer; }
#navbar a.home:hover, #navbar a.home.hover,
#navbar a.home-active { background-position:0 -145px; }

#navbar a.what-we-think { width:130px; height:89px; float:left; position:absolute; background-image:url(../images/nav-what-we-think-btn.png); background-repeat:no-repeat; background-position:0 0; top:69px; left:-30px; z-index:19; cursor:pointer; }
#navbar a.what-we-think:hover, #navbar a.what-we-think.hover,
#navbar a.what-we-think-active { background-position:0 -89px; }

#navbar a.whats-on-offer-btn { width:129px; height:74px; float:left; background-image:url(../images/nav-whats-on-offer-btn.png); background-repeat:no-repeat; background-position:0 0; position:absolute; top:69px; left:-20px; z-index:18; cursor:pointer;}
#navbar a.whats-on-offer-btn:hover, #navbar a.whats-on-offer-btn.hover,
#navbar a.whats-on-offer-btn-active { background-position:0 -74px; } 

#navbar a.best-of-the-best-btn { width:176px; height:79px; float:left; background-image:url(../images/nav-best-of-the-best-btn.png); background-repeat:no-repeat; background-position:0 0; position:absolute; top:69px; left:10px; z-index:17; cursor:pointer; }
#navbar a.best-of-the-best-btn:hover, #navbar a.best-of-the-best-btn.hover,
#navbar a.best-of-the-best-btn-active { background-position:0 -79px; }

#navbar a.our-best-friends { width:143px; height:87px; float:left; background-image:url(../images/nav-our-best-friends.png); background-repeat:no-repeat; background-position:0 0; position:absolute; top:69px; left:63px; z-index:19; cursor:pointer; }
#navbar a.our-best-friends:hover, #navbar a.our-best-friends.hover,
#navbar a.our-best-friends-active { background-position:0 -87px; }

#navbar a.word-of-mouth { width:100px; height:61px; float:left; background-image:url(../images/nav-word-of-mouth-btn.png); background-repeat:no-repeat; background-position:0 0; position: absolute; top:69px; left:100px; z-index:19; cursor:pointer; }
#navbar a.word-of-mouth:hover, #navbar a.word-of-mouth.hover,
#navbar a.word-of-mouth-active { background-position:0 -61px; }

#navbar a.nice-to-meet-you { width:152px; height:80px; float: left; background-image:url(../images/nav-nice-to-meet-u-btn.png); background-repeat:no-repeat; background-position:0 0; position: absolute; top:69px; left:102px; z-index:14; cursor:pointer; }
#navbar a.nice-to-meet-you:hover,  #navbar a.nice-to-meet-you.hover, 
#navbar a.nice-to-meet-you-active { background-position:0 -80px; }






/* Content Container */
#content-container { width:928px; height:801px; float:left; display:inline; margin:0 0 0 9px; position:relative; z-index:1;  top:-45px; background-image:url(../images/content-bg.jpg); background-repeat:no-repeat; background-position:top; } 

#homepage-content { width:926px; height:808px; float:left; background-image:url(../images/homepage-bg.png); background-repeat:no-repeat; display:inline; margin:0 0 0 3px; position:relative; top:20px;  } 
#homepage-content div.box { width:387px; height:550px; float:left; display:inline; margin:230px 0 0 20px;  }
#homepage-content div.latest-greatest { width:178px; height:132px; position:absolute; top:340px; left:470px; }
#homepage-content div.latest-greatest a { width:178px; height:132px; float:left; background-image:url(../images/latest-and-greatest.png); background-repeat:no-repeat; }
#homepage-content div.latest-greatest span.jquery_bounce12 { width:178px; height:132px; }




/* GREENS */

#homepage-content div.greens { width:192px; height:158px; position:absolute; top:338px; left:420px; }
#homepage-content div.greens a { width:203px; height:167px; float:left; background-image:url(../seeads.png); background-repeat:no-repeat; }
#homepage-content div.greens span.jquery_bounce13 { width:192px; height:158px; }
#greens-text {width: 440px; display:block; }
#greens-text h1 {font-size:16px; color:#8075AB; padding: 25px 0px 0px 62px; }
#greens-text p {font-size:15px; color:#4d4d4f; padding: 10px 0px 0px 62px; }






/* Footer Bottom Right Links */
#footer-bottom-right-container { width:300px; height:200px; position:absolute;  bottom:30px; right:0;  margin:100px 0 0 0;   z-index:50; }
#footer-bottom-right { width:300px; height:200px; position:relative;}
#footer-bottom-right a.lets-hang-out { width:96px; height:105px; float:right; background-image:url(../images/lets-hang-out-btn.png); background-repeat:no-repeat;   }
#footer-bottom-right a.free-treats-btn { width:117px; height:98px; float:left; background-image:url(../images/free-treats-btn.png); background-repeat:no-repeat; }
#footer-bottom-right a.arty-farty-btn { width:88px; height:107px; float:left;  background-image:url(../images/arty-farty-btn.png); background-repeat:no-repeat; z-index:3; }
#footer-bottom-right a.check-us-out-btn { width:84px; height:42px; float:left; background-image:url(../images/check-us-out-btn.png); background-repeat:no-repeat; background-position:0 0; }
#footer-bottom-right a:hover.check-us-out-btn { background-position:0 -42px; }

#footer-bottom-right span.jquery_bounce8 { height:107px;  display:inline-block; position:absolute; bottom:95px; right:-3px; }
#footer-bottom-right span.jquery_bounce9 { height:98px; position:absolute; bottom:77px; right:45px; }
#footer-bottom-right span.jquery_bounce10 { height:105px; position:absolute; bottom:15px; right:-10px; }
#footer-bottom-right span.jquery_bounce11 { height:42px; position:absolute; bottom:46px; right:77px; }

/****************************************/
/* Template Content */
/****************************************/

#template-content { width:894px; height:auto; float:left; padding:30px 0 0 16px; }
#template-content div.banner { width:897px; height:auto; float:left; padding:0 0 0 0; border-bottom:12px solid #c7c8ca; margin-left:2px; }
#template-content div.bannera { width:894px; height:auto; float:left; padding:0 0 0 0; border-bottom:12px solid #c7c8ca; margin-left:2px; }
#template-content div.testi-top { width:892px; height:474px; float:left;  background-image:url(../images/template-image.jpg); background-repeat:no-repeat; border-bottom:12px solid #c7c8ca; margin-left:2px; }
#template-content div.testi-top div.testi { width:auto; height:auto; float:left; padding:221px 0 0 70px; }

#template-content div.left-content { width:291px; height:198px; float:left; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; display:inherit;  margin:40px 0 0 0; }
#template-content div.right-content { width:588px; height:auto; float:left; padding:0 0 0 15px; display:inline; margin:40px 0 0 0; }

/* Art At Cyclone Content */
#template-content div.art-at-cyclone-content { width:100%; height:auto; float:left;  }
#template-content div.art-at-cyclone-content div.image { width:100%; height:auto; float:left; text-align:center; padding:0 0 35px 0; }
#template-content div.art-at-cyclone-content div.text { width:100%; height:auto; float:left; text-align:center; font-size:17px; color:#4d4d4f; padding-bottom:6px; }
#template-content div.art-at-cyclone-content div.text a { color:#4c4d4f; text-decoration:underline; }
#template-content div.art-at-cyclone-content div.text a:hover { color:#000; }

/* Clients Content */
#clients-content { width:908px; height:auto; padding:140px 0 0 20px; float:left; }
#clients-content div.clients { width:592px; height:auto; float:left; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:590px 26px; }
#clients-content div.clients div.title { width:100%; height:32px; float:left; }
#clients-content div.clients div.each-client { width:127px; height:48px; float:left; background-color:#f3f3f4; display:inline; margin:18px 18px 0 0; }

#clients-content div.partners { width:304px; height:auto; float:left; padding:0 0 0 12px; }
#clients-content div.partners div.title { width:286px; height:32px; float:left; padding-left:18px; }
#clients-content div.partners div.each-partner { width:127px; height:48px; float:left; background-color:#f3f3f4; display:inline; margin:18px 0 0 18px; }


/* Contact Content */
div.contact-content { width:908px; height:auto; padding:20px 0 0 2px; float:left;  }
div.contact-content div.map { width:192px; height:192px; float:left; padding-right:20px; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; }
div.contact-content div.contact-info { width:500px; height:auto; float:left; padding:0 0 0 20px; }
div.contact-content div.contact-info div.text { width:100%; height:auto; float:left; padding:5px 0 0 0; }
div.contact-content div.contact-info div.text p { width:100%; height:auto; float:left; font-size:14px; color:#4c4d4f; padding-bottom:6px; }
div.contact-content div.contact-info div.text p span { width:47px; float:left; }


/* Team Content */
div.team-content { width:908px; height:auto; padding:20px 0 0 2px; float:left;  }
div.team-content div.staff-photo { width:251px; height:237px; float:left;  padding-right:20px; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; }
div.team-content div.staff-names { width:65px; height:222px; float:left; padding:15px 0 0 20px; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; }
div.team-content div.staff-names ul { width:100%; height:auto; float:left; padding:0; list-style:none; }
div.team-content div.staff-names ul li { width:100%; float:left; line-height:22px; }
div.team-content div.staff-names ul li a { float:left; font-size:12px; color:#4d4d4f; text-decoration:none; }
div.team-content div.staff-names ul li a:hover,
div.team-content div.staff-names ul li a.active { color:#8075ab; }

div.team-content div.staff-info { width:300px; height:auto; float:left; padding:15px 0 0 20px; }
div.team-content div.staff-info h1 { width:100%; height:auto; float:left; font-size:13px; padding:4px 0 8px 0; color:#8075ab; }
div.team-content div.staff-info p.text { width:100%; height:auto; float:left; font-size:12px; color:#4d4d4f; line-height:22px; }

/* Testimonials Content */
div.testimonials-content { width:908px; height:auto; padding:20px 0 0 20px; float:left;  }
div.testimonials-content p { width:100%; height:auto; float:left; font-size:12px; color:#4d4d4f; padding:15px 0 0 0; }
div.testimonials-content div.column-1 { width:255px; height:243px; padding:5px 15px 0 0; float:left; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; }
div.testimonials-content div.column-2 { width:301px; height:243px; padding:5px 15px 0 15px; float:left; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; }
div.testimonials-content div.column-3 { width:276px; height:243px; padding:5px 0 0 15px; float:left; }

/* Folio Content */
div.folio-content { width:908px; height:auto; padding:20px 0 0 2px; float:left;  }
div.folio-content div.client-info { width:300px; height:220px; float:left; padding:0 0 0 20px; }
div.folio-content div.client-info h1 { width:100%; height:auto; float:left; font-size:13px; padding:4px 0 8px 0; color:#8075ab; font-weight: normal; }
div.folio-content div.client-info p.text { width:100%; height:auto; float:left; font-size:12px; color:#4d4d4f; line-height:16px; }

div.folio-content div.client-names { width:375px; height:220px; float:left; padding:0 0 0 20px; background-image:url(../images/vertical-line-border.jpg); background-repeat:no-repeat; background-position:top right; }
div.folio-content div.client-names h1 { width:100%; height:auto; float:left; font-size:13px; padding:4px 0 8px 0; color:#8075ab; font-weight: normal; }
div.folio-content div.client-names ul.column-1 { width:135px; height:auto; float:left; padding:0; list-style:none; }
div.folio-content div.client-names ul.column-1 li { width:116px; float:left; line-height:22px; font-size:12px; color:#4d4d4f; }
div.folio-content div.client-names ul.column-1 li a { float:left; font-size:12px; color:#4d4d4f; text-decoration:none; }
div.folio-content div.client-names ul.column-1 li a:hover,
div.folio-content div.client-names ul.column-1 li a.active { color:#8075ab; }

div.folio-content div.client-names ul.column-2 { width:106px; height:auto; float:left; padding:0; list-style:none; }
div.folio-content div.client-names ul.column-2 li { width:116px; float:left; line-height:22px; font-size:12px; color:#4d4d4f; }
div.folio-content div.client-names ul.column-2 li a { float:left; font-size:12px; color:#4d4d4f; text-decoration:none; }
div.folio-content div.client-names ul.column-2 li a:hover,
div.folio-content div.client-names ul.column-2 li a.active { color:#8075ab; }

div.folio-content div.client-names ul.column-3 { width:109px; height:auto; float:left; padding:0; list-style:none; }
div.folio-content div.client-names ul.column-3 li { width:116px; float:left; line-height:22px; font-size:12px; color:#4d4d4f; }
div.folio-content div.client-names ul.column-3 li a { float:left; font-size:12px; color:#4d4d4f; text-decoration:none; }
div.folio-content div.client-names ul.column-3 li a:hover,
div.folio-content div.client-names ul.column-3 li a.active { color:#8075ab; }


div.folio-slider { width:100%; height:489px; float:left; padding:0; margin-left:2px; background-image:url(../images/folio-slider-bg.jpg); background-repeat:no-repeat; background-position:top; }


/* Philosophy Page */
#template-content div.philosophy-content { width:100%; height:auto; float:left;  }
#template-content div.philosophy-content div.image { width:893px; height:617px; float:left; background-image:url(../images/philosophy-image-bg.jpg); background-repeat:no-repeat; background-position:top center; display:inline; margin:140px 0 0 5px;  }
#template-content div.philosophy-content div.image div.text-container { width:483px; height:191px; float:left; display:inline; margin:427px 0 0 200px; background-image:url(../images/vertical-line-border.jpg); background-repeat:repeat-y; background-position:top center; }
#template-content div.philosophy-content div.image div.text-container div.left-col { width:213px; height:auto; padding:0 28px 0 0; float:left; text-align:right; }
#template-content div.philosophy-content div.image div.text-container div.left-col div.title { width:100%; height:35px; float:left; text-align:right; padding:15px 0 0 0; }
#template-content div.philosophy-content div.image div.text-container div.left-col p.text { float:left; text-align:right; font-size:12px; line-height:16px; color:#4d4d4f; }

#template-content div.philosophy-content div.image div.text-container div.right-col { width:213px; height:auto; padding:0 0 0 28px; float:left; text-align:left; }
#template-content div.philosophy-content div.image div.text-container div.right-col div.title { width:100%; height:35px; float:left; text-align:left; padding:15px 0 0 0; }
#template-content div.philosophy-content div.image div.text-container div.right-col p.text { float:left; text-align:left; font-size:12px; line-height:16px; color:#4d4d4f; }


/* Footer */
#footer { width:956px; height:29px; margin:auto; clear:both; background-color:#151515; position:relative; top:-45px; z-index:1; position:relative; }
#footer div.links { width:auto; height:auto; float:left; font-size:12px; color:#8f8f8f; padding:6px 0 0 4px;  }
#footer div.links h3 { float:left; font-size:11px; color:#8f8f8f;  padding:2px 5px 0 5px; font-weight:normal; }
#footer div.links h4 { float:left; }
#footer div.links h4 a { float:left; font-size:11px; color:#8f8f8f; text-decoration:none; padding:2px 5px 0 5px; font-weight: normal;}
#footer div.links h4 a:hover { color:#fff; }
#footer div.links span { float:left; font-size:12px; color:#8f8f8f; }