body { font-size:11px; font-family: Verdana, Arial, Sans-Serif; background: #ffffff; color: #333; text-align: left; } a:link { text-decoration : none; color: #15ae39; font-weight:bold;} a:active { text-decoration : underline; color: #15ae39; font-weight:bold;} a:visited { text-decoration : none; color: #15ae39; font-weight:bold; } a:hover { text-decoration : underline; color: #15ae39; font-weight:bold;} #jqb_object img{ border: none; } #jqb_object { position:relative; width:600px; height:230px; overflow:hidden; } #jqb_object .jqb_bar{ position:absolute; width:600px; height: 30px; left:0px; bottom:0px; background:#1C4557; opacity:0.7; filter:alpha(opacity=70); color: #ffffff; font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, Serif; font-weight: bold; font-size: 18px; letter-spacing: 1px; } #jqb_object .jqb_slide{ position:absolute; width:600px; height:200px; font-family: Georgia, "Palatino Linotype", "Book Antiqua", Palatino, Serif; font-weight: bold; font-size: 18px; letter-spacing: -1px; text-align: left; } #jqb_object .jqb_info{ position:absolute; padding: 5px 10px 2px 10px; float: left; } #jqb_object .jqb_btn{ width: 15px; height: 14px; margin: 10px 5px 2px 2px; float: right; } #jqb_object .jqb_btn_next{ background-image:url(/js/jqbanner/img/btn_next.gif); } #jqb_object .jqb_btn_prev{ background-image:url(/js/jqbanner/img/btn_prev.gif); } #jqb_object .jqb_btn_pause{ background-image:url(/js/jqbanner/img/btn_stop.gif); } #jqb_object .jqb_btn_play{ background-image:url(/js/jqbanner/img/btn_play.gif); } /******************************************************************************* * skidoo_redux.css : 2007.08.09 : ruthsarian@gmail.com * ----------------------------------------------------------------------------- * This stylesheet is released into the public domain. *******************************************************************************/ /******************************************************************************* * BASIC LAYOUT MECHANICS * * GENERAL NOTES * - yes, that's a lot of DIVs for a three-column layout. there is a reason * it all. first, all the columns must be floated to prevent a 3-pixel text * jog (a bug) that IE/Win 6 and earlier have. I can't use CSS hacks around * this one and need the extra markup. But using all floats can have * positive consequences, especially when using floated elements that need * to be cleared, but without clearing the other columns of the layout. * - NEGATIVE MARGINS is an approach to the three-column CSS layout that seems * to have the most compatibility and potential. the real strength of this * idea is to have the ability to provide different colors (or images) as * the background for each column. traditional three-column layouts can't * do this because the columns are only as tall as needed to fit their * content. in other words they don't run the full height of the layout. * negative margins gives us a means to fake this functionality. borders * (or padding, or margins) applied on #outer-columainnav-container reserve the * space where the left and right columns will live. all three columns are * floated. since the columns are cleared inside #inner-columainnav-container, * #inner-columainnav-container (and #outer-columainnav-container) will be as tall as * the tallest of the three columns. this means the borders will also be * this tall, giving the visual appearance that all three columns are the * same height. * - Some browsers, most notably older versions of Gecko (Netscape 7, FF 1.5 * & earlier) have a problem with this approach where the two side columns * won't be cleared if they exist entirely outside the space of the parent * element (#inner-columainnav-container) where we clear the three columns. So * they need to be made to overlap the area of the middle column by at * least 1 pixels. This is why the outer columns have a 1 pixel margin on * their inner edge and the middle column (and c-sourceorder-container) * have negative margins (to make room for the 1px margin from the outer * columns). These negative margins should be moved into the HACKS section * in a future update. * * #body-container * - wraps the entire page. use this to set min/max widths and set any margins * or border that wraps the whole layout. * * #outer-columainnav-container * - reserves space for the left and right columns. using borders allows you * to use the border color to act as the background color for the left and * right columns. background color could then act as the background of the * middle column. * * #inner-columainnav-container * - provides the single-pixel black border between the middle column and * its outside brothers. * * #content-sourceorder-container * - source ordered layouts place the main content at the top of the page. to * do this with CSS in a three-column layout you need to wrap two of the * three columns in an element (DIV) to float them together as if it was a * a single column. * - this element contains both the #middle-column and #left-column elements. * * #middle-column, #left-column, #right-column * - containers for the each of the three columns in the layout * * #footer * - bottom of your webpage. a place to put copyright and contact information * * .clear-columns * - this class is assigned to an empty div placed after the last (floating) * column inside a block that contains two or more floating columns. it * clears the floats, forcing the element containing the columns to * visually contain all of its columns. there are alternative approaches * to clearing which do not require this extra markup (see * http://www.positioniseverything.net/easyclearing.html) however I find * this method is much more effective and compatible for the task at hand. * also, it should be evident by now that markup bloat is not a concern * with this particular layout. */ .clear-columns {clear: both;} #content-outercontainer-container {border-left: solid 249px #FC6; /* left column's width and background color */ border-right: solid .1em #FFF; /* right column's width and background color */} #content-innercontainer-container {width: 100%; /* force this element to take the full width between the left and right columns. this is especially important as children of this element will have width:100%; set, and how that 100% value is interpreted depends on the width of it's parent (this element). */} #content-sourceorder-container {float: left; /* float left so the right column, which is outside this element, has a place to go. */ width: 100%; /* force this to go as wide as possible */ margin-right: -1px; /* make room for the right-column's overlap. */} #left-column {float: left; /* float left, where it'll live */ margin-left: -249px; /* move it further left. the value here should be the same value as the left border width on #outer-columainnav-container, but negative */ width: 249px; /* need to set a definite width, should be the same width as the left border width on #outer-columainnav-container */ margin-right: 1px; /* overlap the middle column to help with clearing. see general notes above. */} #middle-column {float: right;/* middle column goes right of the left column since the two share the same parent element */ width: 100%; /* make the middle column as wide as possible for a fluid layout. #content-sourceorder-container also at 100% width */ margin-left: -1px; /* make room for the left-column's overflap */} #right-column {float: right; /* float on the right side of the layout */ margin-right: -.1em; /* move it further right. the value here should be the same value as the right border width on #outer-columainnav-container, but negative */ width: .1em; /* need to set a definite width, should be the same width as the right border width on #outer-columainnav-container */ margin-left: 1px; /* overlap the middle column */} /******************************************************************************* * BASE THEME * * Setup basic styling for the layout. This will set gutterspace and generate a * basic border structure for the layout. Real layout styling belongs in a * separate "theme" stylesheet; leave this stylesheet untouched. */ body { padding: 0; /* padding on the body element when javascript min-width is in use will create problems in IE/Win 6. */ margin: 14px 0; /* horizontal margins belong on #body-container. vertical margins are not there as well due to small rendering issues in IE/Win 5 when viewport is shorter than webpage */} #content-container {background-color: #fff; /* background for the middle column */ border: solid 0px #000; /* border around the entire layout */ min-width: 760px; /* limit how narrow the layout will shrink before it stops. */ margin: 0 14px; /* horizontal margins here instead of on the body because we're setting min-width on this element. if margins set on body users will see an odd skip in the layout's rendering as it's resized below min-width. (JS-based min-width only.) */ } #content-innercontainer-container {border: solid 0px #000; border-width: 0 0px; margin: 0 0px; /* compensate for the borders because of 100% width declaration */} .inside {margin: 10px; /* margin, instead of padding, used to induce margin collapse if needed by child elements */ } /******************************************************************************* * HACKS * * Not all browsers are created equal. Many CSS engines behave differently * and can create discrepencies in the rendering of your layout across different * browsing platforms. These hacks are aimed to resolve those discrepencies * and provide a more consistent look to the layout. * * CSS hacks work by playing to a bug in the CSS engine or parser for a given * browser. This forces the browser to either apply or ignore a rule that other * browsers wouldn't. This lets you apply rules to work around bugs in a specific * browser that would otherwise break the layout. * * It's important that when you use a CSS hack you do so in a way that is as * specific in targeting the problem browser as possible. Some hacks might * work for two or three different platforms, but you only need to apply it on * one platform. You might find that this hack has no adverse effects on those * other two platforms right now, but in a later version the hack might create * problems. Save yourself the headache and do as much as you can to narrow * the target of a CSS hack as much as possible. * * COMMON HACKS USED HERE * * The star-html hack (* html) targets Internet Explorer, both Windows and Mac, * for versions 6 and earlier. There is no element higher up in the page * than the HTML element. IE seems to think otherwise. Rules applied to any * selector that begins with "* html" will be ignored by just about every * browser except Internet Explorer. So any selector given below that begins * with "* html" is targetted at Internet Explorer. * * The backslash-star comment hack targets IE/Mac. CSS comments end with an * asterisk and forward slash. Anything after that closing comment mark will * be interpreted as as CSS rule. However if you prefix that closing comment * mark with a backslash, IE/Mac won't recognize that the comment has been * closed, but other browsers will. So any rules that come after the hacked * closing comment will be applied by any browser except IE/Mac until a * non-hacked closing comment is found. * * With the above two hacks outlined, it's possible to target IE on a specific * OS platform. This is important as the CSS and rendering engines for Mac and * Windows are completely different and have very different requirements in * terms of hacks. * * You may see other empty comments in wierd places, those are variations on * another comment hack to help target specific version of IE/Win (separating * IE 5 from IE6 typically). * * One other you'll see is a height setting of 0.1%. This is to trigger * hasLayout (see reference section below). IE (at least pre-version 7) * will automatically expand a box beyond it's set height if its content * is too tall. Setting height to 100% also works, but this can lead to * problems where an element that should only be a few pixels tall turns * out to be as tall as the rest of the page. By setting it to 0.1% you * minimize the chance of elements being set taller than they need to be. * * WHY USE HACKS? * * For compatibility sake. Specifics on what each hack does, and why its * used, is provided with the rule or ruleset in question. However, the * majority of hacks used have to do with an internal property in IE * called hasLayout. The first item in the reference section below has * all you could ever want to know, and more, about hasLayout. * * REFERENCE * http://www.satzansatz.de/cssd/onhavinglayout.html * http://www.communis.co.uk/dithered/css_filters/css_only/index.html */ .clear-columns { /* hide from IE/Mac \*/ padding-bottom: 1px; margin-bottom: -1px; /* this padding/margin hack is here for older Mozilla engines (Netscape 7, 6, FireFox pre 2.0) which will not allow an element to clear unless it has some effect on how the rest of the layout renders (ie, it takes up space). Hidden from IE/Mac as it triggers a horizontal scrollbar. */ } * html #content-container { /* \*/ height: 0.1%; /* IE/Win 5 needs this to prevent rendering issues if a minimum width is applied to this element and the viewport is sized narrower than it's minimum width. however this breaks IE/Mac so a comment hack is used to hide it. */ position: relative; /* IE/Mac 5.0 seems to need this. without it any child element with position: relative isn't rendered. */ } * html #middle-column, * html #left-column, * html #right-column, * html #content-sourceorder-container { /* hide from IE/Mac \*/ overflow: visible; /* a bug through IE/Win 6 causes the widths of text boxes to be calculated narrower than they render, causing overflow of their parent elements. we need to explicitly handle this overflow. IE/Win 5.0 does not handle visible overflow correctly and so on some layouts, at some viewport widths you'll get a horizontal scroll bar. */ /* hide from IE/Mac \*/ position: relative; /* this resolves rendering bugs in IE/Win. without this the columns don't render on screen or text jog. */ } * html #middle-column { margin-right: -4px; /* fix 3-pixel text jog in IE/Win 5.0. -4px because we also have to compensate for the overlaps from the left and right columns */ margin-right/* */: 0; /* reset value on 5.5 and later using comment hack to hide this rule from 5.0 */ } * html #middle-column .inside { margin-right: 14px; /* compensate for negative margin in previous rule */ /*margin-right:/* */ /*: 10px; /* reset margins for 5.5 and later */ } * html #masthead, * html #footer { /* hide from IE/Mac \*/ height: 0.1%; /* this is to fix an IE 5.0 bug. setting this value forces these elements to contain their child elements, meaning margins will no longer collapse. */ height/**/: auto; /* reset for IE/Win 5.5 and later by hiding this rule from 5.0 with the empty comment hack. also hidden from IE/Mac for the same reason. */ } * html #masthead .inside, * html #footer .inside { margin-top: 0; margin-bottom: 0; /* since margins no longer collapse due to previous rules we remove vertical margins from the .inside class */ margin/* */: 10px; /* reset for IE 5.5 and later */ } * html .inside { margin: 10px 0.75em; /* i don't yet understand this bug in IE 5.0 which forces the right column down if the side margins are at a very specific value. if your side column widths are set in EMs, 0.75em seems to work fine. */ margin/* */: 10px; /* reset for IE 5.5 and later */ } * html #content-innercontainer-container { display: block; } * html #content-sourceorder-container { margin-right: -100%; /* IE/Mac will force #content-sourceorder-container to the width of #left-column, even though that element is no longer inside it. this negative margin will help IE/Mac keep the three columns together under narrower viewports than normal. /* \*/ margin-right: -1px; /* reset the above hack for IE/Win */ } #left-column, #right-column { position: relative; /* resolve issues with links in left and right columns not being clickable in Safari */ } /******************************************************************************/ /****************** CONTACT PAGE FORM ******************************/ #checkout {min-width: 580px; max-width: 680px;} #checkout p {position:relative; float: none; clear: both;margin: 0; padding: 0; text-align: left; width: 100%;} div.checkoutintro {margin-bottom: 10px; height: 40px;} form {margin: 0; padding: 0 0 100px 0; font-size: 119%; width: 100%;} #checkout form {margin: 0; padding: 0 0 100px 0; font-size: 119%; width: 100%; border: .2em outset #847568; background:url(/images/backgrounds/form_bg.png) repeat-x #FFF;} #shoppingcart form {margin: 0; padding: 0 0 100px 0; font-size: 119%; width: 100%; border: 0em outset #847568;} form input.inputText, form textarea.inputTextarea, form select.selectOne {padding: 1px;border: 1px solid #706059; margin: 0; border-color: #444 #999 #999 #444; border-width: 1px; border-style: solid;} form fieldset {clear: both; font-size: 100%; padding: 10px; margin: 0 0 0px 0; border: 0;} #legend_tab {position:relative; margin: 0; padding: 0; height: 34px; width: 500px; top: -27px; left: 10px;} div.legend_right {position:absolute; margin: 0; padding: 0;height: 100%; width: 100%; background:url(/images/backgrounds/legend_bg_03.png) no-repeat right -10px ;} div.legend_left {position:absolute; margin: 0; padding: 0; height: 100%; width: 100%; background:url(/images/backgrounds/legend_bg_01.png) no-repeat -8px -10px;} div.legend_bg {position:absolute; margin: 0; padding: 0; height: 100%; width: 86%; left: 30px; background:url(/images/backgrounds/legend_bg_02.png) repeat-x left -10px;} div.legend {position:absolute; z-index: 1000; top: 4px; left: 28px; color:#FFFFFF;font-size: 140%; font-weight: bold;} form fieldset legend {font-size: 150%; font-weight: normal; color: #000; margin: 0 0 0 0; padding: 10px 15px 10px 15px; border: 0px solid #000; height: 30px;} label {font-size: 100%;} label u {font-style: normal; text-decoration: underline;} input, select, textarea {font-family: Tahoma, Arial, sans-serif; font-size: 100%; color: #000000;} textarea {overflow: auto;} /* Makes the float align correctly for the div */ form div {clear: left; display: block; width: 500px; margin: 5px 0 0 0; padding: 1px 3px;} form fieldset #notes_shell {position:absolute; z-index: 500; margin: 0; padding: 0; left: 450px; margin-top: 20px; border: 0px solid green; width: 219px; background-color:#FFFFFF; border: .2em outset #847568; } form fieldset div.notes {position:relative; width: auto; height: auto; margin: 0px; padding: 0px; color: #666666; font-size: 88%; } form fieldset div.notes_inner {position:relative; width: auto; height: auto; margin: 0px; padding: 20px 10px 10px 10px; color: #666666; font-size: 88%; background:url(/images/backgrounds/note_bg.png) repeat-x #FFF;} form fieldset div.notes h4 {background: url(/images/icons/icon_info.png) no-repeat; background-position: top left; padding: 3px 0 3px 29px; margin-bottom: -5px; color: #143475; font-size: 110%;} form fieldset div.notes p {margin: 0em; color: #1f2736;} form fieldset div.notes div.notes_inner p {margin: 0em; color: #1f2736; width: 218px;} form fieldset div.notes p.last {margin: .5em 0em .25em 0em; padding: 0;} /* Sets look of nested fieldsets in divs */ form div fieldset {clear: none; border-width: 1px 0 0 0; border-style: solid; border-color: #666666; margin: 0 0 0 0px; padding: 0 5px 5px 25px; text-align: center; width: 44px;} /* Sets size and padding for FS Legends */ form div fieldset legend {font-size: 110%; padding: 0 3px 0 9px;} /* Sets color and font weight for required FS Legends */ form div.required fieldset legend {font-weight: bold; color:#FF0000;} /* Floats the input and label areas for clean line */ form div label {display: block; font-size: 90%; float: left; width: 180px; padding: 3px 5px; margin: 0 0 5px 0; text-align: right;} form div label.nofloat {display: inline; float: none; clear: both; width: 140px; padding: 3px 5px; margin: 0 0 5px 0; text-align: left;} form div label.nofloat {font-size: 100%;} /* Sets optional divs to normal weight */ form div.optional label, label.optional {font-weight: normal;} /* Sets the font weight and color for required field text */ form div.required label, label.required, form div.required p.inform {font-weight: bold;} form div.required p.inform, form div.required p.informSmall, form div.optional p.inform, form div.optional p.informSmall {margin: 0 0 0 20px; padding: 1em 0 0 0; font-size: 1em;} form div.required p.informSmall, form div.optional p.informSmall { font-size: .9em; font-style:italic; padding: 0 0 .25em 0; clear: both;} /* CHECKTHIS */ form div label.labelCheckbox, form div label.labelRadio {float: none; display: block; width: 200px; padding: 0; margin: 0 0 5px 142px; text-align: left;} form div fieldset label.labelCheckbox, form div fieldset label.labelRadio {margin: 0 0 5px 0; width: 170px;} form label.labelRadio {background-color: transparent; width: 230px; display: block; float: none; padding-right: 10px; padding-left: 170px;} form label.labelCheckbox {background-color: transparent; width: auto; display: block; float: none;padding-left: 40px;} /* Puts border around div images */ form div img {border: 1px solid #000000;} /* Sets pixel width of input fields */ form div input.inputText, form div input.inputPassword {width: 210px; padding: 1px 3px; margin: 0 0 0 0;} form select.selectOne {width: 218px; clear:both; margin-top: 5px;} /* CHECKTHIS */ form div input.inputCheckbox, form div input.inputRadio, input.inputCheckbox, input.inputRadio {display: inline; height: auto; width: auto; background-color: transparent; border-width: 0; padding: 0; margin: 0 0 0 140px;} form div.submit {width: 214px; padding: 0 0 0 146px;} form div.submit div {display: inline; float: left; text-align: left; width: auto; padding: 0; margin: 0;} form div input.inputSubmit, form div input.inputButton, input.inputSubmit, input.inputButton {background-color: #FFF; color: #000000; width: auto; padding: 0 6px; margin: 0; margin-bottom: 0px; margin-top: -30px;} form div.submit div input.inputSubmit, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px;} /* Sets the Fieldset lengend's line-height */ form fieldset legend {line-height: 150%;} /* CHECKTHIS */ form input, form select, form textarea {background-color: #ffffff;} /* CHECKTHIS */ form div label.labelCheckbox, form div label.labelRadio, label.labelCheckbox, label.labelRadio {display: block; width: 300px; padding: 10px 0 0 18px; text-indent: -18px; line-height: 120%; vertical-align: middle;} /* CHECKTHIS */ form div label.labelCheckbox input.inputCheckbox, form div label.labelRadio input.inputRadio, label.labelCheckbox input.inputCheckbox, label.labelRadio input.inputRadio {margin: 0; vertical-align: middle;} /* Gives width and moves textArea to next line */ form div.wide input.inputText, form div.wide input.inputPassword, form div.wide input.inputFile, form div.wide select, form div.wide textarea {width: 304px; margin: 0;} /* Adjusts line height for notes sections */ form div.notes p, form div small {line-height: 125%;} /* This set the "Your Message" textArea wide to left */ form div label.note_wide {display: block; float: left; width: 130px; padding: 3px 5px; margin: 20px 0 0px 0; text-align: left; font-size:120%;} form div select.special {width:200px; float:none;} form div input.inputTextSmall {float:left; width:30px; position:relative; clear: none; border: 1px solid #888; padding: 1px; margin-right: 5px;} form div div.small {margin-top:10px;} form #formSubmitButton {clear: both; float: left; left: 5px; position: relative;} form label.labelRadioInline, form input.inputRadioInline {display: inline; float: left;} .account_form form {width: 450px; padding-bottom: 15px;} .account_form form h3 {border-bottom: 1px solid #006699; padding: 15px 0 3px 20px; margin: 0 0 20px 0; color: #003366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 1.3em;} .account_form form h5 {color: #003366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: .85em; margin: 0 0 0 115px;} .account_form form input {margin: 0; padding: 0; width: 70px;} .account_form form label {width: 100px;} .account_form form div input.inputSubmit, .account_form form div input.inputButton, .account_form input.inputSubmit, input.inputButton {margin: -10px 0 0 95px;} .account_form form input.inputRadio {margin: 0 4px 0 70px;} .account_form form input.inputOver {margin: 10px 4px 0 115px; width: 215px;} .account_form form div label.labelCheckbox {margin: 0 0 5px 109px;} .account_form form div #email_options {margin: -3px 10px 0 0}; .subtotal_note {font-size: .95em; color: gray; float:none; width: 100px;}div .schedule tr td, div .schedule tr th {padding:4px 8px 4px 8px; color: #04222b;} table .back-top { background: url(/images/backgrounds/table_01.png) no-repeat center center; height: 15px;} table .back-bottom { background: url(/images/backgrounds/table_02.png) no-repeat center center; height: 10px;} table .dark {background-color: #e9f1f3;} table .light {background-color: #d7e4e8;} /* d7e4e8 */ /****************************** HOME PAGE *********************************/ #recentcontent a {color:#311408; text-decoration:none;} #recentcontent .ja {margin-bottom: 10px; clear:both; padding-bottom: 15px; width: 180px; float: left; clear: none; padding-left: 10px; overflow: hidden; border-right: 0px solid #CCCCCC; border-bottom: 0px solid #CCCCCC;} #recentcontent .ja img {border: none;} #cart-count {float: right; text-align: left; margin-top: 16px;} #cart-output {position: absolute; top: -2px; right: 30px; height: 45px; width: 180px; border: 0px solid #FFCC66; font-size: .8em; color: #741111;} #view-cart {float: right; text-align: left; margin-top: 16px;} #view-cart a {color: #6e3a17;} #update-remove-cart {position: relative; width: 660px; height: 25px; border: 0px solid black;margin-bottom: 10px; padding: 0;} #quick-add-to-cart {padding-left: 35px; position: relative; margin-left: -30px; height: 90px; background: url(/images/backgrounds/quickadd_bg.png) no-repeat;} #quick-add-to-cart div {padding-top: 20px; } #quick-add-to-cart form {padding: 0px; margin: 0;} #quick-add-to-cart span {font-weight: bold;} #quick-add-alert-box {position:absolute; left: 290px; top: 90px; height: 20px; width: 200px; font-weight: bold;} /****************************** Teaser Sections *********************************/ #section-teaser-content h2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em; color: #660000; margin-bottom: 2px; line-height: 1.5em; clear: none; font-weight: 700;} .fpa {border-top: 2px solid #847568; position: relative; float:none; clear: both; padding: 10px; padding-bottom: 30px; margin-bottom: 30px;} .fpa-content {margin-left: 0px;} .fpa-snippet {border-top: 1px dotted gray; padding-top: 10px; } p.fpa-info {color:#401A24; padding: 0px; } p.fpa-info a {color:#401A24;} span.fpa-info {color: #4f443d; font-size: .9em;} .fpi {border-top: 2px solid #847568; position: relative; float:none; clear: both; padding: 10px; padding-bottom: 30px; margin-bottom: 30px;} .fpi h2 {border-bottom: 1px dotted #847568;} .fpi-content {margin-left: 0px; height: auto; clear: both; font-size: 8px; text-align: center;} .fpi-snippet {padding: 5px; width: 115px; height: 140px; float: left; text-align: center;} p.fpi-info {color:#401A24; padding: 10px; text-align: center; } p.fpi-info a {color:#401A24;} span.fpi-info {color: #4f443d;} div.fpi-image {height: 75px; text-align: center; line-height: 7em;} div.fpi-image img {vertical-align: middle;} /****************************** JOOMLA *********************************/ #content_articles {border: 0px solid red; position: relative; background-color: #FFF;} #content-articles * {position:relative;} #article {width: 700px;} #article h2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em; color: #660000; margin-bottom: 2px; line-height: 1.5em; clear: none; font-weight: 700;} #article h3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; color: #311408; margin-bottom: 2px; line-height: 1.5em; clear: none; font-weight:500;} #article .jah2 {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.6em; color: #660000; margin-bottom: 2px; line-height: 1.5em; clear: none; font-weight: 700;} #article .jah3 {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.2em; color: #311408; margin-bottom: 2px; line-height: 1.5em; clear: none; font-weight:500;} #article ul {list-style:disc; margin-bottom: 15px;left: 30px; position:relative;} #article ol {margin-bottom: 15px;left: 30px; position:relative;} #article li {font-size: 1.1em;} /* Images */ #article #jagallery {border-bottom: 1px dotted #1a4d63; margin-bottom: 15px; height: 100%;} #article #jagallery {border-bottom: 1px dotted #1a4d63; margin-bottom: 15px; height: 100%;} #article .magnify {background:url(/images/icons/magnify-trans.png) bottom right no-repeat; position:absolute; z-index: 100; height: 28px; width: 28px; color: transparent; bottom: 5px; right: 14px; padding: 0px;} #article .magnify .hidden {display:none; visibility: hidden;} #article div.center {text-align:center; position:relative; margin: 0 auto; padding: 0; border: 0px solid #000;} #article div.center .magnify {right: 10px;} #article img.plain {clear: none; position: relative; padding: 0px; margin: 4px; border: 1px solid black;} #article img.inline {clear: none; position: relative; padding: 0px; margin: 0; border: 0px solid black;} #article img.nostyle {clear: none; position: relative; padding: 0px; margin: 4px; border: 0px solid black;} #article img.imgbar {clear: none; position: relative; padding: 0px; margin: 4px; border: 1px solid black;} #article img.imginline {clear: none; position: relative; padding: 0px; margin: 4px; border: 1px solid black;} #article div.imgcaption {position: relative; padding: 10px; margin-bottom: 20px; background-color: #FFF; color: #062f41; font-size: 1em; font-weight:500; border:0px solid green;} #article div.imgcaption img {border: 1px solid #1C4557; background-color:#FFF;} #article div.imgcaptionleft {background:url(/images/backgrounds/fadedbg-left.png) repeat-y right;margin-right: 20px;} #article div.imgcaptionright {background:url(/images/backgrounds/fadedbg-right.png) repeat-y;margin-left: 20px;} #article div.imgcaptionleft .magnify {bottom: 8px; right: 18px;} #article div.imgcaptionright .magnify {bottom: 8px; right: 0px;} #article div.imgbar {width: 380px; float: right; clear: right; position: relative; margin-left: 10px; padding-left: 15px; padding-top: 15px; background:url(/images/backgrounds/fadedbg-right.png) repeat-y;margin-left: 20px;} #article div.imgbar p {position: relative; clear: both; margin-bottom: 8px; padding: 0; font-size: .95em;} #article div.imgbar div {margin-right: -10px;} #article div.imginline {width: 700px; position: relative; border-bottom: 2px dotted #CCC; margin-bottom: 15px; padding-bottom: 15px; float: left; clear: right;} #article div.imggallery {width: 320px;} #article div.imggallery a {text-decoration: none;} #article div.imggallery a img {text-decoration: none; border: none;} #article p.style {clear: none; border: 0px solid red; width: auto; display:inline-block;} #jgal {list-style: none; width: 600px; height: 400px; left: -390px; margin: 0; padding: 0; border:0px solid red; margin-left: -25px;} #jgal li {opacity: .5; float: none; display: block; width:100px; height: 75px; background-position: 50% 50%; cursor: pointer; border: 3px solid #fff; outline: 1px solid #ddd; margin-right: 14px; margin-bottom: 14px; } #jgal li img { position: absolute; top: 0px; left: 120px; display: none; } #jgal li.active img {display: block;} #jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99} #jgal li table {position: absolute; top: 350px; left: 120px; display: none; margin-bottom: 20px; } #jgal li.active table {display: inline; font-family:Georgia, "Times New Roman", Times, serif; color: #4D4340; font-weight:bold;} #jgal li.active table img {text-align: right; clear: none; float: none; display: inline; position: relative; left: auto; top: auto; border: 0px;} #gallery { list-style: none; display: block; border: 0px; text-align:left;} #gallery li img {width: 100px; height: 75px; border: 0px; } #gallery li table img {width: auto; height: auto; border: 0px; } #gallery li table td {clear:left; border: 0px; } #gallery li { float: left; margin: 0 10px 10px 0; list-style-type: none; border: 0px; } #article #jabody {position: relative; float: left; padding-left: 15px; min-width: 300px;} #article .clear-columns {border-top: 1px dashed gray; padding-top: 15px; padding-bottom: 15px;} #article .jlinks {border-bottom: solid 2px #660000; font-size: .8em;} #article .jlinks a {text-decoration: none; color: #311408;} .jsb_col {margin-left: 0px; border-bottom: 2px dotted #6f4913; background:url(/images/backgrounds/article_teaser.png) left bottom repeat-x #FFF; } .jstitle {font-family: Georgia, "Times New Roman", Times, serif; font-size: 2em; color:#660000; font-weight:bold;} .jsdesc {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.4em; color:#311408;} .jsbody {} .jsauthor {} .jsdate {} .jsb {border-bottom: 1px dotted #311408; background-color: #FFF;} .jsbtitle {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 1.4em; color:#311408;} .jsbtitle a, .jsbtitle a:link, .jsbtitle a:visited {color:#311408; text-decoration:none;} .jsbtitle a:hover {border-bottom: 1px dotted #6f4913;} .jsbdesc {font-family: Georgia, "Times New Roman", Times, serif; font-size: 1.5em; color:#6f4913;} .jsblink {font-weight:600; color:#330099;} .jsbbody {} .jsbdate {} .ja {margin-left: 45px; clear:both;padding-bottom: 25px;} .ja a {text-decoration:none;} /**/ .ja .left img {border: 1px solid #000; padding: 4px; background-color: #FFF;} .ja img {border: 1px solid #000; padding: 4px; background-color: #FFF;} .ja .pdf {border: 0px solid #000; padding: 4px; background-color: #FFF;} .jatitle {font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.4em; color: #357895; font-weight:bold; border: 1px solid #FFF;} .jatitle:hover {text-decoration:none; border-bottom: 1px solid #2e5d71; background: #d7e3e8; color: #1a4d63;} #article #productreviewed {text-align: right; font-weight:bold; font-style:italic; color: #311408; border-bottom: 1px solid #999999; margin-bottom: 18px; font-size: 1.1em;} .jaheader {text-align: center; position:relative; width: 100%; margin-bottom: 10px;} .jaheader a {text-decoration:none; color: #660000;} .jatitlex {font-family:Georgia, "Times New Roman", Times, serif; font-size: 1.8em; color: #1a4d63; font-weight:bold; border: 1px solid #FFF; margin-bottom: 10px; line-height: 1.5em;} .jaauthor {color:#333333; font-size: 1.2em; font-style:italic;} .jacount {color: #1a4d63; font-size: 1.2em; font-weight:normal;font-family:Georgia, "Times New Roman", Times, serif;} .jamonths {color: #1a4d63; font-size: 1.4em; font-weight:bold;} .jamonths a:link {color: #311408; font-size: 1em; font-weight:bold;} .jamonths a:visited {color: #311408; font-size: 1em; font-weight:bold;} .jaauthorname {color: #663333; font-size: 1.2em; font-weight:bold; text-transform:uppercase;} .japublished {border-top: 1px dotted #1a4d63;border-bottom: 1px dotted #1a4d63; background-color:#d7e3e8; text-align: center; text-decoration:none; width: 97%; padding: 3px 10px 3px 10px; height: 2em;} .japublished td {font-size: 1em;} .japublished a img {text-decoration: none; border: none;} .japub {font-size: .95em; color:#666666;} .jadesc {font-size: 1.2em; color:#000; max-width: 600px;} .jadesc-read {font-size: 1em; color:#1a4d63; font-weight:500; float:left;} .jadesc-read a:link {color:#311408; font-weight:bold; text-decoration:underline;} .jadesc-read a:visited {color:#1a4d63; font-weight:200; text-decoration:underline;} .jabody {} .jadate {} /****************************** GENERAL AESTHETICS *********************************/ .dashed-top {border-top: .15em dashed #847568; margin-top: 1em; clear: both;} .gallery-left {float: left; padding: 2px;} .left-float, .left {float: left; margin-right: .8em; position:relative; z-index: 100;} .right-float, .right {float: right; margin-left: 10px; position:relative;} .right-align {text-align: right; font-weight:bold;} div.hr {display: none; clear: both;} a{}div.hr {display: block; clear: both; height: 25px; background: url(/images/icons/bar1.gif) no-repeat center center; margin: 1em 0 1em 0;} hr {display:none; clear: both;} .page-previous {font-size: 1.2em; color:#1C4557; margin-bottom: 2em; font-weight:bold;} .page-next {font-size: 1.2em; color:#1C4557; margin-bottom: 2em; font-weight:bold;} .intro a img {border: solid 1px #000;} .attn {font-weight:bold; font-style:italic; color: red;} .photo {float: left; margin: 0.5em; border: 1px solid #ccc; padding: 1em; font-size: 10px;} .column {float:left; width: 300px; position: relative;} .column img {float:left; clear: left; position: relative; margin: .5em 1em .5em 0em;} .column p {float:left; clear: right; position: relative;} .next-page {text-align:right; font-size: 1.6em; color: #7a2d36; font-weight:bold; float:none; clear: both;} .next-page a {font-weight:normal;} .img-caption-right {float: right; font-weight:bold; font-style:italic; text-align: right; color:#666666; font-size: 1em;} .meager {font-size: 95%; color:#4D4340; letter-spacing: 0.05em;} .important {font-size: 105%; color:#1C4557; letter-spacing: 0.05em; font-weight:bold;} .underlined {border-bottom: .05em solid #666666;} #articlecolumn {width: 100%; float: left; overflow: hidden;} #articlecolumn .title {font-size: 1.2em; margin: 0; padding: 0; color: #3f2509; font-weight:bold; border-bottom: 1px solid #3f2509;} .smallcolumn {width: 20%; min-width: 150px; height: 100%; margin-bottom: -2000px; float: left; padding: 10px 10px 2000px 10px; border-right: .25em dotted gray;} #articlecolumn .smallcolumn ul {margin: 0; padding: 0;} #articlecolumn .smallcolumn ul li {font-size: 1em; font-weight: normal; margin-left: 15px;} .lookhere { background-color:#FFCC66; border:1px solid #000000; color:#000000; font-size:1em; font-weight:bold; letter-spacing:0.1em; padding:2px; position:relative; } .ol-attention li { font-size:1.2em; font-weight:bold; line-height:1.6em; } .FAQ-question { color:#003366; font-family:Georgia,"Times New Roman",Times,serif; font-size:1.2em; font-style:italic; font-weight:bold; line-height:2em; } #section-desc {width: 550px; position:relative; margin: 0; padding: 0;} #section-desc h3 {font-size: 1.2em; color:#333; letter-spacing:normal; text-transform:none;} #paging h1 {float: left; margin: 0; padding: 0; color:#660000;} .name {color: #333333;} .price {color:#A81018;} .id {color: #666666;} .viewbybutton {border-bottom: 1px dotted gray;} .viewbybutton:hover {background-color:#FFCC66;} #shoppingcart p {position:relative; float: none; clear: both;margin: 0; padding: 0; text-align: left; max-width: 100%; min-width: 100%; width: 100%;} #shoppingcartitems {text-align: right; color: #847568; font-size: 1.2em; padding-bottom: 2px; border-bottom: 1px dotted gray;} #shoppingcartitems a {color: #4D4340;} .product_teaser {width: 100%; float: left; border-bottom: 2px solid gray; padding-top: 10px;} .product_teaser h3 {font-size: 1em; font-weight:normal;} .product_teaser .products img {height: 50px;} #paging, #paging_bottom {color: #000; width: 100%;} #paging h1 {float: left; margin: 0; padding: 0;} #paging #showingitems2, #paging_bottom #showingitems2, #paging #showingitems1, #paging_bottom #showingitems1 {float: right; margin-top: 5px; font-size: 1.2em; color: #1C4557;} #paging #page_numbers1, #paging_bottom #page_numbers1, #paging #page_numbers2, #paging_bottom #page_numbers2 {float: right; margin-top: 5px;} .pagingsubmit { background: transparent; border-top: 0; border-right: 0; border-bottom: 1px solid #1C4557; border-left: 0; color: #1C4557; display: inline; margin: 0; padding: 0; } *:first-child+html .pagingsubmit { /* hack needed for IE 7 */ border-bottom: 0; text-decoration: underline; } * html .pagingsubmit { /* hack needed for IE 5/6 */ border-bottom: 0; text-decoration: underline; } .pagingsubmitOther { font-size: 105%; background: transparent; font-weight:bold; border-top: 0; border-right: 0; border-bottom: 1px solid #03F; border-left: 0; color: #03F; display: inline; margin: 0; padding: 0; } *:first-child+html .pagingsubmitOther { /* hack needed for IE 7 */ border-bottom: 0; text-decoration: underline; } * html .pagingsubmitOther { /* hack needed for IE 5/6 */ border-bottom: 0; text-decoration: underline; } /************************* Product Section ***************************** */ #shoppingcart h4.total {text-align: right; float:right; border-top: dotted 1px #000;} #shoppingcart span.total {text-align: right; float:right; clear: both;} #shoppingcart {width: 88%;} #shoppingcart .shoppingTABLE {width: 100%; border-top: .1em dotted gray; margin:0; padding: 0;} #shoppingcart {width: 660px;} form #cart_table {width: 100%; clear: both; padding: 0; margin: 0; font-size: 90%; color:#3e3229;} form #cart_table #cartcols {width: 100%; font-weight:bold; color:#847568;} form #cart_table .cart_table_row {padding: 0; margin: 0; clear: both; border-top:.1em dotted gray;} form #cart_table .cart_table_row li {display: inline; padding: 5px;} form #cart_table .cart_table_row_option {padding: 0; margin: 0; clear: both; border-top:.1em dotted white;} form #cart_table .cart_table_row_option li {display: inline; padding: 5px;} .cart_table_img {width: 80px; float: left; border: 0px solid red; vertical-align: middle;} .cart_table_img img {border: 0;} form #cart_table .cart_table_desc {width: 250px; float: left; position: relative;border: 0px solid orange;} .cart_table_desc .product_title {font-weight:bold; color:#4D4340;} .cart_table_desc .product_title a {font-weight:bold; color:#4D4340; text-decoration:none;} form #cart_table .cart_table_desc .product_name {color:#847568;} form #cart_table .cart_table_price {width: 70px; float: left; position: relative;border: 0px solid yellow;} form #cart_table .cart_table_qty {width: 68px; float: left; position: relative;border: 0px solid green;} form #cart_table .cart_table_subtotal {width: 70px; float: left; position: relative;border: 0px solid blue;} form #cart_table .cart_table_remove {width: 50px; float: left; position: relative;border: 0px solid purple;} form #cart_table .cart_table_remove img {border: 0;} form #cart_table #cartcols .cart_item {width: 340px; display:block; float: left;} form #cart_table #cartcols .cart_price {width: 70px; display:block; float: left;} form #cart_table #cartcols .cart_qty {width: 50px; display:block; float: left;} form #cart_table #cartcols .cart_sub {width: 70px; display:block; float: left;} form div input.inputUpdate, form div input.inputButton, input.inputUpdate, input.inputButton {background-color: #FFF; color: #000000; width: auto; padding: 0 6px; margin: 0; margin-left: 545px; margin-bottom: 0px; margin-top: -30px;} form div.submit div input.inputUpdate, form div.submit div input.inputButton {float: right; margin: 0 0 0 5px;} /************************* Product Section ***************************** */ #product_section {clear: both; position:relative; width: 100%;} #product_section *, #product_item * {font-family:Verdana, Arial, Helvetica, sans-serif;} #product_section .products {float: left; position: relative; width: 10em; height: 20em; padding: 1.5em; text-align: center; border: 1px solid #FFF;} #product_section .products:hover { border: 1px solid #000;} #product_section .products a {text-decoration:none;} #product_section .products:hover a {text-decoration:underline;} #product_section .products p {margin: 0; padding: 0; text-align: left;} #product_section .products .product_image {position:relative; height: 100px; width: 100px;} #product_section .products img {position:relative; vertical-align:bottom; height: 100px;margin-bottom: 15px;} #product_section .name { font-size: .9em; line-height: 1.2em; height: 5em; overflow: hidden; color: #4D4340; } #product_section .id {height: 2em;font-size: .9em; color: #4D4340; } #product_section .price {position: relative; margin-top: 1em; height: 3em; font-weight: bold; font-size: 1.1em;vertical-align: middle;} /************************* Product Sets ***************************** */ #product_section h3.productset {border-bottom: .1em dotted #897e6f; width: 100%; padding-top: 5px;} #product_section .productset p {margin: 0; padding: 0; text-align: left; font-size: 95%; overflow: hidden;} #product_section .productsettable {border-top: .1em solid gray; border-bottom: .0em solid black; padding-bottom: 20px;} #product_section .productset td.productsettitle {color: #333333;} #product_section .productset td.productsetnumber {color: gray; font-weight:bold; text-align: center;} #product_section .productset td.productsetprice {color: red; font-weight:bold;} #product_section .productset img {position:relative; border: 0px solid #000;} #product_section .productset td {} #product_section .productset a {text-decoration:none; color: inherit;} td.productsetimg {height: 100px; width: 110px; overflow: hidden; margin-bottom: 10px;} /************************* Product Item ***************************** */ #middle-column .inside div#product_item p {float:left; max-width:600px; width: 80%; padding-right:2em; position:relative;} #product_item {float:left; clear: both; position: relative; width: 100%; margin-bottom: 2em; border-bottom: dotted 0px #555; } #product_item p {margin: 0 0 10px 0; padding: 0; min-width: 200px; width: 60%; float: none; font-size: 112%; line-height:140%;} #product_item h3 {clear: both; width: 100%; margin: 0;} #product_item img {border:0;} #product_item .images {float: left; position: relative; padding-right: 10px; border-right: dotted 1px #555; padding-top: 20px; padding-bottom: 20px;} #product_item .teaser {float: left; position: relative;padding-left: 10px; border: 0px solid #000; width: 50%;} #product_item .content {float: left; position: relative; margin-top: 20px;} #product_item .content .additionalimages {float: left; position: relative; margin-left: 10px; margin-right: 10px;} #product_item .images .main {width: 200px;} #product_item .name {font-size: 1.9em; width: 60%;} #product_item .name, #product_item .id, #product_item .price {margin-bottom: 8px;} #product_item h5 {padding: .5em .25em; text-align: center; text-decoration: none;border: 1px solid #000; background-color:#FFF; color: #847568; height: 100%; width: 9em;} #product_item h5.button a { color: #847568; text-decoration: none;} #product_item h5.button a:hover {height: 100%; width: 9em; color: #4D4340; text-decoration: none;} #product_item form {margin-bottom: 0px; width: 100px; height: 0px; padding: 0px;} /************************* Product Related ***************************** */ #product_section table.related {float: left; width: 16em;} #product_section table.related td {} #product_section .relatedtable {border-right: .1em dotted #FC6; padding-left: 20px; padding-right: 10px;} #product_section .related img {position:relative; border: 1px solid #000;} #product_section .related td.relatedimg {height: 100px; overflow: hidden; margin-bottom: 10px; } #product_section .related td.relatedtitle {height: 4.5em;} #product_section .related td.relatednumber {height: 2em;} #product_section .related td.relatedprice {height: 2.5em;} #product_section .related td.relatedtitle p, #product_section .related td.relatedtitle a {color: #333333; font-weight:bold; font-size: 95%;} #product_section .related td.relatednumber p, #product_section .related td.relatednumber a {color: gray; font-weight:bold; font-size: 95%;} #product_section .related td.relatedprice p, #product_section .related td.relatedprice a {color: red; font-weight:bold; font-size: 95%;} #product_section .related img {position:relative; border: 0px solid #000;} #product_section .related a {text-decoration:none; color: inherit;} #Xproduct_section .related {margin: 0; float: left; position: relative; width: 14em; height: 14em; padding: 0; text-align: center;} #Xproduct_section .related p {margin: 0; padding: 0; text-align: left; width: 70%; min-width: 100%; font-size: 95%; overflow: hidden;} #Xproduct_section .relatedtable {border-right: .1em dotted #FC6; padding-left: 20px;padding-right: 10px;} #Xproduct_section .related td.relatedtitle {height: 4.5em;} #Xproduct_section .related td.relatednumber {height: 2em;} #Xproduct_section .related td.relatedprice {height: 2.5em;} #Xproduct_section .related td.relatedimg {height: 100px; overflow: hidden; margin-bottom: 10px; } #Xproduct_section .related td.relatedtitle p {color: #333333; font-weight:bold;} #Xproduct_section .related td.relatednumber p {color: gray; font-weight:bold;} #Xproduct_section .related td.relatedprice p {color: red; font-weight:bold;} #Xproduct_section .related img {position:relative; border: 0px solid #000;} #Xproduct_section .related td {height: auto;} #Xproduct_section .related a {text-decoration:none; color: inherit;} /************************* Products ***************************** */ .note {text-transform:uppercase; font-style:italic; font-size: .9em; color:#990000;} .testid {float:left; position:relative; margin-right: 10px; text-align:right; width: 10em;} .testname {position:relative; text-align: left;} #checkout tr.checkout_tr td {border-bottom: 1px solid #000;} /* Colors Reference Dark Red #401A24 Dark Golden Yellow #E59136 Golden Yellow #FC6 Light Yellow #FAE6A9 Dark Neutral Brown #4D4340 Light Brown #847568 Medium Blue #1C4557 */ /****************************** BreadCrumbs ***********************************************/ #breadcrumb-container {border-bottom: 1px dotted #847568;} #breadcrumb-container, #breadcrumb-body, #breadcrumb, #breadcrumb-backto {color:#1C4557; background-color:#FFF; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 12px; font-weight:bold;} #breadcrumb a, #breadcrumb span, #breadcrumb-backto a, #breadcrumb-backto span {font-weight:bold; text-decoration:none; color:#4D4340; width: 100%; font-size: 12px;} #breadcrumb a, #breadcrumb-backto a {color:#847568;text-decoration:underline;} #breadcrumb a:hover, #breadcrumb-backto a:hover {text-decoration:underline; color:#990000;} #breadcrumb-backto #backto_crumb {font-size: 100%; clear: both; margin-top: 1em;} #breadcrumb-backto #backto_crumb span {font-size: 140%; color:#006699;} #breadcrumb-backto #backto_crumb a {font-size: 100%; color:#006699;} #breadcrumb-container table tr, #breadcrumb-container table tr a {color: #4D4340;} /****************************** Header ***********************************************/ /* #header-container-inside {background:url(/images/backgrounds/header-bg.png) repeat-x top;} #header-body {background:url(/images/backgrounds/header-graphic.jpg) no-repeat 300px 0;} #header-end {background:url(/images/backgrounds/header-end.png) repeat-y top right; height: 90px; width: 30px; position: absolute; right: 0;z-index: 1;} */ #header-links-body {position:relative; text-align:center; width:100%; margin: 0; padding: 0;} #header-links-inside {position:relative; float: right; border-left: 1px solid #000; border-right: 1px solid #000; border-bottom: 1px solid #000; } #header-links-inside ul {margin: 0; padding: 0;list-style-type:none; width:auto; float: left; height: 2.5em;} #header-links-inside ul li {display:block; float:left; margin: 0; padding:0; background:url(/images/backgrounds/header-links-yellow.png) top left repeat-x #000; height:inherit; } #header-links-inside ul li:hover {display:block; float:left; margin: 0; padding:0;background:url(/images/backgrounds/header-links-yellow.png) 0px -32px repeat-x #000;} #header-links-inside ul li a {display:block; float:left; text-decoration:none; color: #000; padding: .5em 1em;} #header-links-inside ul li.selected {display:block; float:left; margin: 0; padding:0;background:url(/images/backgrounds/header-links-yellow.png) 0px -32px repeat-x #000;} #account-links {clear: both; float: right; color: #000; margin-top: 0px; background:#CCCCCC; padding: 0 10px 5px 10px; width: 80px;} .stbar a {text-decoration: none; color: #333333;} /***************************** HOME ICON - Left Column **********************************************/ #home-icon-container {width: 249px; /* related to skidoo border width */ clear: both; float: right; margin: -25px 0 20px 0; padding: 0; height: 100%; color: #FAE6A9;} h3 #home-icon, #home-icon-container a {border: 0px solid #FAE6A9; color: #FAE6A9; background-color: #FAE6A9;} #home-icon {margin: 0px auto; width: 50px; height: 48px; position: relative; color: #FAE6A9;} #home-icon span {background: url(/images/icons/home.png) no-repeat 0px 0px; position: absolute; width: 100%; height: 100%; color: #FAE6A9;} #home-icon span:hover {background: url(/images/icons/home.png) no-repeat 0px -50px; position: absolute; width: 100%; height: 100%; color: #FAE6A9;} /***************************** Search Box Classes ***********************************************/ #submit {position:relative; width:20px; height:20px; margin-left: 5px; padding: 0;} #submit img {position:relative; width:100%; height:100%; padding: 0;} .structural {position:absolute; left:-9999px;} /* http://www.456bereastreet.com/archive/200710/autopopulating_text_input_fields_with_javascript/ */ #left-column .nav-section #search-container {position: relative; vertical-align:bottom; width: 100%; margin:0; padding: 0; height: 30px;} #left-column .nav-section #search-body {position: relative; vertical-align:bottom; width: 100%; margin:0; padding:0;} #left-column .nav-section #search-form #submit {display: inline; position:relative; float:left; padding: 0;} #left-column .nav-section #search-field {color:#847568; width: 115px; float:left; height:18px; margin-left: 8px;display: inline; position:relative; padding: 0;} #left-column .nav-section #search-field:focus {color:#000; padding: 0;} #left-column .nav-section #itemnosearch {margin-left: 10px; margin-bottom: 10px;} #left-column .nav-section #itemnosearch .inputText {width: 180px;} #left-column .nav-section #itemnosearch .inputSubmit {position:relative; left: 6px; top: 5px; margin: 0; padding: 0; border: 0px solid red;} #left-column .nav-section #generalsearch {margin-left: 10px; margin-bottom: 0px;} #left-column .nav-section #generalsearch .inputText {width: 180px;} #left-column .nav-section #generalsearch .inputSubmit {position:relative; left: 6px; top: 0px; margin: 0; padding: 0; border: 0px solid red;} #middle-column .nav-section {margin: 0px auto; text-align: center;position: relative;position: relative; vertical-align:bottom; } #middle-column .nav-section #search-container {position: relative; vertical-align:bottom; width: 100%; margin:0px auto; padding: 10px; height: 45px; width: 350px; border:1px solid #113377;} #middle-column .nav-section #search-container div {display: inline; position:relative;} #middle-column .nav-section #search-body {position: relative; vertical-align:middle; width: 100%; height: 100%; margin:0; padding:0;} #middle-column .nav-section #search-body span {display:inline; vertical-align:middle; margin: 0; padding:0; font: bold 1.3em Georgia, "Times New Roman", Times, serif; color: #4D4340;} #middle-column #search-field {color:#847568; width: 300px; height:15px; float: left;} #middle-column #search-field:focus {color:#000;} #middle-column #submit {position:relative; width:21px; height:21px; margin-left: 5px; position: relative; vertical-align:top; } #middle-column #submit img {position:relative; width:100%; height:100%;} #middle-column #generalsearch .inputSubmit {position:relative; left: 6px; top: 0px; margin: 0; padding: 0; border: 0px solid red;} /*Top categories*/ .main_cat1 {font-size: 16px; font-weight: bold; color:#0000FF} .main_cat2 {font-size: 12px; font-weight: bold; color:#0000FF} .cat1:visited {font-size: 16px; font-weight: bold; color:#5555AA} /*Small urls*/ .url {color: #115599} a:visited {color:#5555AA} /*hr{color:#000066}*/ /*Page descriptions*/ .description {font-size: 13px;} /* */ td {font-family:arial,sans-serif; font-size: 13px; } /* Title/link of pages */ .title {color:#0000FF; font-size:15px} .searchBox {border:1px solid #113377;} #result_report {text-align:center; padding:3px; background-color:#e5ecf9; font-weight: bold; margin-bottom:14px;} .catBanner {padding:3px; margin-top:15px; background-color:#e5ecf9; font-weight: bold;} .webPageBanner {padding:3px; margin-top:20px; background-color:#e5ecf9; font-weight: bold;} hr {color:#000066;} /*main results table */ #results {width: 100%;} #other_pages {text-align:center;} #common_report {text-align:center;} #cat_table {width:600px; margin-top:20px; padding-top:10px; padding-bottom:20px; border-top:1px solid #AAAAAA; border-bottom:1px solid #AAAAAA;} #cat_main {font-weight: bold;} .divline {margin-top:20px; margin-bottom:-5px;border-bottom:1px solid #DDDDDD;} #sub_cat {font-size:12px;} .idented {margin-left:30px;} #did_you_mean {font-size: 14px; text-align:center ; margin:10px;} /***************************** Content ***********************************************/ #content-container {background-color:#FFF; /* background: url(/images/backgrounds/content-bg.png) repeat;*/} /*#content-sourceorder-container {background: url(/images/clean/content-RIGHT.png) repeat-y top right; z-index: 300;} */ #content-outercontainer-container {background-color: #FFF;} /* #content-innercontainer-container {background: url(/images/backgrounds/content-RIGHT.png) repeat-y top left;} */ #middle-column .inside {padding: 0px 15px 20px 20px; z-index: 1;} #content-body-shadow {/*background: url(/images/backgrounds/content-LEFT.png) repeat-y top left #FAE6A9; */ z-index: 300; height:100%; background-color:green; width: 0px; overflow:hidden; position:absolute; top:0; left: 0;} /*#middle-column .inside div p {max-width: 300px; float: left; padding-right: 2em; position: relative;}*/ #middle-column .inside .nofloat p {max-width: none; float: none; padding-right: 2em; position: relative;} .box1 {float: left;background-color: white; clear:left;} .box2 {float: left; background-color: white;} .box3 {float: left; background-color: white;} ul#pages {list-style-type: none; margin: 0; padding: 0; border-top: 1px solid #666; padding: .5em 0; clear: both; font-size: 1.2em;} ul#pages .left {float: left; width: 5em; border: 1px solid #000; text-align: center; color: #666666;} ul#pages .right {float: right; width: 5em; border: 1px solid #000; text-align: center; } ul#pages li a {display: block; width: 5em; color: #FFF; background-color: #3A3A3A; padding: .2em 0; text-align: center; text-decoration: none;} ul#pages li a:hover {color: #000; background-color: #fbc000; } p.page-next {float: none; max-width: 100%; text-align: center; clear: both; border-top: 1px dotted #847568; padding-top: .5em;} .custaccount table {margin: 0; padding: 6px; border-collapse:collapse;} .custaccount table img {margin: 0; padding: 6px; border-collapse:collapse; border: 0;} .custaccount table a {color: #4D4340; font-weight:bold;} .custaccount table td, .custaccount table th {padding: 8px; border-style:inset; border-width: 0px; border-color: #FFF #777 #000 #FFF;} .custaccount table th {text-align:left; font-size: 1.1em; color:#847568; border-bottom: 0.1em dotted gray; border-top: 0.1em dotted gray;} .custaccount table .spacing {text-align:left; height: 10px; font-size: 1.1em; color:#847568; border-bottom: 0.1em dotted gray;} #custaccount_section ul {margin: 0; padding: 0;list-style-type:none; width:auto; float: left; height: 2.5em;width: 100%;} #custaccount_section ul li {display:block; float:left; margin: 0; padding:0; height:inherit; font-size: 1.2em; background:#FFF; border-style:outset; border-width: 1px; border-width: 0px 1px 2px 1px; } #custaccount_section ul li:hover {display:block; float:left; margin: 0; padding:0; background:#A9C8D7; border-style:outset; border-width: 1px;} #custaccount_section ul .selected {display:block; float:left; margin: 0; padding:0; background:#53698B; border-style:outset; border-width: 1px; font-weight: bold;} #custaccount_section ul .selected a {color:#FFF;} #custaccount_section ul li a {display:block; float:left; text-decoration:none; color: #000; padding: .5em 1em;} #custaccount_section h1 {border-bottom: 1px solid #006699; padding: 2px 0 0 0; margin: 15px 0 0 0; color: #003366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 1.8em;} #custaccount_section h2 {padding: 0 0 3px 0; margin: 15px 0 10px 0; color: #000; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 1.4em;} #custaccount_section h3 {border-bottom: 1px solid #006699; padding: 15px 0 3px 20px; margin: 0 0 20px 0; color: #003366; font-family:Verdana, Arial, Helvetica, sans-serif; font-size: 1em;} #custaccount_section .subhead {border:0px solid red; width: 100%; height: 35px; font-size: 1.5em; font-weight: bold; font-family:Georgia, "Times New Roman", Times, serif; clear: both; padding-top: 15px;} #custaccount_section .edit_icon {border:0px solid red; width: 100%; height: 35px; background: url(/images/icons/edit.png) no-repeat 0px 12px; font-size: 1.5em; font-weight: bold; font-family:Georgia, "Times New Roman", Times, serif; clear: both; padding-top: 15px;} #custaccount_section .edit_icon a {border:0px solid blue; position: relative; width: 60px; height: 25px; padding: 0 30px 10px 20px;} #custaccount_section .edit_icon span {border: 0px solid red; display: none; visibility: hidden;} #custaccount_section .signreg_icon {border:0px solid red; width: 160px; height: 35px; background: url(/images/icons/signreg.png) no-repeat 0px 12px; float: left; font-size: 1.5em; font-weight: bold; font-family:Georgia, "Times New Roman", Times, serif; padding-top: 15px;} #custaccount_section .signreg_icon a {border:0px solid blue; position: relative; width: 180px; height: 25px; padding: 0 180px 10px 20px; text-decoration:none;} #custaccount_section .signreg_icon span {border: 0px solid red; display: none; visibility: hidden;} #custaccount_section .guest_icon {border:0px solid red; width: 180px; height: 35px; background: url(/images/icons/guest.png) no-repeat 0px 12px; float: left; font-size: 1.5em; font-weight: bold; font-family:Georgia, "Times New Roman", Times, serif; padding-top: 15px; clear: right;} #custaccount_section .guest_icon a {border:0px solid blue; position: relative; width: 180px; height: 25px; padding: 0 180px 10px 20px; text-decoration:none;} #custaccount_section .guest_icon span {border: 0px solid green; display: none; visibility: hidden;} /****************************** Footer ***********************************************/ #footer-container {color: #000; border-top: 1px solid #FC6; text-align: center; z-index: 900; position: absolute; height: 18.5em;} #footer-container a {color: #000; text-decoration:none; border: 0;} #footer-container a:hover {color: #000; text-decoration:underline; border: 0;} #footer-body {height: auto;} #footer-body {height: 40px; margin-bottom: 15px; position: absolute; z-index: 100; text-transform:uppercase; font-weight:bold;} #footer-body p {float: left; margin: 0; width: auto; font-size: 1.1em; color: #000; font-weight:bold; text-transform:uppercase; padding: 10px;} #footer-body ul {margin: 0 0 0 10px; padding: 0; list-style-type: none; } #footer-body li {margin: 0; float: left; padding: 10px; font-weight:normal;font-size: 1em;} #footer-brandslinks, #footer-quicklinks, #footer-contact, #footer-follow { border-bottom: .15em dotted #beb08e; height: 3.5em; overflow: hidden;} #footer-follow {text-transform:none; border: none;} #footer-follow img {border: none;} /* #footer-container ul {margin: 0 0 0 10px; padding: 0; list-style-type: none;} #footer-container li {margin: 0; float: left;} #footer-container a {text-align: center; display: block; color: #000; background-color: #FFF; width: auto; padding: 20px 15px; text-decoration: none;} */ #footer-legal {text-align: left; padding: 10px; margin: 0 20px 1px 0; color: #666; font-size: .85em; } #footer-legal span {text-transform:uppercase; margin: 0; padding: 0;} #product_item form {margin-bottom: 0px; width: 100px; height: 0px; padding: 0px;} #lightbox{ position: absolute; left: 0; width: 100%; z-index: 1000; text-align: center; line-height: 0; } #lightbox a img{ border: none; } #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; } #imageContainer{ padding: 10px; } #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; } #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 910; } #imageContainer>#hoverNav{ left: 0;} #hoverNav a{ outline: none;} #prevLink, #nextLink{ width: 49%; height: 100%; background: transparent url("/images/e-lightbox/blank.gif") no-repeat; /* Trick IE into showing hover */ display: block; } #prevLink { left: 0; float: left;} #nextLink { right: 0; float: right;} #prevLink:hover, #prevLink:visited:hover { background: url("/images/e-lightbox/prevlabel.gif") left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background: url("/images/e-lightbox/nextlabel.gif") right 15% no-repeat; } #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; } #imageData{ padding:0 10px; color: #666; } #imageData #imageDetails{ width: 70%; float: left; text-align: left; } #imageData #caption{ font-weight: bold; } #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; } #imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; } #overlay{ position: absolute; top: 0; left: 0; z-index: 990; width: 100%; height: 500px; background-color: #852F39; } /* Min-Width */ .lbWidth { /* most browsers */ position: absolute; top: 0px; left: 0px; width: 100%; min-width: 790px; } * html .lbContent { /* IE6 */ margin-left: -790px; position:relative; } * html .lbMinWidth { /* IE6 */ padding-left: 790px; } /* Clearfix */ .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix {display: inline-block;} /******************************* Basic *******************************/ body {height: 100%; margin:0px; padding:0; height: 100%; font-size: 76%; letter-spacing: .005em; line-height: 160%; font-family: Arial, Verdana, Tahoma, MS Sans-Serif, sans-serif; text-align: left; } a {cursor:pointer; outline: none;} a:link {color:blue;} a:visited {color:#5f1780;} a:hover {text-decoration:none; color:red;} a:active {color:blue;} a img {border: 1px; border-color: blue;} a:visited img {border: 1px; border-color: #5f1780;} h1, h1 + p, h2, h3, h4, h5, h6 {text-transform:capitalize; margin: 0; padding: 0 0 .05em 0; float:none; line-height:normal; clear: both; letter-spacing: .75px; margin-bottom: .25em; margin-top: .25em; color: #000;} h1.noclear, h2.noclear, h3.noclear, h4.noclear, h5.noclear, h6.noclear {clear: none;} h1, h3, h5 {font: bold 1.0em Arial, Verdana, Helvetica, sans-serif;} h2, h4, h6 {font: bold 1.0em Arial, Verdana, Helvetica, sans-serif;} h1 {font-size: 2em; padding: .25em 0 0 1em; margin-bottom: 0em; margin-top: .25em; margin-left: -1em; /* background: url(/images/backgrounds/h1.png) repeat-y; */ color:#000;} h1 + p, p.h1-subhead {font-size: 1.3em; text-transform:uppercase; max-width: 100%; letter-spacing: 1px; color:#4D4340;} h2 {font-size: 1.8em; text-transform:capitalize; color:#7a2d36; letter-spacing: .25px;} h3 {font-size: 1.4em} h4 {font-size: 1.2em; text-transform:uppercase; color: #e2760d; } h5 {font-size: 1.1em; color: #e2760d;} h6 {font-size: 1.0em; color: #e2760d;} ul {list-style-type:none; margin-bottom: 0px;} li {margin-bottom: 0px;} ul.display {list-style-type:disc; margin-bottom: 10px; font-size: 1.15em;} ol.display {margin-bottom: 10px; font-size: 1.15em;} p {margin-top: 0px; padding-bottom: 0.8em; font: 1.2em Arial, Verdana, Tahoma, MS Sans-Serif, sans-serif; color: #25262A; width: 80%;} /******************************* Main Positioning *******************************/ #page-container {position: relative; margin: 0px; padding: 0px; min-height: 100%; height: 100%; width: 100%; top: 0px;} #header-container, #mainnav-container,#header-body, #content-container, #footer-body, #breadcrumb-container, #breadcrumb-body {width: 100%; position: relative; margin: 0px; padding: 0;} #header-container-inside, #mainnav-body,#footer-container, #content-body {width: 100%; position: relative; margin: 0px; padding: 0; min-width: 760px;} #header-body {height: 152px;} #breadcrumb {position:relative; height: 3em;} #breadcrumb-backto {position:relative; height: 6em;} #footer-container {clear: both; margin-top: 1px; border-left: 249px solid #FC6; right: 0; width: auto;} body, #header-container, #footer-container {background-color: #FFF;} /* Colors Reference Dark Red #401A24 Dark Golden Yellow #E59136 Golden Yellow #FC6 Light Yellow #FAE6A9 Dark Neutral Brown #4D4340 Light Brown #847568 Medium Blue #1C4557 */ #header-links-container {position: fixed; right: 3em; margin: 0; padding: 0; clear: both; text-transform:uppercase; z-index:1000; color: #FFF; font-size: 1em;} /***************************** Left Column **********************************************/ #left-column .inside {padding: 0px; margin: 0px;} #left-column a {text-decoration: none; height: 100%; width: auto;} #left-column a:hover {text-decoration: none;} #left-column .nav-section {width: 249px; margin-top: 0px; margin-bottom: 30px; height: 100%;} .left-nav, .left-nav ul { /* all lists */ padding: 0; margin: 0; list-style: none; float : left; width : 249px;} .left-nav li { /* all list items */ position : relative; float : left; line-height : 1.85em; margin-bottom : -1px; width: 249px;} .left-nav li a {width: 249px; w\idth : 239px; display : block; color : black; font-weight : bold; text-decoration : none; padding : 0 0.5em;} * html #left-column .nav-header h3 {height: 1%;} /* For IE 5 PC */ #left-column .nav-header {margin: 0; padding: 0px 0px 5px 0px; text-align: center; margin: 0; padding: 10px; height: 100%; color: #000;} #left-column .nav-section li {margin: 0; padding: 0;} #left-column .nav-section li ul {list-style: none; margin-left: 0em; margin-top : 0em; width: 100%;} ul.suckerfish1 li, ul.suckerfish2 li, ul.suckerfish3 li {font-weight:bold; text-transform:none;} .left-nav li a:hover {background:url(/images/backgrounds/mainnav-bg-HOVER.png) repeat-x top #f8d26e ;} .suckerfish1 img.suckerfish_left {position: absolute; left: .0em;} .suckerfish2 img.suckerfish_left {position: absolute; left: 1.25em;} .suckerfish3 img.suckerfish_left {position: absolute; left: 0.95em;} .left-nav img.suckerfish_right {position: absolute; right: 0.05em;} ul.suckerfish1 li a {width: 230px; font-size: 115%; padding-left: 1em;} ul.suckerfish2 li a {width: 230px; font-size:100%; padding-left: 1.3em;border-top: 0px solid #E59136;} ul.suckerfish3 li a {width: 220px; padding-left: 2.1em; border-top: 1px solid #FC6;} .nav-section .suckerfish1 ul {border-bottom: solid .15em #E59136;} /* CURRENT Classes *****************************/ .nav-section ul.current li {background-color:#fee9b9;} .nav-section ul.current-middle {background-color:#ffe294;} .nav-section ul.current-last {background-color:#fee9b9;} .nav-section ul.suckerfish1 li.current {border-top: solid .2em #E59136; border-bottom: solid .2em #E59136; background:url(/images/backgrounds/mainnav-bg-current-light.png) repeat-x top #fee9b9;} .nav-section li .current {background:url(/images/backgrounds/mainnav-bg-current-light.png) repeat-x top #fee9b9; color: #6c0430;} .nav-section li .current-middle {color: #4e0e29;} .nav-section li .current-page {background:url(/images/backgrounds/mainnav-bg-HOVER.png) repeat-x top #f8d26e; color: #6c0430;} ul.suckerfish1 li a.current, ul.suckerfish1 li a.current:hover {background:url(/images/backgrounds/mainnav-bg-current-light.png) repeat-x top #fee9b9; color: #6c0430; } ul.suckerfish2 li a.current, ul.suckerfish2 li a.current:hover {background:url(/images/backgrounds/mainnav-bg-current-light.png) repeat-x top #f8d26e; border-top: solid .0em #E59136;} ul.suckerfish3 li a.current, ul.suckerfish3 li a.current:hover {background:url(/images/backgrounds/mainnav-bg-HOVER.png) repeat-x top #f8d26e; color: #000;} /************************* Product Teasers ***************************** */ #teaser_tease {color: #000; margin-left: -5px; padding: 0px 10px 3px 0px; height: 47px; background:url(/images/icons/endcaps_02.png) repeat-x left bottom; width: 100%;} #teaser_tease div {width: auto;} #teaser_tease #howmanyitems {float: left; font-size: 1.4em; font-weight:bold;height: 32px; padding: 18px 10px 0 15px; background:url(/images/icons/endcaps_01.png) left top; } #teaser_tease #sortby {position: absolute; float: right; right: 160px; top: 14px;} #teaser_tease #itemsPerPage {position: absolute; float: right; right: 0px; top: 14px; } #product_section .teaser {margin: 0; float: left; position: relative; width: 125px; height: 18em; padding: 0; text-align: center;} #product_section .teaser p {margin: 0; padding: 0; text-align: left; width: 0%; min-width: 100%; font-size: 95%; overflow: hidden;} #product_section .teasertable {border: .0em dotted gray; padding: 2em 1em 1em 1em; background:url(/images/backgrounds/itemteaser-bg.png) no-repeat bottom left;} #product_section .teasertable:hover {background:url(/images/backgrounds/itemteaser-bg.png) no-repeat bottom right;} #product_section .teaser td.teasertitle {height: 8em; font-size: 1em;} #product_section .teaser td.teasertitle:hover {text-decoration: underline;} #product_section .teaser td.teaseroptions {height: 2em; font-size: 1em;} .quickadd {border:solid 1px #FC6; color: #000; background-color:#FFC; padding: 2px 5px; font-weight:bold;} .viewdetails {border:solid 1px #1C4557; color: #000; background-color:#b1c9d4; padding: 2px 5px; font-weight:bold;} .quickadd:hover {border:solid 1px #000; color: #000; background-color:#FC6; padding: 2px 5px;} .viewdetails:hover {border:solid 1px #000; color: #FFF; background-color:#1C4557; padding: 2px 5px;} #product_section .teaser td.teasernumber {height: 2em; font-size: 1em; font-weight:normal;} #product_section .teaser td.teaserprice {height: 2.5em;} #product_section .teaser td.teaseradd {height: 3em; width: auto; margin-left: 20%;} #product_section .teaser td.teaserimg {height: 100px; overflow: hidden; padding: 0 0 10px 0;margin-bottom: 10px; border-bottom: solid 1px #CCCCCC;} #product_section .teaser td.teasertitle p {color: #333333;} #product_section .teaser td.teasernumber p {color: gray; font-weight:bold;} #product_section .teaser td.teaserprice p {color: red; font-weight:bold;} #product_section .teaser td.teaseradd p {color: #847568; font-weight:bold; text-align: center; padding: .5em .2em; border: 1px solid #000; background-color:#FFF;} #product_section .teaser td.teaseradd p:hover {color: #000; background-color:#FC6;} #product_section .teaser img {position:relative; border: 0px solid #000;} #product_section .teaser td {height: auto;} #product_section .teaser a {text-decoration:none; color: inherit;} /************************* Articles ***************************** */ /****************************** checkout PAGE *********************************/ .shipping_logo {float:left; margin-left: -55px;}