@charset "UTF-8"; /* Theme Name: IndiePix 2010 white Hierarchy: This is the main css for indiepixfilms.com. Should be listed first Description: Basic idea is a column of white that encompasses all page content. This overlays a div of background image that stretches to match the browser width and height. Author: Kyle Walters Date: early 2010 NEEDS: indiepix_main_ie6.css */ /* Page Construction - Basic */ html{ font-size:100%; } /*this sets the font size to 1em (which is 16px) for IE */ body{ font-family:Helvetica, Arial, sans-serif; font-size: 12px; font-style:normal; text-align:left; color:#2E3131; padding:0; margin:0; } /*page structure with STRETCHED bg IMAGE */ .indiepix-singlecolumn { padding-left: 30px; padding-right: 30px; text-align: center; } #bg { height:100%; position:fixed; left:0; top:0; width:100%; overflow:hidden; } #bg img { min-height:100%; min-width:100%; } #page_allscreen { /* this makes all page content centerable and above the background image div mostl*/ position:relative; margin:0 auto; z-index:10; } #page_outer { /*this is the border on the sides */ background: url(/image/230336) repeat /*#A2AEAE*/; width: 1000px; margin:0 auto; } #page_inner { width:950px; margin:0 auto; padding: 0px; background: #fff; border-left:1px solid #2E3131; border-right:1px solid #2E3131; } /*page structure GENERAL */ #page_wrapper { width: 950px; position:relative; margin: 0 auto; /*overflow:hidden;*/ } #content { padding: 30px 0px 60px; position:relative; } .column_thin { float:left; margin-right: 15px; width: 185px; } .column_wide { float: left; width: 750px; } .clear_both { clear: both; } .clear_right { clear: right; } .clear_left { clear: left; } .spacer5h { height:5px; } .spacer10h { height:10px; } .spacer15h { height:15px; } .spacer20h { height:20px; } .spacer25h { height:25px; } .spacer30h { height:30px; } .spacer35h { height:35px; } .spacer40h { height:40px; } .hidden {display:none;} /*** GENERAL PAGE ELEMENTS ***/ /* links */ a { color:#7DA0A1; text-decoration:none; } a:visited { color: #9FADAE;/* a faded version of #2E3131 */ text-decoration:none; } a:hover{ color:#7DA0A1; text-decoration:underline; } .nolink { color: #9FADAE; } /* headings */ h1{ font-weight:normal; font-size:35px; letter-spacing: normal; margin:25px 0 25px; } h1 a{ color: #2E3131; text-decoration:none; } h1 a:visited { color: #2E3131; text-decoration:none; } h1 a:hover{ color: #2E3131; text-decoration:underline; } h2{ font-weight:normal; font-size:30px; color: #B2CDCD; background-color: #2E3131; letter-spacing: normal; margin:24px -30px 15px -30px; padding: 10px 30px 7px 30px; } .h2short { margin:24px 0px 15px 0px; padding: 10px 30px 7px 30px; } .h2long { margin:24px -60px 15px -60px; padding: 10px 60px 7px 60px; } .h2_60left { padding-left: 60px; } h2 a { color: #B2CDCD; text-decoration:none; } h2 a:visited { color: #B2CDCD; text-decoration:none; } h2 a:hover{ color:#7DA0A1; text-decoration:none; } h3{ font-weight:normal; letter-spacing: normal; margin:5px 0px 2px; } h3 a { color: #2E3131; text-decoration:none; } h3 a:visited { color: #2E3131; text-decoration:none; } h3 a:hover{ text-decoration:underline; color:#7DA0A1; } h4{ font-weight:bold; /*margin:.7em 0 .2em;*/ } .h4_bluebackground { font-size:16px; padding: 8px 16px; background-color: #DAEBEA; font-weight: normal; text-transform:uppercase; margin-bottom: 3px; margin-top: 0px; } .h4_medgreenbackground { font-size:16px; padding: 8px 16px; background-color: #B2CDCD; font-weight: normal; text-transform:uppercase; margin-bottom: 3px; margin-top: 0px; } h5{ font-weight:bold; margin:.5em 0 .2em; } h6{ font-weight:normal; text-transform:uppercase; /*margin:.5em 0 .2em;*/ } /* tables table{ margin:.5em 0 1em; text-align: right; font-size:1em; } table td{text-align:left; padding:5px 10px; border-bottom:1px solid #DAEBEA;} table th{background-color:#2e3131;color:#fff;text-transform:uppercase; font-weight:normal; padding: 8px 10px; text-align:left;} table td{background-color:#fff;} table th a{color:#d6f325;} table th a:hover{color:#fff;} table tr.even td{background-color:#ddd;} tr:hover td{background-color:#DAEBEA;} table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{ border:0; background:none; background-color:transparent; text-align: left; }*/ table{ margin:.5em 0 1em; text-align: right; font-size:1em; } table td{text-align:left; padding:5px 10px; border-bottom:1px solid #DAEBEA;} table th{background-color:#2e3131;color:#fff;text-transform:uppercase; font-weight:normal; padding: 8px 10px; text-align:left;} table td{background-color:#fefefe;} table th a{color:#B2CDCD;} table th a:hover{color:#fff;} table tr.even td{background-color:#ddd;} table.tablehover tr:hover td{background-color:#DAEBEA;} table.tablehover tr.tablerowNOhover:hover td{background-color:#fefefe;} table.tablehover tr.tablerowNOhover:hover td tr.tablerowhover:hover td{background-color:#DAEBEA;} table.tablehover tr.tablerowNOhover:hover td table.tablehover tr:hover td{background-color:#DAEBEA;} tr.tablerowhover:hover td{background-color:#DAEBEA;} table.nostyle td,table.nostyle th,table.nostyle tr.even td,table.nostyle tr:hover td{ border:0; background:none; background-color:transparent; text-align: left; } table.nostylenospace, table.nostylenospace td,table.nostylenospace th,table.nostylenospace tr.even td,table.nostylenospace tr:hover td{ border:0; background:none; background-color:transparent; text-align: left; margin:0; padding:0; } /* forms */ input,textarea,select{font-size:1em; margin:.2em 0; font-family:Helvetica, Arial, sans-serif;} input,textarea{padding:.2em .4em;margin:0 2px 4px 2px;} input.radio,input.checkbox{background-color:#fff;padding:2px;} form label{font-weight:normal;margin:0 2px;} fieldset{padding:.8em;border:1px solid #ddd;background-color:#fff;margin:1em 0;} legend{padding:2px 15px 10px;text-transform:uppercase;font-style:italic;font-size:115%;background-color:#fff;border-top:1px solid #ddd;} /* lists */ ul,ol{ margin:0.4em 0 1em 0; line-height:1.5em; /*padding: 0px;*/ } ul li,ol li{ margin-left:0.5em; list-style-image:url(/image/230337); } ul li a, ol li a{ color: #2E3131; text-decoration:none; } ul li a:visited, ol li a:visited{ color: #2E3131; text-decoration:none; } ul li a:hover, ol li a:hover{ color: #2E3131; text-decoration:underline; } dl{padding:.3em 0 .8em;} dt{font-weight:bold;text-decoration:underline;} dd{} /* other */ p{ margin:5px 0 4px; line-height:150%; } img{ border:0; } hr{ border:0px; border-top:1px solid #7DA0A1; height:1px; margin: 12px 0px; } small{font-size:80%;} blockquote{ margin:15px 0; padding:5px 0 0 8px; min-height: 40px; border-left: 15px solid #B3CECE; font-style:italic; color:#2E3131; } blockquote p{ padding:0; margin:0px 2px; } blockquote blockquote{margin:1em 0 1em;} /********************* FUN? FONT STYLES *********************/ .pink_big { font-size:175%; color: #CA628B; font-weight:bold; } .pink_bignormal { font-size:175%; color: #CA628B; font-weight:normal; } .pink_normal { color: #CA628B; font-weight:normal; padding:0px 3px; } .pink_bold { color: #CA628B; font-weight:bold; padding:0px 3px; } .green_bold { font-weight: bold; color: #7DA0A1; } .green_bigbold { font-weight: bold; color: #7DA0A1; font-size:175%; } .green_big { font-weight: normal; color: #7DA0A1; font-size:175%; } .green_normal { font-weight: normal; color: #7DA0A1; } .btn_action { margin: 10px 0px; font-size: 0.8em; } .status { font-style:italic; font-size: 0.8em; } /******************** btns *******************/ .btn_roundedcorners a { display: block; color: #FFF; background: #2E3131; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; border-radius: 0.8em; -moz-border-radius: 0.8em; -webkit-border-radius: 0.8em; } .btn_action a { display: block; color: #FFF; background: #2E3131; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; /*border-radius: 1em; -moz-border-radius: 1em; -webkit-border-radius: 1em;*/ } .btn_action a:visited { display: block; color: #FFF; background: #2E3131; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action a:hover { background: #DAEBEA; color: #2E3131; border-color: #2E3131; text-decoration:none; } .btn_action_darkgreen a { display: block; color: #FFF; background: #7DA0A1; padding: 0.8em 0.4em; border:1px solid #2e3131; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_darkgreen a:visited { display: block; color: #FFF; background: #7DA0A1; padding: 0.8em 0.4em; border:1px solid #2e3131; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_darkgreen a:hover { background: #DAEBEA; color: #2E3131; border-color: #2E3131; text-decoration:none; } .btn_action_green a { display: block; color: #2E3131; background: #DAEBEA; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_green a:visited { display: block; color: #2E3131; background: #DAEBEA; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_green a:hover { background: #7DA0A1; color: #fefefe; border-color: #2E3131; text-decoration:none; } .btn_action_darkpink a { display: block; color: #FFF; background: #CA628B; padding: 0.8em 0.4em; border:1px solid #2e3131; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_darkpink a:visited { display: block; color: #FFF; background: #CA628B; padding: 0.8em 0.4em; border:1px solid #2e3131; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_darkpink a:hover { background: #EFD0DC; color: #2E3131; border-color: #2E3131; text-decoration:none; } .btn_action_pink a { display: block; color: #2E3131; background: #EFD0DC; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_pink a:visited { display: block; color: #2E3131; background: #EFD0DC; padding: 0.8em 0.4em; border:1px solid #9FADAE; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_pink a:hover { background: #fefefe; color: #2E3131; border-color: #2E3131; text-decoration:none; } .btn_action_white2green a { display: block; color: #2e3131; background: #fefefe; padding: 0.8em 0.4em; border:1px solid #2e3131; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_white2green a:visited { display: block; color: #2e3131; background: #fefefe; padding: 0.8em 0.4em; border:1px solid #2e3131; text-transform: uppercase; text-decoration:none; text-align:center; } .btn_action_white2green a:hover { background: #DAEBEA; color: #2E3131; border-color: #2E3131; text-decoration:none; } /****************** HOLDERS ******************/ .holder_pink { background-color:#EFD0DC; padding: 10px 20px; } .holder_teal { background-color: #DAEBEA; padding: 10px 20px; } .holder_whitedarkborder { background-color: #fefefe; padding: 10px 20px; border: 1px solid #2e3131; } /****************** RELATED MEDIA ******************/ .movie_row { clear:both; /*width:98%;*/ margin: 0px auto; background-color: #fefefe; border: 1px solid #9FADAE; position: relative; } .movie_row h2 { margin:0px 0px 0px -15px; padding: 7px 30px 7px 30px; } .movie_row h2{ font-weight: lighter; text-transform:lowercase; font-size:20px; color: #2e3131; background-color: #E2E7EA; letter-spacing: 1px; margin:0px 0px 0px 0px; padding-left: 20px; } .movie_row h2 span { float: right; } a.movie_row_title:link, a.movie_row_title:visited { color: #2e3131; /*width: 100%; */ display: block; } a.movie_row_title:active, a.movie_row_title:hover { color: #2e3131; text-decoration: underline; } .movie_row_text { margin:0px 0px 0px -15px; font-size: 12px; font-style:italic; } .movie_row_holder { padding: 20px 25px 0px 25px; width: 92%; margin: 0 auto; position:relative; } /*.movie_row_films { height: 150px; width: 1375px;position: relative; padding:1px; overflow-y: hidden; }*/ .movie_row_film{ float:left; position: relative; width: 152px; margin: 0px 10px; padding-bottom: 20px; font-size: 11px; text-align: center; z-index: 40; } .movie_row_film h3 { font-size: 14px; } .movie_row_film_cover { width: 112px; height: 155px; overflow:hidden; margin: 0 auto; margin-bottom: 1px; z-index:40; } span.related_btn_wrap { width: 112px; display: block; margin: 0px auto; color: #fefefe; } .btn { display:block; border: 1px solid #2e3131; font-size: 14px; font-weight: normal; background: url(http://www.indiepixfilms.com/image/232511); letter-spacing: 2px; text-align:center; } a.btn:hover {background-position:0 -440px;} .btnhover { /*this should be the same as a.btn:hover!!!!*/ background-position:0 -440px;} .btn .ins { cursor: pointer; display: block; overflow: hidden; } a.btn { } /* btn styles */ .btn_dvd { background-color: #2e3131; } a.btn_dvd:link, a.btn_dvd:visited { color: #fefefe; text-decoration:none; } .btn_ondemand { background-color: #CA628B; } a.btn_ondemand:link, a.btn_ondemand:visited { color: #fefefe; text-decoration:none; } .btn_download { background-color: #7DA0A1; } a.btn_download:link, a.btn_download:visited { color: #fefefe; text-decoration:none; } .btn_trailer { background-color: #fefefe; } a.btn_trailer:link, a.btn_trailer:visited { color: #2e3131; text-decoration:none; } .btn_info { /*background-color: #9FADAE;*/ background-color: #fefefe; } a.btn_info:link, a.btn_info:visited { /*color: #fefefe;*/ color: #2e3131; text-decoration:none; } .btn_boxoffice { background-color: #2e3131; } a.btn_boxoffice:link, a.btn_boxoffice:visited { color: #fefefe; text-decoration:none; } /* btn widths */ .btn112 { width: 110px; margin: 0 auto; /*border: 1px solid #9FADAE;*/ line-height:36px; } .btn112 .ins { height: 24px; line-height: 24px; } .btn56 { width: 55px; margin: 0 auto; /*border: 1px solid #9FADAE;*/ line-height:36px; float: left; display:block; } .btn56 .ins { height: 24px; line-height: 24px; } .btn36 { width: 36px; margin: 0 auto; /*border: 1px solid #9FADAE;*/ line-height:36px; float: left; display:block; overflow:hidden; font-size: 12px; letter-spacing:1px; } .btn36 .ins { height: 24px; line-height: 24px; } .btnFC { width: 30.5%; float:left; display:block; line-height: 24px; margin: 0 1%; text-transform: lowercase; height: 24px; overflow: hidden; /*font-weight: 100;*/ } .btnSF { width: 188px; float:left; display:block; line-height: 24px; height: 24px; overflow: hidden; /*font-weight: 100;*/ margin-bottom: 1px; } .btnSFmain { width: 188px; float:left; display:block; line-height: 56px; height: 56px; overflow: hidden; /*font-weight: 100;*/ margin-bottom: 1px; font-size: 2em; font-weight: 100; } /* btn orientations */ .btnR { border-left-width: 0px; } .btnL { border-right-width: 0px; } .btnMID36 { width: 38px; border-left-width:0px; border-right-width: 0px; } .btnFULL .movie_row_film .related_film_title { clear: both; display: block; margin: 5px 0px 0px; } .movie_row_film .related_film_byline h3{ display: block; line-height: 12px; font-size: 10px; } .movie_row_collections { width: 764px; float: left; } .movie_row_collection{ float:left; position: relative; width: 250px; font-size: 11px; } .movie_row_collection img{ border:1px #2e3131 solid; margin-bottom: 5px; } .movie_row_collection a { color:#FFFFFF; text-decoration:none; } .movie_row_collection a:visited { color:#FFFFFF; text-decoration:none; } .movie_row_collection a:hover { color:#FFFFFF; text-decoration:underline; } .movie_row_film:hover .btnL {} /*************************************** =cluetipClass: 'default' THIS IS SYNOP POPUP -------------------------------------- */ /* global */ #cluetip-close img { border: 0; } #cluetip-title { overflow: hidden; } #cluetip-title #cluetip-close { float: right; position: relative; } #cluetip-waitimage { width: 43px; height: 11px; position: absolute; background-image: url(/image/232514); } .cluetip-arrows { display: none; position: absolute; top: 0; left: -11px; height: 200px; width: 11px; background-repeat: no-repeat; background-position: 0 0; } #cluetip-extra { display: none; } /* default */ .cluetip-default { background-color: #e2e7ea; } .cluetip-default #cluetip-outer { position: relative; margin: 0; background-color: #e2e7ea; } .cluetip-default h3#cluetip-title { margin: 0 0 5px; padding: 8px 10px 4px; font-size: 1.1em; font-weight: normal; background-color: #2e3131; color: #fefefe; text-transform: uppercase; letter-spacing: 1px; } .cluetip-default #cluetip-title a { color: #d9d9c2; font-size: 0.95em; } .cluetip-default #cluetip-inner { padding: 10px; } .cluetip-default div#cluetip-close { text-align: right; margin: 0 5px 5px; color: #900; } /* default arrows */ .clue-right-default .cluetip-arrows { background-image: url(/image/232577); background-position: 0 85; } .clue-left-default .cluetip-arrows { background-image: url(/image/232578); background-position: 0 85; left: 100%; margin-right: -11px; } .clue-top-default .cluetip-arrows { background-image: url(images/darrowdown.gif); top: 100%; left: 50%; margin-left: -11px; height: 11px; width: 22px; } .clue-bottom-default .cluetip-arrows { background-image: url(images/darrowup.gif); top: -11px; left: 50%; margin-left: -11px; height: 11px; width: 22px; } /* Synop popup styling */ .synop_popup { font-size: 12px; line-height: 150%; } .synop_popup_right { } .synop_popup span { display: block; } .synopop_by { } .synop_pricetable { width: 100%; } .synop_pricetable_left { width: 90px; text-align: right !important; font-weight: bold; } .synop_pricetable_right { text-align: left !important; padding-left: 5px !important; } .synopop_runtime { font-style:italic; } .synopop_synopsis { padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid #9FADAE; } /********* SIDEBAR *********/ #sidebar { } .sidebar_images { } .sidebar_images img { margin-bottom: 1px; } .sidebar_list { background-color: #e2e7ea; padding: 10px; } .sidebar_list ul, .sidebar_list ul ul { list-style: none; margin: 0; padding: 0; } .sidebar_list ul { margin-left: -20px; } .sidebar_list ul li, .sidebar_list ul ul li { list-style: none; margin: 0; } .sidebar_list li { padding-left: 24px; } .sidebar_list li { list-style-image: none !important; } .sidebar_list li.folderopen > a { list-style: none; background: url(/image/232555) no-repeat top left; padding-left: 24px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } .sidebar_list li.folderopen { margin-top: 15px; } .sidebar_list li.folderclosed > a { list-style: none; background: url(/image/232555) no-repeat 0px -18px; padding-left: 24px; padding-top: 4px; text-transform: uppercase; font-weight: bold; letter-spacing: 1px; } .sidebar_list li.folderclosed { margin-top: 15px; } .sidebar_list a { color: #2e3131; cursor: pointer; text-decoration: none; } .sidebar_list a:hover { text-decoration: underline; } /****************** RELATED MEDIA ******************/ .related_media { clear:both; width:100%; margin: 30px 0px; background-color: #4E5354; } .related_media h2 { margin:0px 0px 0px -15px; padding: 7px 30px 7px 30px; } .related_media h2{ font-weight: normal; font-size:20px; color: #FFF; background-color: #2E3131; letter-spacing: normal; margin:0px 0px 0px 0px; padding-left: 20px; } .related_media_holder { padding:25px; width: 92%; } .customscroll_films { /* Typical fixed height and fixed width example */ width: 100%; height: 170px; overflow: auto; /* IE overflow fix, position must be relative or absolute*/ position: relative; margin: 0em auto; padding: 0px; } .customscroll_collections { /* Typical fixed height and fixed width example */ width: 100%; height: 195px; overflow: auto; /* IE overflow fix, position must be relative or absolute*/ position: relative; margin: 0em auto; padding: 0px; } .related_media_films { height: 150px; width: 1375px;position: relative; padding:1px; overflow-y: hidden; } .related_media_film{ float:left; position: relative; width: 125px; padding-bottom: 20px; font-size: 11px; } .related_media_film img{ border:1px #B2CDCD solid; margin-bottom: 5px; } .related_media_film a { color:#FFFFFF; text-decoration:none; } .related_media_film a:visited { color:#FFFFFF; text-decoration:none; } .related_media_film a:hover { color:#FFFFFF; text-decoration:underline; } .related_media_collections { width: 764px; float: left; } .related_media_collection{ float:left; position: relative; width: 250px; font-size: 11px; } .related_media_collection img{ border:1px #B2CDCD solid; margin-bottom: 5px; } .related_media_collection a { color:#FFFFFF; text-decoration:none; } .related_media_collection a:visited { color:#FFFFFF; text-decoration:none; } .related_media_collection a:hover { color:#FFFFFF; text-decoration:underline; } /******************* FLEXSCROLL bars *******************/ .scrollgeneric { line-height: 1px; font-size: 1px; position: absolute; top: 0; left: 0; } .vscrollerbase { width: 10px; background-color: #DCECEB; } .vscrollerbar { width: 10px; background-color: #2e3131; } .hscrollerbase { height: 10px; background-color: #DCECEB; } .hscrollerbar { height: 10px; background-color: #2e3131; } .scrollerjogbox { width: 10px; height: 10px; top: auto; left: auto; bottom: 0px; right: 0px; background-color: gray; } .hscrollerbar { /* Main body of horizontal scrollbar */ background: #2e3131 url(/image/230580) 0px -30px repeat-x; } .vscrollerbar { /* Main body of vertical scrollbar */ background: #99CBCB url(/image/230579) -15px 0px repeat-y; } .vscrollerbar, .hscrollerbar { /*padding information of these elements are only used for padding of the scroll-bar with respect to the scroll-base, the padding will automatically be turned off by the script The greater the padding, the further away the scrollbar stops away from both ends. This may be used, for example, to provide space for our "faux" arrow heads. */ padding: 0px; /* z-index for scrollbars define the z-index for the content, if left at "auto" or "0", they are set to "2", if defined, content z-index is set the same as the scrollbars. Version 1.7.5 and higher does not need this setting to function properly, earlier versions need this for proper operation */ z-index: 2; } .vscrollerbarbeg { /* Top image holder for vertical scrollbar*/ background: url(/image/230579) -45px -30px no-repeat; width: 15px; /* Height of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top image to repeat on certain sizes. In this style, we do not need our script to strech the vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */ height: 15px !important; } .vscrollerbarend { /* Bottom image holder for vertical scrollbar*/ background: url(/image/230579) -45px 0px no-repeat; width: 15px; height: 15px; } .hscrollerbarbeg { /* Left image holder for horizontal scrollbar */ background: url(/image/230579) -60px -15px no-repeat; height: 15px; /* Width of this class is normally set by the script, to fit the scrollbar, but Webkit (Safari's rendering engine) currently has a bug on no-repeat for negatively positioned backgrounds, causing the top image to repeat on certain sizes. In this style, we do not need our script to strech the vscrollerbarbeg, so we can fix the problem by forcing the size using CSS with an !important decleration: */ width: 15px !important; } .hscrollerbarend { /* Right image holder for horizontal scrollbar */ background: url(/image/230579) -30px -15px no-repeat; height: 15px; width: 15px; } .scrollerjogbox { /* Scroller jog (scroll-pan) image holder, only visible when both scrollbars are used */ background: #4E727C url(/image/230580) 0px 0px; width: 15px; height: 15px; top: auto; left: auto; bottom: 0px; right: 0px; } .hotpinktextbold { font-weight: bold; color: #f8306f !important; font-size: 13px; } .hotpinktext { color: #f8306f; }