/* SCREEN.CSS This is where all styles for on-screen media are declaired -------------------------------------------------------------------------------------------------------------------------- FILE INFO Revision number: 1.0 Last updated: 2009/12/03 Last updated by: Matt Wilcox ----------------------------------------------------------------------------------------------------------------------- */ /* =global_reset NOTE: Get browsers to the same baseline styles, based on (but not the same as) Eric Meyer's browser reset. REFERENCE: http://meyerweb.com/eric/thoughts/2008/01/15/resetting-again/ ----------------------------------------------------------------------------------------------------------------------- */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } /* turn off outline for clicked links, whilst leaving it on for keyboard navigation */ a:active { outline: none; } /* remember to highlight inserts somehow! */ ins { text-decoration: none; } del { text-decoration: line-through; } /* tables still need 'cellspacing="0"' in the markup */ table { border-collapse: collapse; border-spacing: 0; } /* =typography NOTE: Found that margin-top applied to everything is a pain - it often messes up layout and requires jumping through hoops to fix, so I've stopped doing this as a default and now add top margin manually when required. NOTE: Using px for type is bad for people using IE6, but good for my brain. IE6 is dying, so I think that's OK. Feel free to tut if you're a purist. I'm a pragmatist. REFERENCE: Based on http://alistapart.com/articles/settingtypeontheweb/ http://24ways.org/2006/compose-to-a-vertical-rhythm/ ----------------------------------------------------------------------------------------------------------------------- */ /* custom fonts * The following fonts included are copyrighted by the vendor listed below. * @vendor: Ralph Oliver du Carrois * @vendorurl: http://www.carrois.com * @licenseurl: http://www.fontsquirrel.com/license/Colaborate */ @font-face { font-family: 'Colaborate-ThinRegular'; src: url('/assets/fonts/ColabThi.eot'); src: local('Colaborate-Thin Regular'), local('Colaborate-Thin'), url('/assets/fonts/ColabThi.woff') format('woff'), url('/assets/fonts/ColabThi.otf') format('opentype'), url('/assets/fonts/ColabThi.svg#Colaborate-Thin') format('svg'); } @font-face { font-family: 'ColaborateLightRegular'; src: url('/assets/fonts/ColabLig.eot'); src: local('ColaborateLight Regular'), local('Colaborate-Light'), url('/assets/fonts/ColabLig.woff') format('woff'), url('/assets/fonts/ColabLig.otf') format('opentype'), url('/assets/fonts/ColabLig.svg#Colaborate-Light') format('svg'); } @font-face { font-family: 'Colaborate-RegularRegular'; src: url('/assets/fonts/ColabReg.eot'); src: local('Colaborate-Regular Regular'), local('Colaborate-Regular'), url('/assets/fonts/ColabReg.woff') format('woff'), url('/assets/fonts/ColabReg.otf') format('opentype'), url('/assets/fonts/ColabReg.svg#Colaborate-Regular') format('svg'); } @font-face { font-family: 'Colaborate-MediumRegular'; src: url('/assets/fonts/ColabMed.eot'); src: local('Colaborate-Medium Regular'), local('Colaborate-Medium'), url('/assets/fonts/ColabMed.woff') format('woff'), url('/assets/fonts/ColabMed.otf') format('opentype'), url('/assets/fonts/ColabMed.svg#Colaborate-Medium') format('svg'); } @font-face { font-family: 'Colaborate-BoldRegular'; src: url('/assets/fonts/ColabBol.eot'); src: local('Colaborate-Bold Regular'), local('Colaborate-Bold'), url('/assets/fonts/ColabBol.woff') format('woff'), url('/assets/fonts/ColabBol.otf') format('opentype'), url('/assets/fonts/ColabBol.svg#Colaborate-Bold') format('svg'); } /* more custom fonts * The following fonts included are copyrighted by the vendor listed below. * @vendor: Apostrophic Labs * @vendorurl: http://moorstation.org/typoasis/designers/lab/index.htm * @licenseurl: http://www.fontsquirrel.com/license/Steinem */ @font-face { font-family: 'SteinemRoman'; src: url('/assets/fonts/STEINEM_.eot'); src: local('Steinem Roman'), local('Steinem'), url('/assets/fonts/STEINEM_.woff') format('woff'), url('/assets/fonts/STEINEM_.ttf') format('truetype'), url('/assets/fonts/STEINEM_.svg#Steinem') format('svg'); } @font-face { font-family: 'SteinemRomanItalic'; src: url('/assets/fonts/STEINEMI.eot'); src: local('Steinem RomanItalic'), local('Steinem-Italic'), url('/assets/fonts/STEINEMI.woff') format('woff'), url('/assets/fonts/STEINEMI.ttf') format('truetype'), url('/assets/fonts/STEINEMI.svg#Steinem-Italic') format('svg'); } @font-face { font-family: 'SteinemBold'; src: url('/assets/fonts/STEINEMB.eot'); src: local('Steinem Bold'), local('Steinem-Bold'), url('/assets/fonts/STEINEMB.woff') format('woff'), url('/assets/fonts/STEINEMB.ttf') format('truetype'), url('/assets/fonts/STEINEMB.svg#Steinem-Bold') format('svg'); } @font-face { font-family: 'SteinemBoldItalic'; src: url('/assets/fonts/STEINBI_.eot'); src: local('Steinem BoldItalic'), local('Steinem-BoldItalic'), url('/assets/fonts/STEINBI_.woff') format('woff'), url('/assets/fonts/STEINBI_.ttf') format('truetype'), url('/assets/fonts/STEINBI_.svg#Steinem-BoldItalic') format('svg'); } body { font : 100%/1.5 Georgia, "Times New Roman", Times, serif; color : #453325; } html > body { font-size : 14px; line-height : 24px; } applet, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, address, img, dl, dt, dd, ol, ul, li, fieldset, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin-bottom : 1.5em; } h1 { font-size : 36px; line-height: 36px; margin-bottom: 18px; font-weight : normal; } h2 { font-size : 33px; line-height: 36px; margin-bottom: 18px; font-weight : normal; } h3, h4, h5, h6 { font-size : 18px; line-height: 18px; margin-bottom: 18px; font-weight : normal; } p {padding-bottom: 1.5em} /* fix safari to stop it rendering light text on dark backgrounds too fat body { -webkit-text-stroke : 1px transparent; } */ h1, h2, h3, h4, h5, h6 { Georgia, "Times New Roman", Times, serif; } /* =basic_design NOTE: The basic design section styles "default" elements, that is, how a

or etc look by default, without any page or class specific over-rides. ----------------------------------------------------------------------------------------------------------------------- */ /* =patch old browsers for new HTML5 tags */ header, footer, nav, article, section, aside { display : block; } /* =html =body */ html { /* background : url(../images/html.png) 0 100% repeat-x;*/ /* the footer graphic */ } body { background: #1F0E05 url(/assets/images/background.jpg); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; } /* =p */ blockquote p:before { content : "\201c"; } blockquote p:after { content : "\201d"; } blockquote p.author { border-top : 1px dotted #666; } blockquote p.author:before, blockquote p.author:after { content : ""; } .attributed p { margin-bottom : 0; } label p.error { padding : .5em; color : #fff; background : #c00; text-align : left; } p.intro { font-size : 20px; line-height : 25px; color : #acc500; } p.pullquote { width : 220px; margin-bottom : 0; font-size : 26px; line-height : 39px; color : #acc500; } /* =em =strong =del =ins =abbr =acronym =code */ em { font-style : italic; } strong { font-weight : bold; } del { text-decoration : line-through; } ins { text-decoration : none; color : #006; } del[title], ins[title] { cursor : help; } acronym, abbr { text-decoration : none; border-bottom : none; font-style : italic; cursor : help; } code { font-family : dialogue, 'Courier New', courier, serif; } sup { vertical-align : super; font-size : .8333em; } sub { vertical-align : sub; } cite {font-weight:bold;} /* =dl =dt =dd */ dl { } dt { margin-bottom : 0; font-weight : bold; font-style : italic; } dd { margin-top : 0; border-left : .3em solid #ddd; padding : .5em 0 0 .7em; } /* =ul */ #content ul { margin-left : 1em; list-style : disc outside; } /* =ol */ #content ol { margin-left : 1.6em; list-style : decimal outside; } /* =li */ li { margin : .5em 0; } /* =hr */ hr { display : none; } /* =a */ a:link { color : #4F4C45; text-decoration : none; } a:visited { color : #4F4C45; text-decoration : none; } a:hover { text-decoration : underline; } #content_main p a, body.item #content_supp p a{ color:#333; text-decoration: underline; } /* =img */ a img { display : block; margin : 0; } /* =div */ #container { position : relative; width : 760px; margin : 0 auto; margin-bottom: 0; padding-bottom: 0; } #content { padding : 20px 20px 0; background: #DBCDA5 url(/assets/images/content-background.jpg); } /* =span */ label span { display : block; } label.boolean span { display : inline; } /* =layout-classes */ .float-left { float : left; margin-right : 30px; } .float-right { float : right; margin-left : 20px; } .float-left.last { margin-right : 0; } .clear { clear : both; } /* =modules NOTE: Flirting with a CSS Object Orientated approach; use classes to define the styles rather than page-based cascades. This helps ensure that "widgets" and things can be used on ANY page and still look correct. I have a number of reservations with the "full" approach though, hence this watered down version. REFERENCE: http://wiki.github.com/stubbornella/oocss/faq ----------------------------------------------------------------------------------------------------------------------- */ /* website header */ #header { width: 100%; height: 300px; background-image: url(/assets/images/header-background.png); background-repeat: repeat-x; margin-bottom: 0;} #header-inner {width: 760px; height: 300px; margin: 0 auto; position: relative; margin-bottom: 0; background-image: url(/assets/images/inner-header-background.png); background-position: top left; background-repeat: no-repeat;} #header-inner h1 {display:none;} .logo {position: absolute; top: 80px; left: 20px;} .quote {font-size: 22px; color: #D6C496; font-weight: normal; letter-spacing:2px; position: absolute; right: 10px; top:100px;} #site_context { height : 200px; margin-bottom : 0; } #site_context .company { position : absolute; top : 39px; left : 37px; display : block; width : 310px; height : 73px; margin : 0; padding : 0; } #site_context .company a { position : absolute; top : 0; left : 0; display : block; padding : 20px; width : 270px; height : 33px; } #site_context .company a span { position : absolute; top : 0; left : 0; display : block; width : 100%; height : 100%; background : url(../images/site_context.png) 0 0 no-repeat; } #site_context .tagline { position : absolute; top : 120px; left : 58px; margin : 0; padding : 0; height : 26px; font-size : 18px; line-height : 18px; color : #5F5959; } #site_context .tagline span { position : absolute; top : 0; left : 0; margin : 0; padding : 0; width : 386px; height : 26px; background : url(../images/site_context.png) -330px -35px no-repeat; } /* website footer */ #carousel { width: 100%; height: 200px;} #carousel h3 {margin-left:15px; margin-bottom: 0;} #carousel-inner { margin:0 auto; width: 760px; height: 190px; background-image: url(/assets/images/carousel-background.png); background-repeat: repeat-x; padding-top: 10px} #footer { width: 100%; height: 260px; background-repeat: repeat-x; margin-bottom: 0;} #footer-inner {width: 760px; height: 260px; margin: 0 auto; position: relative; margin-bottom: 0; background-image: url(/assets/images/footer-background.jpg); background-repeat: no-repeat; background-position: top center;} #buttons {position: absolute; top: 25px; left: 10px;} #buttons ul {list-style-type: none; padding:0; margin:0;} #buttons li {margin-top: 5px; padding:5px; margin:0;} #footeraddress { position: absolute; bottom: -11px; left: 50px; font-size: 12px;} #articles {position: absolute; right: 0; top: 0; width: 265px; font-size: 12px; margin-right:5px;} #articles h2 {float:right; margin-right:20px; font-size: 16px; font-weight: bold; margin-bottom:0px; padding-top:20px;} #articles a {font-weight: bold;} #articles ul {padding-top:10px;} #footernav {position: absolute; left:0; top:6px;} #footernav a {color:#D6C79C;} #footernav li {display:inline; margin-right:10px;} #copyright { width: 100%; height: 175px; background-image: url(/assets/images/copyright-background.png); margin-bottom: 0;} #copyright-inner {width: 760px; height: 150px; margin: 0 auto; margin-bottom: 0; color: #D6C79C; padding-top: 15px; position: relative;} .copyright {position: absolute; right: 0; top:10px;} .copyright a {color:#D6C79C;} /* =nav_main */ #nav_main { position : absolute; bottom : 45px; right : 0; height : 29px; margin : 0; } #nav_main h2 { display : none; } #nav_main ul { height : 29px; margin : 0; list-style-type : none; } #nav_main li { float : left; display : inline; margin : 0; border-right: 1px solid #999BA0; } #nav_main li a { position : relative; display : inline-block; height : 29px; padding : 0 14px; border-right : 0; line-height : 29px; font-size : 15px; color : #333; font-weight: bold; } #nav_main li:last-child { border-right: 0; margin-right: 0; } #nav_main li a:hover { text-decoration: underline;} #nav_main li .active { text-decoration: underline;} /* =nav_sub */ #navi_sub { position : absolute; bottom : 3px; right : 0; height : 29px; margin : 0; color: #fff; } #navi_sub h2 { display : none; } #navi_sub ul { height : 29px; margin : 0; list-style-type : none; } #navi_sub li { float : left; display : inline; margin : 0 5px 0 0;} #navi_sub li a { position : relative; display : inline-block; height : 29px; padding : 0 7px; border-right : 0; color:#F19F00; line-height : 29px; font-size : 14px} #navi_sub li:last-child { margin-right : 7px; } #navi_sub li a:hover { text-decoration: underline;} #navi_sub li .active { text-decoration: underline;} /* =widgets */ #content_supp .widget ul li { list-style-type : none; } #content_supp .widget ul li.current > a { background-color : #444; padding : 0 5px; color : #fff; } #content_supp .widget ul li ul { margin-bottom : 0; } /* =content_images */ div.attributed img { display : block; margin-bottom : 0; } div.attributed p { font-size : 13px; margin-top : 4px; } /* =news_summary */ div.news_summary .news_item h2 { margin-bottom : 0; padding : 0; } div.news_summary .news_item h2 a:link div.news_summary .news_item h2 a:visited { color : #fff; } div.news_summary .news_item p.meta { border-bottom : 1px solid #999; font-size : 14px; } div.news_summary .news_item p.meta.comments { border-top : 1px solid #ddd; border-bottom : 0; padding-left : 0; } /* comment_form */ #comment_form fieldset.your_details { overflow : hidden; margin-bottom : 0; padding-left:16px;} #comment_form fieldset label span { font-size : 14px; } #comment_form label[for="comment_name"] { width: 200px; float: left; margin-bottom: 0pt; } #comment_form label[for="comment_email"] { width: 180px; float: left; margin-bottom: 0pt; } #comment_form label[for="comment_url"] { float : left; width : 384px; } #comment_form textarea { width : 596px; height : 200px; padding : 12px; font-family : Colaborate-ThinRegular; font-size : 16px; line-height : 24px; } #comment_form .your_message label[for="comment_comment"] span { display : none; } #comment_form p.note { float : left; width : 200px; margin-top:50px;} #comment_form .your_details input { width : 180px; } #comment_form label[for="comment_url"] input { width : 100%; } /* =comments */ #comments h2 { border-bottom : 1px solid #000; padding-bottom : 12px; } #comments div.meta { overflow : hidden; } #comments div.meta h3 { margin-bottom : 0; } #comments div.comment_message { border-bottom : 1px solid #000; } #comments img.avatar { float : left; margin : 0 12px 0 0; } /* =pages | layout for specific pages ----------------------------------------------------------------------------------------------------------------------- */ /* =home */ body.home #content_main { overflow : hidden; } body.home #content_main div { float : left; width : 460px; } body.home #content_main div h2 { font-size : 30px; line-height : 36px; } #home_cta {width: 730px; height: 541px; background-image: url(/assets/images/home-cta.jpg); background-repeat: no-repeat; margin-top:-30px; line-height:20px;} #cta_text {width:235px; padding-left:32px; padding-top:40px; font-size:12px;} /* =frames */ #frames_cta {width: 730px; height: 541px; background-image: url(/assets/images/frames-cta.jpg); background-repeat: no-repeat; margin-top:-30px;} #frames_cta_text {width:235px; padding-left:32px; padding-top:40px; font-size:12px; line-height:20px;} #frames_wrapper {margin-top:-68px; height:550px; padding-right:0; margin-right:0; background-image: url(/assets/images/frames-background.jpg); background-position:top right; background-repeat:no-repeat;} #framestext {width:370px; font-size:12px; margin-top:-20px; line-height:21px;} .inlinegallery li {display:inline;} .inlinegallery img {float:left; margin-right:8px; margin-bottom:10px; border:6px solid #fff;} /* =designs */ #designs_cta {width: 730px; height: 500px; background-image: url(/assets/images/designs-cta.jpg); background-repeat: no-repeat; margin-top:-30px; position:relative;} #designs_cta_text {width:235px; padding-left:32px; padding-top:40px; font-size:12px; line-height:18px;} #designs_wrapper {margin-top:-68px; height:550px; padding-right:0; margin-right:0; background-image: url(/assets/images/frames-background.jpg); background-position:top right; background-repeat:no-repeat;} #designstext {width:370px; font-size:12px; margin-top:-20px; line-height:21px;} .walkthough {position:absolute; top:70px; right: 35px;} .enlarge {margin-left:320px;} /* =build */ #build_cta {width: 730px; height: 541px; background-image: url(/assets/images/build-cta.jpg); background-repeat: no-repeat; margin-top:-30px;} #build_cta_text {width:235px; padding-left:32px; padding-top:40px; font-size:12px; line-height:19px;} #build_wrapper {margin-top:-68px; height:450px; padding-right:0; margin-right:0; background-image: url(/assets/images/build-notes.jpg); background-position:bottom right; background-repeat:no-repeat;} #buildtext {width:290px; float:left; font-size:13px; margin-top:10px; line-height:18px;} /* =design gallery*/ .largedesign-top {width:640px; height:16px; margin-left:36px; background-image: url(/assets/images/plan-top.png); background-repeat: no-repeat; background-position: top center;} .largedesign {margin-left:36px;} .largedesign-bottom {width:640px; height:16px; margin-left:36px; background-image: url(/assets/images/plan-bottom.png); background-repeat: no-repeat; background-position: bottom center;} .designdetails {margin-left:38px;} /* =gallery */ #gallery ul { list-style-type: none; margin-left: 30px; z-index:100;} #gallery li { width: 190px; height: 130px; padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 45px; background-image: url(/assets/images/item-background.png); background-repeat: no-repeat; background-position: top center; display: inline; float: left; margin-right: 15px; } .gallerypagination {float:right; margin-right:30px;} .pagination ul {list-style-type: none; float: right; margin-right:30px;} .pagination li {display: inline; float: left; padding-right: 10px;} /* =case studies */ #casestudies-wrapper { background-image: url(/assets/images/casestudies-background.jpg); background-position: top center;} #caseinfo { font-family:courier; font-size:12px; background:#D6C496; background-image: url(/assets/images/pullquote-background.jpg); border-top: 3px solid #453325; border-bottom: 3px solid #453325; padding:10px; z-index:100;} #caseinfo li {display:inline; margin-right:20px;} .leaves {position: absolute; top:-2px; right:5px; z-index:1;} /* =contact */ #contact_cta {width: 730px; height: 501px; background-image: url(/assets/images/contact-cta.jpg); background-repeat: no-repeat; margin-top:-30px; position:relative;} #contact_cta_text {width:235px; padding-left:32px; padding-top:40px; font-size:12px; line-height:20px;} #contact_brochure { width: 675px; height:190px; position:relative; margin-left:20px; margin-top:20px; background-color:#453325; background-image: url(/assets/images/brochure_background.jpg); background-repeat:no-repeat; background-position:top right; color:#EEA103;} #brochure_text {position:absolute; width:230px; left:200px; top:10px;} .contacttext {width: 350px; } #contactinfo {postion:absolute; width:200px; bottom:0; right:0;} #contact-form { background-image: url(/assets/images/contactform-background.jpg); width:700px; height:500px; } #form-left {float:left; margin-left:20px;} #form-right {float:right; margin-right:20px;} body.contact .your_details label, body.contact .enquiry_details label { display : block; } body.contact .your_details span, body.contact .enquiry_details span { float : left; display : block; width : 160px; } body.contact .your_details input, body.contact .your_details select, body.contact .enquiry_details select { width : 260px; } body.contact .enquiry_details label.form_message { display : block; border-top : 1px solid #bbb; padding-top : 12px; } body.contact .enquiry_details .form_message span { float : none; } body.contact .enquiry_details textarea { width : 420px; height : 160px; } /* =news */ body.news #content { overflow : hidden; } body.news #content_main { margin-bottom:0; } body.news.item #content_main { margin: 0 auto; } body.news .article { border-bottom : 1px solid #999; margin-bottom : 17px; position:relative; z-index:10; } body.news .article h2 { margin-bottom : 0; } body.news .article h3, body.news p.comments span, body.news .meta p.post_date span { position : absolute; left : -999em; overflow : hidden; } body.news.item .meta p.post_date span { position : relative; left : 0; } body.news #content_supp p.comments_info span { float : left; width : 87px; } body.news #content_supp p.comments_info a.comment_add { clear : both; } body.news #content_supp p.comments_info a.comment_count { float : left; display : block; color : #fff; } body.news p.comments, body.news p.comments_info a.comment_count { width : 39px; height : 32px; text-align : center; background : url(../images/icon_comments.png) 0 0 no-repeat; color : #fff; } body.news .meta p { display : inline-block; font-size : 14px; line-height : 22px; } body.news.item #content_supp .meta p { font-size : 14px; } body.news #content_main .meta p.comments a { text-transform : lowercase; color : #fff; } body.news .meta p.excerpt { font-size : 16px; } body.news.item #content_supp p { margin-top : 20px; padding-top : 20px; border-top: 1px dotted #999; font-size : 12px; font-style : italic; } body.news.item #content_supp p.post_date { margin-top : 0; border-top : 0; padding-top : 0; } body.news.item #content_supp div.related_post { border-top : 1px solid #aaa; padding-top : 17px; } body.news.item #content_supp div.related_post p { border-bottom : 0; } body.news.item #content_supp p.downloads, body.news.item #content_supp p.related { border-bottom-width : 0; margin-bottom : 0 ; padding-bottom : 0; } body.news.item #content_supp ul.downloads li { padding-left:24px; list-style:none; font-size:0.8em; background : url(../images/icon_other.png) 0 3px no-repeat; } body.news.item #content_supp ul.downloads li.jpg, body.news.item #content_supp ul li.gif, body.news.item #content_supp ul li.png { background : url(../images/icon_jpg.png) 0 3px no-repeat; } body.news.item #content_supp ul.downloads li.doc { background : url(../images/icon_doc.png) 0 3px no-repeat; } body.news.item #content_supp ul.downloads li.zip { background : url(../images/icon_zip.png) 0 3px no-repeat; } body.news.item #content_supp ul.downloads li.pdf { background : url(../images/icon_pdf.png) 0 3px no-repeat; } body.news.item #content_supp ul.downloads li span { font-style:italic;} .pullquote { width:200px; padding:20px; background:#D6C496; background-image:url(/assets/images/pullquote-background.jpg); border-top: 3px solid #453325; border-bottom: 3px solid #453325; font-style:italic; } div.image { padding : 8px; background-color : #efefef; margin-top : 10px; margin-bottom : 10px; } div.image .caption { display : block; line-height : 18px; } div.image a img { margin-bottom : 6px;} /** * This

element is wrapped by jCarousel around the list * and has the classname "jcarousel-container". */ .jcarousel-container { position: relative; margin-top: 0; } .jcarousel-clip { z-index: 2; padding: 0; margin: 0; overflow: hidden; position: relative; } .jcarousel-list { z-index: 1; overflow: hidden; position: relative; top: 0; left: 0; margin: 0; padding: 0; } .jcarousel-list li, .jcarousel-item { float: left; list-style: none; /* We set the width/height explicitly. No width/height causes infinite loops. */ width: 210px; height: 160px; } /** * The buttons are added dynamically by jCarousel before * the