SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Images displayed incorrectly in IE.. inline issue??

    Hi All,

    Im currently developing a site using LightCMS. On the homepage i have a product listing which displays 4 products. In FF, Safari and IE9, they are all horizontally lined up correctly, however in IE 8 & IE 7 they are in a grid of 2 x 2.
    I contacted LightCMS and they told me to create a separate style sheet to target IE which is fine.. but i have no idea what to change in the css.. Ive tried heaps of things with no result.

    I've attached screen grabs..



    I think this is the css code (Light CMS works in an unusual way in that i am given some style sheets and html but others are only accessible by them and i cant edit)
    Code CSS:
    /* grid specific */
    	.productListingGrid .product {width: 23% !important; padding-bottom: 0 !important; margin-bottom: 0 !important;}
    		#homeProducts .productListingGrid .product {width: 23% !important;}
     
    	.productListingGrid li {padding-right: 2% !important;}
    		.productListingGrid li:last-child {padding-right: 0 !important;}
     
    	.productListingGrid li:nth-child(2n+1) {clear: none !important;}
    	.productListingGrid li:nth-child(5n) {clear: left !important;}
    		.twoColumn .productListingGrid li:nth-child(4n) {clear: left !important;}
    		.twoColumn .productListingGrid li:nth-child(5n) {clear: none !important;}
    		#banners .productListingGrid li:nth-child(4n) {clear: none !important;}
    		#banners .productListingGrid li:nth-child(5n) {clear: left !important;}
     
    	.productListingGrid .productImageContainer {float: none !important; margin-bottom: 0px !important; padding-bottom: 0 !important}
    		.productListingGrid .productImageContainer img, .productFeaturedImage img {border: 1px solid #77bbb3; vertical-align: baseline;}
    		.productListingGrid .productImageContainer img:hover, .productFeaturedImage img:hover {border-color: #be1622;}
     
    	.productListingGrid h3.productTitle a {display: block;}
     
    	.productListingGrid .productAddToCart {display: none;}
     
     
    /* product details */
    	.productDetailTitle {margin-bottom: 0 !important;}
     
    	.productDetailType {font-style: italic; font-weight: normal;}
     
    		.productType,
    		.productVendor, 
    		.productDetailType,
    		.productDetailVendor {font-size: 14px !important;}
     
     
    	.productDetailPriceContainer {margin: 10px 0 20px !important;}
    		.productDetailPrice, .productDetailPriceCompare {font-size: 14px !important;}
     
    	.productDetailImage img {border: 1px solid #77bbb3; margin-bottom: 10px !important;}
    	.productDetailImage img:hover {border-color: #be1622;}
     
    	.productDetailImageThumb img {border: 1px solid #77bbb3; margin: 5px 5px 0 0;}
    	.productDetailImageThumb img:hover {border-color: #be1622;}
     
    	.productDetailTitle {font-size: 18px; color: #77bbb3; margin-bottom: none !important;}
    		.productDetailTitle a {color: #77bbb3; text-decoration: none;}
     
    	.productDetailQuantity {font-weight: bold; margin-bottom: 10px !important;}
     
    	.productDetailAddToCartContainer select,
    	#productDetailCartQuantity {	
    		font-family: 'helvetica neue';
    		padding: 6px;
    		font-size: 13px;
    		border: 1px solid #c8c8c8 !important;
    		background: #fff !important;
    		color: #333;
    		margin: 0 0 3px;
    		-moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
    		-webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
    		box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
    	}
     
    	.productDetailDescriptionTitle {display: none; clear: both;}
    	.productListingDescription {padding-bottom: 20px !important;}

    Thanks in advance! This is doing my head in!!
    Attached Images Attached Images

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    We really need to see the HTML that goes with this. Ideally, post a live link to the page in question, as that makes it much easier to debug.

  3. #3
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm.. that could be tricky as i dont have access to all of the files..
    Live link here: http://mummacakes.publishpath.com/

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,297
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Some of your styles use CSS3 (nth child, last-child etc.) that won't work in older browsers, so you need to be careful there. But looking at the page in IE7, I see only the third LI dropping, and that's because it has a special gridViewFix class that includes clear: left; which forces it to fall to the next line (because it is saying that nothing is allowed to site to the left of that LI within that container, which is certainly not what you want).

  5. #5
    SitePoint Enthusiast
    Join Date
    Sep 2008
    Posts
    52
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi ralph.m,
    Thanks for your help! I'm not entirely sure what you mean sorry, (I'm no css expert!) I did a search on the gridViewFix class in my css and it showed no results.
    Basically im designing this through a pre-purchased CMS, i dont have access to all the files, just certain ones for the template. Did you use firebug to find this? When i used it i found the following that belonged to a stylesheet on their system i dont have access to. I can however copy this and add to my stylesheet which overrides theirs but i cant see any clear:left properties.

    Code CSS:
    #toolbar .content:after, .element:after, blockquote:after, dl.stats:after, .actions:after, .clearfix:after, .actions ul:after {
        clear: both;
        content: ".";
        display: block;
        height: 0;
        visibility: hidden;
    }

    This is driving me nuts and the support team for the cms have been of no help! Any ideas?? Here is my entire stylesheet (their template that ive tweeked):


    Code CSS:
    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;}
    table{border-collapse:collapse;border-spacing:0;}
    address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
    del,ins{text-decoration:none;}
    ol,ul,li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym{border:0;font-variant:normal;}
    sup{vertical-align:baseline;}
    sub{vertical-align:baseline;}
    legend{color:#000;}
    input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;border:0;outline:0;}
    input,button,textarea,select{font-size:100%;}
    body{font-size:13px;font-family:Georgia, "Times New Roman", Times, serif; font-size:small;}
    select,input,button,textarea,button{font:99% "Trebuchet MS", Arial, Helvetica, clean, sans-serif;padding:4px;border:1px solid #bbb;}
    table{font-size:inherit;}
    pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%;}
    :focus{outline:0;}
    blockquote,q{quotes:none;}
    a{outline:0;text-decoration:none;}
     
     
    /* ----------------------------------------------------------------
    Fonts,Links,Headings & Inputs Styling
    -----------------------------------------------------------------*/
    body{
        font-family:Georgia, "Times New Roman", Times, serif;
        font-style:italic;
        font-size:14px;
        font-weight:normal;
        color:#909797;
        background: url('../images/bg-repeat_red.jpg') top left repeat;
        }
     
    p{
        font-size:100% !important;
        line-height:22px;
        color:#909797;
        margin-bottom: 15px;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-style:italic;
        }
     
    h1,h2,h3,h4,h5,h6{
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        letter-spacing:1px;
        margin-bottom:4px;
        font-weight:bold;
        text-transform:capitalize;
        }
     
    h1{
        font-size:24px !important;
        color:#be1622;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        letter-spacing:1px !important;
        padding-bottom:15px;
        }
     
    h2{
        font-size:190% !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        letter-spacing:1px !important;
        padding-bottom:2px;
        border-bottom: 1px dashed #77bbb3;
        }
     
        h2#welcome {
            font-weight: normal;
            text-transform: uppercase;
            margin-bottom: 8px;
            }
     
    h3{
        font-size:182% !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        }
     
    h4{
        font-size:16px !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        line-height: 18px !important;
        }
     
    h5{
        font-size:28px !important;
        font-family:Georgia, "Times New Roman", Times, serif !important;
        color:#be1622;
        font-style:italic !important;
        font-weight:normal !important;
        line-height:28px !important;
        }
     
    h6{
        font-size:123.1% !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        }
     
    a,
    a:active,
    a:link{
        color:#be1622;
        text-decoration:none;
        outline:none;
        }
     
    a:visited{
        color:#be1622;
        text-decoration:none;
        outline:none;
        }
     
    a:hover,
    a:focus{
        color:#77bbb3;
        text-decoration:none;
        outline:none;
        }
     
     
     
    .link2,
    .link2 a:active,
    .link2 a:link{
        color:#77bbb3;
        text-decoration:none;
        outline:none;
        }
     
    .link2 a:visited{
        color:#77bbb3;
        text-decoration:none;
        outline:none;
        }
     
    .link2 a:hover,
    .link2 a:focus{
        color:#be1622;
        text-decoration:underline;
        outline:none;
        }
     
     
     
     
    em,i{font-style:italic;}
    strong,b{font-weight:bold;}
    .blogList li,.eventsList li,.linksModule ul li{font-size:108% !important;margin-bottom:0px;list-style:none !important;font-weight:normal !important;padding:0 !important;}
    .textElement ul li{list-style:disc inside;margin-bottom:10px;}
    .textElement ul li ul li{padding-left:20px;margin:4px 0 4px;list-style:circle inside;}
    .textElement ul,.textElement ol,.textElement dl{margin:10px 20px;}
    .textElement dt{font-weight:bold;text-decoration:underline;}
    .textElement dd{margin:0;padding:0 0 0.5em 0;}
    .textElement ol li{list-style:decimal inside !important;margin-bottom:10px;}
    h1#pagetitle{font-size:300% !important;color:#fff;}
     
     
    @font-face {
        font-family: 'OstrichSansBold';
        src: url('fonts/ostrich-bold-webfont.eot');
        src: url('fonts/ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/ostrich-bold-webfont.woff') format('woff'),
             url('fonts/ostrich-bold-webfont.ttf') format('truetype'),
             url('fonts/ostrich-bold-webfont.svg#OstrichSansBold') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
    /* ----------------------------------------------------------------
    Classes
    -----------------------------------------------------------------*/
     
    .width {
        width: 960px;
        margin: 0 auto;
        background-color:#ffffff;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        padding: 0 10px 10px 10px;
        margin-top:40px;
        }
     
    .clear {clear:both;}
    .floatLeft {float:left;}
    .floatRight {float:right;}
     
    #accessibilityLinks    {
        height: 0;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
        }
     
     
    /* ----------------------------------------------------------------
    Page Layout
    -----------------------------------------------------------------*/
     
    #body {
        background: url('../images/bg-repeat_red.jpg') -4px left repeat-x;
        min-height: 150px;
        }
     
     
    /* Header
    -----------------------------------------------------------------*/
     
    #header {
        height:310px;
        width:960px;
        background: url('../images/header.jpg');
        background-repeat:no-repeat;
        }
     
     
    #logo {
        margin-left:40px; 
        width:245px;
        float:left;
        }
     
        #logo a {
            color: #999999 !important;
            text-shadow: 0px 1px 2px #fff;
            letter-spacing: -2px;
            }
     
        #logo a:hover {text-decoration: none;}
     
    .search {
        float: right;
        width: 180px;
        }
     
        .searchInput {
            background: url('../images/search-input-bg.png') top left no-repeat;
            border: none;
            outline: none;
            color: #b5b2b0;
            font-family: "Droid Sans", helvetica, arial, sans-serif;
            font-size: 12px;
            line-height: 12px;
            padding: 10px 10px 12px 20px;
            width: 118px;
            float: left;
            }
     
        .searchButton {
            float: right;
            background: url('../images/search-button-bg.png') top left no-repeat;
            border: none;
            outline: none;
            height: 38px;
            width: 32px;
            cursor: pointer;
            color: #9d9d9d;
            }
     
    #nav {
        position: relative;
        }
     
    .mainNav {
        height: 35px;
        width: 980px;
        padding: 10px 0px 0 0px;
        text-align:right;
        float:right;
        }
     
        .mainNav li {
            display: inline;
            padding: 0px 20px;
            }
     
        .mainNav li a {
            color: #fff;
            font-size: 17px;
            font-family:Georgia, "Times New Roman", Times, serif;
            letter-spacing:1px;
            font-style:italic;
            text-shadow: 0 1px 1px #acdbd5;
            }
     
        .mainNav li a:hover,
        .mainNav li a:focus,
        .mainNav li a.selectedPage {
            color: #be1622;
            text-decoration: none;
            }
     
     
    #nav2 {
        position: relative;
        }
     
    .mainNav2 {
        height: 35px;
        width: 980px;
        padding: 15px 0px 0 0px;
        text-align:right;
        float:right;
        margin-top:65px;
        }
     
        .mainNav2 li {
            display: inline;
            padding: 0px 20px;
            }
     
        .mainNav2 li a {
            color: #fff;
            font-size: 17px;
            font-family:Georgia, "Times New Roman", Times, serif;
            letter-spacing:1px;
            font-style:italic;
            text-shadow: 0 1px 1px #acdbd5;
            }
     
        .mainNav2 li a:hover,
        .mainNav2 li a:focus,
        .mainNav2 li a.selectedPage {
            color: #be1622;
            text-decoration: none;
            }
     
     
     
     
    /* Featured Content
    -----------------------------------------------------------------*/
     
    #featuredContent {
        position: relative;
        z-index: 2;
        background-color: #FCEAF4;
        background: url('../images/fabric_bg.jpg');
        background-repeat:repeat;
        }
     
    #featuredText {
        float: left;
        width: 228px;
        padding: 30px 30px 30px 30px;
        margin-left:10px;
        background: url('../images/feature_bg.png') no-repeat;
        }
     
        #featuredText h2 {font-weight: normal;}
     
        #featuredText .shoppingButton a{
            background: url('../images/shopping-sprite.png') top left no-repeat;
            width: 225px;
            height: 38px;
            text-indent: -9999px;
            display: block;
            margin-top: 30px;
            }
     
        #featuredText .shoppingButton a:hover {background-position: 0 -38px;}
     
    #featuredImage {
        position: relative;
        z-index: 10;
        float: right;
        width: 660px;
        height: 470px;
        }
     
        #featuredImage img{
            -webkit-border-radius:  0 0 5px 0px;
            -moz-border-radius:  0 0 5px 0px;
            border-radius:  0 0 5px 0px;
            }
     
        .sldw_caption h3 {
            font-size: 14px !important;
            font-weight: normal !important;
            }
     
        .sldw_prev a {
            width: 39px;
            height: 39px;
            text-indent: -9999px;
            border: 0 !important;
            text-decoration: none !important;
            overflow: hidden;
            position: absolute;
            top: 43%;
            left: 5%;
            background: url('../images/arrow-left-on.png') 0 0 no-repeat;
            }
     
        .sldw_prev a:hover {background: url('../images/arrow-left-off.png') 0 0 no-repeat;}
     
        .sldw_next a {
            width: 39px;
            height: 39px;
            text-indent: -9999px;
            text-decoration: none !important;
            border: 0 !important;
            overflow: hidden;
            position: absolute;
            top: 43%;
            right: 5%;
            background: url('../images/arrow-right-on.png') 0 0 no-repeat;
            }
     
        .sldw_next a:hover {background: url('../images/arrow-right-off.png') 0 0 no-repeat;}
     
     
     
    /* Featured Products
    -----------------------------------------------------------------*/
     
    #homeProducts {
        position: relative;
        margin: 25px 0;
        padding: 20px 20px 0px 30px;
        background: #f2f9f9;
        border-top: 3px dotted #be1622;
        border-bottom: 3px dotted #be1622;
        }    
     
     
     
    /* Bottom Content
    -----------------------------------------------------------------*/    
     
    #subContent {
        margin: 25px 0 15px 0;
        width: 959px;
        height: 220px;
        background: url('../images/homePage-bottom-section-bg.png') top left repeat-y;
        border: 1px solid #e6332a;
        }
     
        #subLeft {
            float: left;
            width: 540px;
            padding: 25px 0px 20px 30px;
            }
     
        #subRight {
            float: right;
            width: 365px;
            padding: 10px 0;
            background: url('../images/illustrations.jpg') bottom left no-repeat;
            }
     
     
     
    /* Footer
    -----------------------------------------------------------------*/            
     
    #footer {
        border-top: 1px solid #c6c6c6;
        padding: 15px 10px 0px 10px;
        margin: 20px 0 10px 0;
        }
     
        #footerLeft {float: left;}
        #misc li {
            display: inline;
            padding-right: 20px;
            }
     
        #misc li a {
            color: #444444;
            font-size: 12px;
            }
     
        #footerRight {float: right;}
        .footerNav li{
            display: inline;
            padding-left:20px;
            }    
     
        .footerNav li a {color: #be1622; -webkit-transition: all linear .1s;}
        .footerNav li a:hover {text-decoration: none; color: #77bbb3;}
     
     
     
    /* InsidePage
    -----------------------------------------------------------------*/    
     
    #mainContent {
        background: url('../images/fabric_bg.jpg') repeat;
        position: relative;
        padding-bottom:20px;
        }
     
     
    #crumbs {
        position: relative;
        padding: 20px;
        border-bottom: 1px solid #c6c6c6;
        }
     
    .breadcrumb {
        text-align: right;
        font-size: 16px;
        font-weight: bold;
        color: #77bbb3;
        }
     
    .breadcrumb a {
        font-size: 14px;
        font-weight: normal;
        color: #626262;
        }
     
    #subColumn {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 208px;
        max-height: 450px;
        -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background-color:#f2f9f9;
    z-index:2;
    margin-left:20px;
        }
     
    #subColumn .element,
    #subColumn .container {
        width:148px;
        padding:10px 20px;
        }
     
    #mainColumn {
        background-color:#ffffff;
        position: relative;
        top: 30px;
        left: 188px;
        min-height: 300px;
        width: 665px;
        padding: 25px 25px 25px 40px;
        margin:0px 0px 40px 20px;
        -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    z-index:1;
        }
     
        .productDetail #mainColumn,
        .shoppingCart #mainColumn {
            width: 855px;
            left: 0;
            height:675px;
            }
     
     
     
            div.productDetailDescriptionContainer {
        float: left;
        position:absolute !important;
        width: 100%;
        margin-left:320px !important;
    }
     
     
     
     
    .subNav { margin: 0 0 30px; }
     
    .subNav li {
            list-style: none;
            display: block;
     
            border-bottom: 1px solid #d1e4e4;
            }
     
        .subNav li a {
            padding: 16px 10px 16px 20px;
            background: #f2f9f9;
            color: #77bbb3;
            display: block;
            }
     
        .subNav li a:hover {
            background: #d9ebeb;
            text-decoration: none;
            color: #be1622;
            }
     
        .subNav li.selectedPage a {
            background: #be1622 url('../images/subNav-li.png') 170px center no-repeat;
            cursor: default;
            color: #fff
            }
     
    /* ----------------------------------------------------------------
    CMS Specifc Styles
    -----------------------------------------------------------------*/
     
    .loginElement input[type="text"],
    .loginElement input[type="password"],
    .loginElement textarea {
        padding:7px; width:198px; border:1px solid #ddd; color:#333; font-size:1em; background: #f6f6f6; /* old browsers */
        background: -moz-linear-gradient(top, #f6f6f6 0%, #fbfbfb 48%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(48%,#fbfbfb)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#fbfbfb',GradientType=0 ); /* ie */ 
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-box-shadow: 0 1px -1px rgba(0,0,0,0.22);
        -webkit-transition: border 0.2s linear, -webkit-box-shadow 0.2s linear;
        }
     
    .loginElement input[type="text"]:focus,
    .loginElement input[type="password"]:focus,
    .loginElement textarea:focus {
        -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);    
        -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        border-color: rgba(82, 168, 236, 0.75) !important;
        outline: medium none;
        }
     
    input.button {
        background: #77bbb3;
        border: none;
        padding: 5px;
        color: #fff;
        cursor: pointer;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        }
     
     
    /* Calendar */
     
    .calendarTitle td,
    .calendarDayHeader {background: #afafaf;}
     
    .eventsCalendar td {
        min-height: 50px; 
     
        border: 1px solid #afafaf !important;}
     
     
    .calendarWeekendDay,
    .calendarOtherMonthDay,
    .calendarToday {
        padding: 2px;
        border: 1px solid #afafaf !important;
        text-align: center;
        vertical-align: top;
        background: #efefef !important;
        padding: 5px;
        border-bottom: 1px solid #f4f4f4;
        }
     
    .calendarNextPrevious a {color: #77bbb3 !important}
     
    .eventsList li {margin-bottom: 20px;}
    .eventsList li a {font-size: 20px !important; font-weight: bold;}
    .eventsList li .eventDate {font-size: 12px !important;}
     
     
     
    /* Blog */
     
    #mainColumn .blogList h2.postTitle a {font-size: 18px !important;}
    #mainColumn .blogList .postInfo {font-size: 12px !important;}
     
    #subColumn .blogList h2.postTitle a {font-size: 12px !important;}
    #subColumn .blogList .postInfo {font-size: 12px !important;}
     
    #subColumn .archive {padding: 20px;}
    #subColumn .archive h2.postTitle {font-size: 12% !important;}
    #subColumn .archive .postInfo {font-size: 12px !important;}
     
     
    /* SHOPPING CART */
     
    /* listings */
        .productListing li {border-color: #F1F1F1;}
        .productListing li:last-child {border: none;}
        .productListing h3.productTitle {font-size: 14px !important;}
            .productListing h3.productTitle a {text-decoration: none;}
     
        .productType {font-style: italic; font-weight: normal;}
     
        .productImageContainer img {border: 2px solid #7c7c7c; vertical-align: baseline;}
     
        ul.productListing li span.productImageContainer {
        display: block;
        float: left;
        padding: 0 0px 5px 0 !important;
    }
     
        .productDescription {margin-bottom: 5px !important;}
     
        .productPriceContainer {padding-top: 0 !important;}
            .productPriceContainer .productPrice {font-size: 12px !important; font-weight: normal;}
     
        .productAddToCart, 
        .productDetailAddToCart {
            background: #77bbb3 !important;
            font-size: 12px !important;
            color: #fff !important;
            width: 85px;
            height: 26px;
            border: none;
            outline: none;
            cursor: pointer;
            margin: 10px 0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            }
     
     
        .productAddToCart:hover,
        .productDetailAddToCart:hover {background:#be1622 !important;}
     
     
     
     
     
     
     
     
     
     
     
     
    /* grid specific */
        .productListingGrid .product {width: 24% !important; padding-bottom: 0 !important; margin-bottom: 0 !important;}
            #homeProducts .productListingGrid .product {width: 24% !important;}
     
        .productListingGrid li {padding-right: 1% !important; height: 195px !important; }
            .productListingGrid li:last-child {padding-right: 0 !important;}
     
        .productListingGrid li:nth-child(2n+1) {clear: none !important;}
     
            .twoColumn .productListingGrid li:nth-child(4n) {clear: left !important;}
            .twoColumn .productListingGrid li:nth-child(5n) {clear: none !important;}
            #banners .productListingGrid li:nth-child(4n) {clear: none !important;}
            #banners .productListingGrid li:nth-child(5n) {clear: left !important;}
     
        .productListingGrid .productImageContainer {float: none !important; margin-bottom: 0px !important; padding-bottom: 0 !important}
            .productListingGrid .productImageContainer img, .productFeaturedImage img {border: 1px solid #77bbb3; vertical-align: baseline; margin-right:30px;}
            .productListingGrid .productImageContainer img:hover, .productFeaturedImage img:hover {border-color: #be1622;}
     
        .productListingGrid h3.productTitle a {display: block;}
     
        .productListingGrid .productAddToCart {display: none;}
     
     
    /* product details */
        .productDetailTitle {margin-bottom: 0 !important;}
     
        .productDetailType {font-style: italic; font-weight: normal;}
     
            .productType,
            .productVendor, 
            .productDetailType,
            .productDetailVendor {font-size: 14px !important;}
     
     
        .productDetailPriceContainer {margin: 10px 0 20px !important;}
            .productDetailPrice, .productDetailPriceCompare {font-size: 14px !important;}
     
        .productDetailImage img {border: 1px solid #77bbb3; margin-bottom: 10px !important;}
        .productDetailImage img:hover {border-color: #be1622;}
     
        .productDetailImageThumb img {border: 1px solid #77bbb3; margin: 5px 5px 0 0;}
        .productDetailImageThumb img:hover {border-color: #be1622;}
     
        .productDetailTitle {font-size: 18px; color: #77bbb3; margin-bottom: none !important;}
            .productDetailTitle a {color: #77bbb3; text-decoration: none;}
     
        .productDetailQuantity {font-weight: bold; margin-bottom: 10px !important;}
     
        .productDetailAddToCartContainer select,
        #productDetailCartQuantity {    
            font-family: 'helvetica neue';
            padding: 6px;
            font-size: 13px;
            border: 1px solid #c8c8c8 !important;
            background: #fff !important;
            color: #333;
            margin: 0 0 3px;
            -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
        }
     
        .productDetailDescriptionTitle {display: none; clear: both;}
        .productListingDescription {padding-bottom: 20px !important;}
     
     
     
     
     
     
     
     
     
     
     
     
     
        /* Cart Links  */
     
        .cart_andCheckout {
            float:right; 
            width: 240px;
            clear:none;
            position: relative;
            z-index: 100;
            margin-top: 25px;
            margin-right:20px;
            }
     
        .cartItems {
            float:right;
            clear:right;
            margin-top:20px;
            margin-bottom:10px;
            margin-right:20px;
            }
     
            .cartItems .number,
            .cart-total .number{
                font-size: 16px; 
                font-weight: bold; 
                padding: 0px 3px;
                color: #be1622;
                }
     
        .cart-link {
            background: url('../images/view-cart_original.png') no-repeat;
            height: 120px;
            width: 120px;
            float:left;
            }
     
        .checkout-link {
            background: url('../images/checkout_original.png') no-repeat;
            width: 120px;
            height: 120px;
            float:left;
            }
     
        .cart-link:hover {
            background: url('../images/view-cart_hover.png') no-repeat;
        }
        .checkout-link:hover {background: url('../images/checkout_hover.png') no-repeat;}
     
        .cartItemsCount {
            font-size: 15px !important;  
            line-height: 15px;  
            color: #be1622;    
            font-weight: 100;
            margin: -1px 7px 0 0;
            padding: 6px 10px;      
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px; 
            border: 10px solid #f2f9f9;
            width: 19% !important;  
            text-align: center !important;
            background: #e4f0f0; 
            }
     
    /* <textEditor> */
    .homeIcon{float:left;margin:0 10px 55px 0;}
    .imgspacing-upperleft{float:left;margin:0 10px 5px 0;}
    .imgspacing-upperright{float:right;margin:0 0 5px 10px;}
    .imgspacing-midleft{float:left;margin:5px 10px 5px 0;}
    .imgspacing-midright{float:right;margin:5px 0 5px 10px;}
    .imgspacing-lowleft{float:left;margin:5px 10px 0 0;}
    .imgspacing-lowright{float:right;margin:5px 0 0 10px;}
    .noborder{border:none !important;}
    .fontGeorgia{font-family:georgia,serif;}
    .fontTimes{font-family:"times new roman",times,serif;}
    .fontVerdana{font-family:verdana,sans-serif;}
    .fontArial{font-family:arial,sans-serif;}
    .fontTahoma{font-family:tahoma,sans-serif;}
    .fontHelvetica{font-family:Helvetica,arial,sans-serif;}
    .fontSize10{font-size:10px;}
    .fontSize11{font-size:11px;}
    .fontSize12{font-size:12px;}
    .fontSize13{font-size:13px;}
    .fontSize14{font-size:14px;}
    .fontSize15{font-size:15px;}
    .fontSize16{font-size:16px;}
    .fontSize17{font-size:17px;}
    .fontSize18{font-size:18px;}
    .fontSize19{font-size:19px;}
    .fontSize20{font-size:20px;}
    .fontSize21{font-size:21px;}
    .fontSize22{font-size:22px;}
    .fontSize23{font-size:23px;}
    .fontSize24{font-size:24px;}
    .fontSize25{font-size:25px;}
    .fontSize26{font-size:26px;}
    .fontSize27{font-size:27px;}
    .fontSize28{font-size:28px;}
    .fontSize29{font-size:29px;}
    .fontSize30{font-size:30px;}
    /* </textEditor> *//*
        Template - Antiquarian
        Author   - Ty Carlson
        Company  - Element Fusion    
        Style    - style.css    
    */
     
     
     
     
    /* ----------------------------------------------------------------
    Custom Reset
    -----------------------------------------------------------------*/
    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;}
    table{border-collapse:collapse;border-spacing:0;}
    address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}
    del,ins{text-decoration:none;}
    ol,ul,li{list-style:none;}
    caption,th{text-align:left;}
    h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
    q:before,q:after{content:'';}
    abbr,acronym{border:0;font-variant:normal;}
    sup{vertical-align:baseline;}
    sub{vertical-align:baseline;}
    legend{color:#000;}
    input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;border:0;outline:0;}
    input,button,textarea,select{font-size:100%;}
    body{font-size:13px;font-family:Georgia, "Times New Roman", Times, serif; font-size:small;}
    select,input,button,textarea,button{font:99% "Trebuchet MS", Arial, Helvetica, clean, sans-serif;padding:4px;border:1px solid #bbb;}
    table{font-size:inherit;}
    pre,code,kbd,samp,tt{font-family:monospace;font-size:108%;line-height:100%;}
    :focus{outline:0;}
    blockquote,q{quotes:none;}
    a{outline:0;text-decoration:none;}
     
     
    /* ----------------------------------------------------------------
    Fonts,Links,Headings & Inputs Styling
    -----------------------------------------------------------------*/
    body{
        font-family:Georgia, "Times New Roman", Times, serif;
        font-style:italic;
        font-size:14px;
        font-weight:normal;
        color:#909797;
        background: url('../images/bg-repeat_red.jpg') top left repeat;
        }
     
    p{
        font-size:100% !important;
        line-height:22px;
        color:#909797;
        margin-bottom: 15px;
        font-family:Georgia, "Times New Roman", Times, serif;
        font-style:italic;
        }
     
    h1,h2,h3,h4,h5,h6{
        font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
        letter-spacing:1px;
        margin-bottom:4px;
        font-weight:bold;
        text-transform:capitalize;
        }
     
    h1{
        font-size:24px !important;
        color:#be1622;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        letter-spacing:1px !important;
        padding-bottom:15px;
        }
     
    h2{
        font-size:190% !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        letter-spacing:1px !important;
        padding-bottom:2px;
        border-bottom: 1px dashed #77bbb3;
        }
     
        h2#welcome {
            font-weight: normal;
            text-transform: uppercase;
            margin-bottom: 8px;
            }
     
    h3{
        font-size:182% !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        }
     
    h4{
        font-size:14px !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        line-height:13px;
        }
     
    h5{
        font-size:28px !important;
        font-family:Georgia, "Times New Roman", Times, serif !important;
        color:#be1622;
        font-style:italic !important;
        font-weight:normal !important;
        line-height:28px !important;
        }
     
    h6{
        font-size:123.1% !important;
        color:#77bbb3;
        font-style:normal !important;
        text-transform:capitalize !important;
        font-weight:normal !important;
        }
     
    a,
    a:active,
    a:link{
        color:#be1622;
        text-decoration:none;
        outline:none;
        }
     
    a:visited{
        color:#be1622;
        text-decoration:none;
        outline:none;
        }
     
    a:hover,
    a:focus{
        color:#77bbb3;
        text-decoration:none;
        outline:none;
        }
     
     
     
    .link2,
    .link2 a:active,
    .link2 a:link{
        color:#77bbb3;
        text-decoration:none;
        outline:none;
        }
     
    .link2 a:visited{
        color:#77bbb3;
        text-decoration:none;
        outline:none;
        }
     
    .link2 a:hover,
    .link2 a:focus{
        color:#be1622;
        text-decoration:underline;
        outline:none;
        }
     
     
     
     
    em,i{font-style:italic;}
    strong,b{font-weight:bold;}
    .blogList li,.eventsList li,.linksModule ul li{font-size:108% !important;margin-bottom:0px;list-style:none !important;font-weight:normal !important;padding:0 !important;}
    .textElement ul li{list-style:disc inside;margin-bottom:10px;}
    .textElement ul li ul li{padding-left:20px;margin:4px 0 4px;list-style:circle inside;}
    .textElement ul,.textElement ol,.textElement dl{margin:10px 20px;}
    .textElement dt{font-weight:bold;text-decoration:underline;}
    .textElement dd{margin:0;padding:0 0 0.5em 0;}
    .textElement ol li{list-style:decimal inside !important;margin-bottom:10px;}
    h1#pagetitle{font-size:300% !important;color:#fff;}
     
     
    @font-face {
        font-family: 'OstrichSansBold';
        src: url('fonts/ostrich-bold-webfont.eot');
        src: url('fonts/ostrich-bold-webfont.eot?#iefix') format('embedded-opentype'),
             url('fonts/ostrich-bold-webfont.woff') format('woff'),
             url('fonts/ostrich-bold-webfont.ttf') format('truetype'),
             url('fonts/ostrich-bold-webfont.svg#OstrichSansBold') format('svg');
        font-weight: normal;
        font-style: normal;
     
    }
     
     
     
    /* ----------------------------------------------------------------
    Classes
    -----------------------------------------------------------------*/
     
    .width {
        width: 960px;
        margin: 0 auto;
        background-color:#ffffff;
        -moz-box-shadow: 0 0 5px #888;
        -webkit-box-shadow: 0 0 5px#888;
        box-shadow: 0 0 5px #888;
        padding: 0 10px 10px 10px;
        margin-top:40px;
        }
     
    .clear {clear:both;}
    .floatLeft {float:left;}
    .floatRight {float:right;}
     
    #accessibilityLinks    {
        height: 0;
        font-size: 0;
        line-height: 0;
        text-indent: -9999px;
        }
     
     
    /* ----------------------------------------------------------------
    Page Layout
    -----------------------------------------------------------------*/
     
    #body {
        background: url('../images/bg-repeat_red.jpg') -4px left repeat-x;
        min-height: 150px;
        }
     
     
    /* Header
    -----------------------------------------------------------------*/
     
    #header {
        height:310px;
        width:960px;
        background: url('../images/header.jpg');
        background-repeat:no-repeat;
        }
     
     
    #logo {
        margin-left:40px; 
        width:245px;
        float:left;
        }
     
        #logo a {
            color: #999999 !important;
            text-shadow: 0px 1px 2px #fff;
            letter-spacing: -2px;
            }
     
        #logo a:hover {text-decoration: none;}
     
    .search {
        float: right;
        width: 180px;
        }
     
        .searchInput {
            background: url('../images/search-input-bg.png') top left no-repeat;
            border: none;
            outline: none;
            color: #b5b2b0;
            font-family: "Droid Sans", helvetica, arial, sans-serif;
            font-size: 12px;
            line-height: 12px;
            padding: 10px 10px 12px 20px;
            width: 118px;
            float: left;
            }
     
        .searchButton {
            float: right;
            background: url('../images/search-button-bg.png') top left no-repeat;
            border: none;
            outline: none;
            height: 38px;
            width: 32px;
            cursor: pointer;
            color: #9d9d9d;
            }
     
    #nav {
        position: relative;
        }
     
    .mainNav {
        height: 35px;
        width: 980px;
        padding: 10px 0px 0 0px;
        text-align:right;
        float:right;
        }
     
        .mainNav li {
            display: inline;
            padding: 0px 20px;
            }
     
        .mainNav li a {
            color: #fff;
            font-size: 17px;
            font-family:Georgia, "Times New Roman", Times, serif;
            letter-spacing:1px;
            font-style:italic;
            text-shadow: 0 1px 1px #acdbd5;
            }
     
        .mainNav li a:hover,
        .mainNav li a:focus,
        .mainNav li a.selectedPage {
            color: #be1622;
            text-decoration: none;
            }
     
     
    #nav2 {
        position: relative;
        }
     
    .mainNav2 {
        height: 35px;
        width: 980px;
        padding: 15px 0px 0 0px;
        text-align:right;
        float:right;
        margin-top:65px;
        }
     
        .mainNav2 li {
            display: inline;
            padding: 0px 20px;
            }
     
        .mainNav2 li a {
            color: #fff;
            font-size: 17px;
            font-family:Georgia, "Times New Roman", Times, serif;
            letter-spacing:1px;
            font-style:italic;
            text-shadow: 0 1px 1px #acdbd5;
            }
     
        .mainNav2 li a:hover,
        .mainNav2 li a:focus,
        .mainNav2 li a.selectedPage {
            color: #be1622;
            text-decoration: none;
            }
     
     
     
     
    /* Featured Content
    -----------------------------------------------------------------*/
     
    #featuredContent {
        position: relative;
        z-index: 2;
        background-color: #FCEAF4;
        background: url('../images/fabric_bg.jpg');
        background-repeat:repeat;
        }
     
    #featuredText {
        float: left;
        width: 228px;
        padding: 30px 30px 30px 30px;
        margin-left:10px;
        background: url('../images/feature_bg.png') no-repeat;
        }
     
        #featuredText h2 {font-weight: normal;}
     
        #featuredText .shoppingButton a{
            background: url('../images/shopping-sprite.png') top left no-repeat;
            width: 225px;
            height: 38px;
            text-indent: -9999px;
            display: block;
            margin-top: 30px;
            }
     
        #featuredText .shoppingButton a:hover {background-position: 0 -38px;}
     
    #featuredImage {
        position: relative;
        z-index: 10;
        float: right;
        width: 660px;
        height: 470px;
        }
     
        #featuredImage img{
            -webkit-border-radius:  0 0 5px 0px;
            -moz-border-radius:  0 0 5px 0px;
            border-radius:  0 0 5px 0px;
            }
     
        .sldw_caption h3 {
            font-size: 14px !important;
            font-weight: normal !important;
            }
     
        .sldw_prev a {
            width: 39px;
            height: 39px;
            text-indent: -9999px;
            border: 0 !important;
            text-decoration: none !important;
            overflow: hidden;
            position: absolute;
            top: 43%;
            left: 5%;
            background: url('../images/arrow-left-on.png') 0 0 no-repeat;
            }
     
        .sldw_prev a:hover {background: url('../images/arrow-left-off.png') 0 0 no-repeat;}
     
        .sldw_next a {
            width: 39px;
            height: 39px;
            text-indent: -9999px;
            text-decoration: none !important;
            border: 0 !important;
            overflow: hidden;
            position: absolute;
            top: 43%;
            right: 5%;
            background: url('../images/arrow-right-on.png') 0 0 no-repeat;
            }
     
        .sldw_next a:hover {background: url('../images/arrow-right-off.png') 0 0 no-repeat;}
     
     
     
    /* Featured Products
    -----------------------------------------------------------------*/
     
    #homeProducts {
        position: relative;
        margin: 25px 0;
        padding: 20px 20px 0px 30px;
        background: #f2f9f9;
        border-top: 3px dotted #be1622;
        border-bottom: 3px dotted #be1622;
        }    
     
     
     
    /* Bottom Content
    -----------------------------------------------------------------*/    
     
    #subContent {
        margin: 25px 0 15px 0;
        width: 959px;
        height: 220px;
        background: url('../images/homePage-bottom-section-bg.png') top left repeat-y;
        border: 1px solid #e6332a;
        }
     
        #subLeft {
            float: left;
            width: 540px;
            padding: 25px 0px 20px 30px;
            }
     
        #subRight {
            float: right;
            width: 365px;
            padding: 10px 0;
            background: url('../images/illustrations.jpg') bottom left no-repeat;
            }
     
     
     
    /* Footer
    -----------------------------------------------------------------*/            
     
    #footer {
        border-top: 1px solid #c6c6c6;
        padding: 15px 10px 0px 10px;
        margin: 20px 0 10px 0;
        }
     
        #footerLeft {float: left;}
        #misc li {
            display: inline;
            padding-right: 20px;
            }
     
        #misc li a {
            color: #444444;
            font-size: 12px;
            }
     
        #footerRight {float: right;}
        .footerNav li{
            display: inline;
            padding-left:20px;
            }    
     
        .footerNav li a {color: #be1622; -webkit-transition: all linear .1s;}
        .footerNav li a:hover {text-decoration: none; color: #77bbb3;}
     
     
     
    /* InsidePage
    -----------------------------------------------------------------*/    
     
    #mainContent {
        background: url('../images/fabric_bg.jpg') repeat;
        position: relative;
        padding-bottom:20px;
        }
     
     
    #crumbs {
        position: relative;
        padding: 20px;
        border-bottom: 1px solid #c6c6c6;
        }
     
    .breadcrumb {
        text-align: right;
        font-size: 16px;
        font-weight: bold;
        color: #77bbb3;
        }
     
    .breadcrumb a {
        font-size: 14px;
        font-weight: normal;
        color: #626262;
        }
     
    #subColumn {
        position: absolute;
        top: 40px;
        bottom: 0;
        width: 208px;
        max-height: 450px;
        -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    background-color:#f2f9f9;
    z-index:2;
    margin-left:20px;
        }
     
    #subColumn .element,
    #subColumn .container {
        width:148px;
        padding:10px 20px;
        }
     
    #mainColumn {
        background-color:#ffffff;
        position: relative;
        top: 30px;
        left: 188px;
        min-height: 300px;
        width: 665px;
        padding: 25px 25px 25px 40px;
        margin:0px 0px 40px 20px;
        -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    z-index:1;
        }
     
        .productDetail #mainColumn,
        .shoppingCart #mainColumn {
            width: 855px;
            left: 0;
            height:675px;
            }
     
     
     
            div.productDetailDescriptionContainer {
        float: left;
        position:absolute !important;
        width: 100%;
        margin-left:320px !important;
    }
     
     
     
     
    .subNav { margin: 0 0 30px; }
     
    .subNav li {
            list-style: none;
            display: block;
     
            border-bottom: 1px solid #d1e4e4;
            }
     
        .subNav li a {
            padding: 16px 10px 16px 20px;
            background: #f2f9f9;
            color: #77bbb3;
            display: block;
            }
     
        .subNav li a:hover {
            background: #d9ebeb;
            text-decoration: none;
            color: #be1622;
            }
     
        .subNav li.selectedPage a {
            background: #be1622 url('../images/subNav-li.png') 170px center no-repeat;
            cursor: default;
            color: #fff
            }
     
    /* ----------------------------------------------------------------
    CMS Specifc Styles
    -----------------------------------------------------------------*/
     
    .loginElement input[type="text"],
    .loginElement input[type="password"],
    .loginElement textarea {
        padding:7px; width:198px; border:1px solid #ddd; color:#333; font-size:1em; background: #f6f6f6; /* old browsers */
        background: -moz-linear-gradient(top, #f6f6f6 0%, #fbfbfb 48%); /* firefox */
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f6f6f6), color-stop(48%,#fbfbfb)); /* webkit */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbfbfb', endColorstr='#fbfbfb',GradientType=0 ); /* ie */ 
        border-radius:3px;
        -moz-border-radius:3px;
        -webkit-box-shadow: 0 1px -1px rgba(0,0,0,0.22);
        -webkit-transition: border 0.2s linear, -webkit-box-shadow 0.2s linear;
        }
     
    .loginElement input[type="text"]:focus,
    .loginElement input[type="password"]:focus,
    .loginElement textarea:focus {
        -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);    
        -moz-box-shadow: 0 0 8px rgba(82, 168, 236, 0.5);
        border-color: rgba(82, 168, 236, 0.75) !important;
        outline: medium none;
        }
     
    input.button {
        background: #77bbb3;
        border: none;
        padding: 5px;
        color: #fff;
        cursor: pointer;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        }
     
     
    /* Calendar */
     
    .calendarTitle td,
    .calendarDayHeader {background: #afafaf;}
     
    .eventsCalendar td {
        min-height: 50px; 
     
        border: 1px solid #afafaf !important;}
     
     
    .calendarWeekendDay,
    .calendarOtherMonthDay,
    .calendarToday {
        padding: 2px;
        border: 1px solid #afafaf !important;
        text-align: center;
        vertical-align: top;
        background: #efefef !important;
        padding: 5px;
        border-bottom: 1px solid #f4f4f4;
        }
     
    .calendarNextPrevious a {color: #77bbb3 !important}
     
    .eventsList li {margin-bottom: 20px;}
    .eventsList li a {font-size: 20px !important; font-weight: bold;}
    .eventsList li .eventDate {font-size: 12px !important;}
     
     
     
    /* Blog */
     
    #mainColumn .blogList h2.postTitle a {font-size: 18px !important;}
    #mainColumn .blogList .postInfo {font-size: 12px !important;}
     
    #subColumn .blogList h2.postTitle a {font-size: 12px !important;}
    #subColumn .blogList .postInfo {font-size: 12px !important;}
     
    #subColumn .archive {padding: 20px;}
    #subColumn .archive h2.postTitle {font-size: 12% !important;}
    #subColumn .archive .postInfo {font-size: 12px !important;}
     
     
    /* SHOPPING CART */
     
    /* listings */
        .productListing li {border-color: #F1F1F1;}
        .productListing li:last-child {border: none;}
        .productListing h3.productTitle {font-size: 14px !important;}
            .productListing h3.productTitle a {text-decoration: none;}
     
        .productType {font-style: italic; font-weight: normal;}
     
        .productImageContainer img {border: 2px solid #7c7c7c; vertical-align: baseline;}
     
        ul.productListing li span.productImageContainer {
        display: block;
        float: left;
        padding: 0 0px 5px 0 !important;
    }
     
        .productDescription {margin-bottom: 5px !important;}
     
        .productPriceContainer {padding-top: 0 !important;}
            .productPriceContainer .productPrice {font-size: 12px !important; font-weight: normal;}
     
        .productAddToCart, 
        .productDetailAddToCart {
            background: #77bbb3 !important;
            font-size: 12px !important;
            color: #fff !important;
            width: 85px;
            height: 26px;
            border: none;
            outline: none;
            cursor: pointer;
            margin: 10px 0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            }
     
     
        .productAddToCart:hover,
        .productDetailAddToCart:hover {background:#be1622 !important;}
     
     
     
     
     
     
     
     
     
     
     
     
    /* grid specific */
        .productListingGrid .product { width: 24% !important; padding-bottom: 0 !important; margin-bottom: 0 !important;}
            #homeProducts .productListingGrid .product {width: 24% !important;}
     
        .productListingGrid li {padding-right: 1% !important; height: 195px !important; }
            .productListingGrid li:last-child {padding-right: 0 !important;}
     
        .productListingGrid li:nth-child(2n+1) {clear: none !important;}
     
            .twoColumn .productListingGrid li:nth-child(4n) {clear: left !important;}
            .twoColumn .productListingGrid li:nth-child(5n) {clear: none !important;}
            #banners .productListingGrid li:nth-child(4n) {clear: none !important;}
            #banners .productListingGrid li:nth-child(5n) {clear: left !important;}
     
        .productListingGrid .productImageContainer {float: none !important; margin-bottom: 0px !important; padding-bottom: 0 !important}
            .productListingGrid .productImageContainer img, .productFeaturedImage img {border: 1px solid #77bbb3; vertical-align: baseline; margin-right:30px;}
            .productListingGrid .productImageContainer img:hover, .productFeaturedImage img:hover {border-color: #be1622;}
     
        .productListingGrid h3.productTitle a {display: block;}
     
        .productListingGrid .productAddToCart {display: none;}
     
     
    /* product details */
        .productDetailTitle {margin-bottom: 0 !important;}
     
        .productDetailType {font-style: italic; font-weight: normal;}
     
            .productType,
            .productVendor, 
            .productDetailType,
            .productDetailVendor {font-size: 14px !important;}
     
     
        .productDetailPriceContainer {margin: 10px 0 20px !important;}
            .productDetailPrice, .productDetailPriceCompare {font-size: 14px !important;}
     
        .productDetailImage img {border: 1px solid #77bbb3; margin-bottom: 10px !important;}
        .productDetailImage img:hover {border-color: #be1622;}
     
        .productDetailImageThumb img {border: 1px solid #77bbb3; margin: 5px 5px 0 0;}
        .productDetailImageThumb img:hover {border-color: #be1622;}
     
        .productDetailTitle {font-size: 18px; color: #77bbb3; margin-bottom: none !important;}
            .productDetailTitle a {color: #77bbb3; text-decoration: none;}
     
        .productDetailQuantity {font-weight: bold; margin-bottom: 10px !important;}
     
        .productDetailAddToCartContainer select,
        #productDetailCartQuantity {    
            font-family: 'helvetica neue';
            padding: 6px;
            font-size: 13px;
            border: 1px solid #c8c8c8 !important;
            background: #fff !important;
            color: #333;
            margin: 0 0 3px;
            -moz-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.10);
        }
     
        .productDetailDescriptionTitle {display: none; clear: both;}
        .productListingDescription {padding-bottom: 20px !important;}
     
     
     
     
     
     
     
     
     
     
     
     
     
        /* Cart Links  */
     
        .cart_andCheckout {
            float:right; 
            width: 240px;
            clear:none;
            position: relative;
            z-index: 100;
            margin-top: 25px;
            margin-right:20px;
            }
     
        .cartItems {
            float:right;
            clear:right;
            margin-top:20px;
            margin-bottom:10px;
            margin-right:20px;
            }
     
            .cartItems .number,
            .cart-total .number{
                font-size: 16px; 
                font-weight: bold; 
                padding: 0px 3px;
                color: #be1622;
                }
     
        .cart-link {
            background: url('../images/view-cart_original.png') no-repeat;
            height: 120px;
            width: 120px;
            float:left;
            }
     
        .checkout-link {
            background: url('../images/checkout_original.png') no-repeat;
            width: 120px;
            height: 120px;
            float:left;
            }
     
        .cart-link:hover {
            background: url('../images/view-cart_hover.png') no-repeat;
        }
        .checkout-link:hover {background: url('../images/checkout_hover.png') no-repeat;}
     
        .cartItemsCount {
            font-size: 15px !important;  
            line-height: 15px;  
            color: #be1622;    
            font-weight: 100;
            margin: -1px 7px 0 0;
            padding: 6px 10px;      
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            border-radius: 4px; 
            border: 10px solid #f2f9f9;
            width: 19% !important;  
            text-align: center !important;
            background: #e4f0f0; 
            }
     
    /* <textEditor> */
    .homeIcon{float:left;margin:0 10px 55px 0;}
    .imgspacing-upperleft{float:left;margin:0 10px 5px 0;}
    .imgspacing-upperright{float:right;margin:0 0 5px 10px;}
    .imgspacing-midleft{float:left;margin:5px 10px 5px 0;}
    .imgspacing-midright{float:right;margin:5px 0 5px 10px;}
    .imgspacing-lowleft{float:left;margin:5px 10px 0 0;}
    .imgspacing-lowright{float:right;margin:5px 0 0 10px;}
    .noborder{border:none !important;}
    .fontGeorgia{font-family:georgia,serif;}
    .fontTimes{font-family:"times new roman",times,serif;}
    .fontVerdana{font-family:verdana,sans-serif;}
    .fontArial{font-family:arial,sans-serif;}
    .fontTahoma{font-family:tahoma,sans-serif;}
    .fontHelvetica{font-family:Helvetica,arial,sans-serif;}
    .fontSize10{font-size:10px;}
    .fontSize11{font-size:11px;}
    .fontSize12{font-size:12px;}
    .fontSize13{font-size:13px;}
    .fontSize14{font-size:14px;}
    .fontSize15{font-size:15px;}
    .fontSize16{font-size:16px;}
    .fontSize17{font-size:17px;}
    .fontSize18{font-size:18px;}
    .fontSize19{font-size:19px;}
    .fontSize20{font-size:20px;}
    .fontSize21{font-size:21px;}
    .fontSize22{font-size:22px;}
    .fontSize23{font-size:23px;}
    .fontSize24{font-size:24px;}
    .fontSize25{font-size:25px;}
    .fontSize26{font-size:26px;}
    .fontSize27{font-size:27px;}
    .fontSize28{font-size:28px;}
    .fontSize29{font-size:29px;}
    .fontSize30{font-size:30px;}
    /* </textEditor> */


    Thanks!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •