/******************************************/ /*** Company: Sony Online Entertainment ***/ /*** Project: PSCE-PCStrorefront ***/ /*** Author: Michael Chagala ***/ /*** Created: February 7, 2007 ***/ /******************************************/ body{margin: 0;background: url(images/bodyBackground.jpg);font: 11px Verdana, sans-serif;color: #ffffff;} body img{border: 0;} /************************************************************************************************************************************/ /*** outer exists to contain the light-to-dark gradient that starts at the top of the design fading down into the body background ***/ /************************************************************************************************************************************/ .outer{width: 100%;height: 600px;background: url(images/bodyBackgroundTop.jpg) repeat-x;} /************************************************************************************************************************************/ /*** main contains the body of the page, and the light-to-dark radial gradient that fades in from the top-center of the design ***/ /************************************************************************************************************************************/ .main{width: 1023px;margin: 0 auto;background: url(images/mainBackground.jpg) no-repeat;} /************************************************************************************************************************************/ /*** headerNav is a definition list with the definition description set to display inline to give the partially horizontal layout ***/ /************************************************************************************************************************************/ .headerNav{padding: 0;margin: 17px 0 0 0;list-style-type: none;float: right;text-align: right;background: url(images/headerNav.gif) no-repeat 100% 0%;font-weight: bold;} .headerNav dt{font-size: 12px;} .headerNav dt a{color: #c6dcf9;} .headerNav dt a:hover{text-decoration: none;} .headerNav dt b{color: #a7d877;} .headerNav dd{display: inline;font-size: 13px;line-height: 22px;height: 22px;margin: 0 16px 0 0;} .headerNav dd a{color: #ffffff;text-decoration: none;} .headerNavAccManagement{background: url(images/headerNavAccManagement.gif) no-repeat 0% 0%;padding: 3px 0 3px 36px;} .headerNavViewCart{background: url(images/headerNavViewCart.gif) no-repeat 0% 0%;padding: 3px 0 3px 53px;} /************************************************************************************************************************************/ /*** leftColumn contains the left column of the design, nested inside are the left-nav, center column and one column spanning 100% ***/ /************************************************************************************************************************************/ .leftColumn{width: 768px;float: left;} /************************************************************************************************************************************/ /*** box768 is nested within leftColumn and spans 100% of the leftColumn width - left-nav and center column are not nested inside ***/ /************************************************************************************************************************************/ .box768{width: 768px;margin: 0 0 5px 0;} .box768Head{background: url(images/box768Head.gif) no-repeat;width: 759px;height: 18px;line-height: 18px;display: block;padding: 0 0 3px 0;margin: 0 4px 0 5px;} .box768 dt{width: 768px;} .box768 dd{background: url(pingLight.png);width: 768px;margin: 0;text-align: center;} * html .box768 dd{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pingLight.png', sizingMethod='scale');} .box768Top{height: 4px;background: url(box768Top.png) no-repeat;font-size: 1px;} * html .box768Top{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box768Top.png', sizingMethod='scale');} .box768Bottom{height: 4px;background: url(box768Bottom.png) no-repeat;font-size: 1px;} * html .box768Bottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box768Bottom.png', sizingMethod='scale');} /************************************************************************************************************************************/ /*** leftColumnLeft is nested within leftColumn, and is the column containing the left-nav and left-side advertisement banner ***/ /************************************************************************************************************************************/ .leftColumnLeft{width: 160px;float: left;margin: 0 5px 0 0;} /************************************************************************************************************************************/ /*** box160 is nested within leftColumnLeft, and is the container for the left-nav ***/ /************************************************************************************************************************************/ .box160{width: 160px;margin: 0 0 5px 0;} .box160Head{background: url(images/box160Head.gif) no-repeat;width: 151px;height: 18px;line-height: 17px;display: block;padding: 0 0 3px 0;margin: 0 4px 0 5px;text-indent: 20px;} .box160 dt{width: 160px;} .box160Top{height: 4px;background: url(box160Top.png) no-repeat;font-size: 1px;} * html .box160Top{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160Top.png', sizingMethod='scale');} .box160Bottom{height: 4px;background: url(box160Bottom.png) no-repeat;font-size: 1px;} * html .box160Bottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160Bottom.png', sizingMethod='scale');} .box160 dd{background: url(ping.png);width: 160px;margin: 0;} * html .box160 dd{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ping.png', sizingMethod='scale');} .box160 dd a{color: #ffffff;} .box160 dd a:hover{text-decoration: none;} .box160Light{position: relative;background: url(pingLight.png);width: 151px;margin: 0 4px 0 5px;display: block;line-height: 24px;text-indent: 7px;} * html .box160Light{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pingLight.png', sizingMethod='scale');} .box160Dark{position: relative;background: url(pingDark.png);width: 151px;margin: 0 4px 0 5px;display: block;line-height: 24px;text-indent: 7px;} * html .box160Dark{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pingDark.png', sizingMethod='scale');} .box160TopBottom{background: url(box160TopBottom.png) no-repeat;width: 151px;margin: 0 4px 0 5px;height: 5px;line-height: 5px;display: block;font-size: 1px;} * html .box160TopBottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160TopBottom.png', sizingMethod='scale');} .box160BottomTop{background: url(box160BottomTop.png) no-repeat 0% 100%;width: 151px;margin: 0 4px 0 5px;height: 5px;line-height: 5px;display: block;font-size: 1px;} * html .box160BottomTop{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160BottomTop.png', sizingMethod='scale');} .box160InnerTopLight{background: url(box160InnerTopLight.png) no-repeat;width: 151px;margin: 0 4px 0 5px;height: 2px;line-height: 2px;display: block;font-size: 1px;} * html .box160InnerTopLight{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160InnerTopLight.png', sizingMethod='scale');} .box160InnerTopDark{background: url(box160InnerTopDark.png) no-repeat;width: 151px;margin: 0 4px 0 5px;height: 2px;line-height: 2px;display: block;font-size: 1px;} * html .box160InnerTopDark{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160InnerTopDark.png', sizingMethod='scale');} .box160InnerBottomDark{background: url(box160InnerBottomDark.png) no-repeat;width: 151px;margin: 0 4px 0 5px;height: 2px;line-height: 2px;display: block;font-size: 1px;} * html .box160InnerBottomDark{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160InnerBottomDark.png', sizingMethod='scale');} .box160InnerBottomLight{background: url(box160InnerBottomLight.png) no-repeat;width: 151px;margin: 0 4px 0 5px;height: 2px;line-height: 2px;display: block;font-size: 1px;} * html .box160InnerBottomLight{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box160InnerBottomLight.png', sizingMethod='scale');} /************************************************************************************************************************************/ /*** leftColumnRight is nested within leftColumn, the main content area in the center of the design is nested in this container ***/ /************************************************************************************************************************************/ .leftColumnRight{width: 603px;float: left;} /************************************************************************************************************************************/ /*** box603 is nested within leftColumnRight, and is the container for the main content area in the center of the design ***/ /************************************************************************************************************************************/ .box603{width: 603px;margin: 0 0 5px 0;} .box603BreadcrumbHead{background: url(images/box603BreadcrumbHead.gif) no-repeat;width: 595px;height: 18px;line-height: 18px;display: block;margin: 0 4px 0 4px;} .box603Head{background: url(images/box603Head.gif) no-repeat;width: 593px;height: 29px;font-size: 12px;line-height: 29px;display: block;margin: 0 5px;color: #193c6d;font-weight: bold;text-indent: 28px;} .box603Top{height: 4px;background: url(box603Top.png) no-repeat;font-size: 1px;} * html .box603Top{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603Top.png', sizingMethod='scale');} .box603Bottom{height: 4px;background: url(box603Bottom.png) no-repeat;font-size: 1px;} * html .box603Bottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603Bottom.png', sizingMethod='scale');} .box603Inner{background: url(ping.png);width: 603px;} * html .box603Inner{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ping.png', sizingMethod='scale');} .box603ProdHead{width: 589px;margin: 22px 0 21px 14px;/* the following padding rule fixes an Opera bug */padding: 0 0 1px 0;} .box603ProdHeadThumb{float: left;width: 122px;height: 102px;background: url(prodThumbBackground_122x102.png) no-repeat;text-align: center;} * html .box603ProdHeadThumb{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='prodThumbBackground_122x102.png', sizingMethod='scale');} .box603ProdHeadThumb img{margin: 7px 0;} .box603ProdHeadDetails{float: left;width: 455px;margin: 0 0 0 12px;} .box603ProdHeadTable{width: 100%;} .box603ProdHeadTable th{color: #fff553;font-size: 14px;text-align: left;padding: 0 5px 0 0;vertical-align: top;} .box603ProdHeadTable td{width: 100%;} .box603ProdHeadTable td b{font-size: 12px;} .box603ProdList{width: 580px;padding: 0;margin: 6px 0 7px 17px;list-style-type: none;} .box603ProdList li{color: #c6dcf9;font-weight: bold;position: relative;} .box603ProdList li a{height: 19px;line-height: 19px;color: #c6dcf9;text-decoration: none;} .box603ProdList li a:hover{color: #fefefe;text-decoration: underline;} .box603ProdListNoBackground{padding: 0 0 0 11px;} .box603ProdListLight{background: url(box603ProdListBackground.png);width: 569px;padding: 0 0 0 11px;} * html .box603ProdListLight{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603ProdListBackground.png', sizingMethod='scale');} .box603ProdListTopBottom{background: url(box603ProdListTopBottom.png);height: 7px;line-height: 7px;font-size: 1px;} * html .box603ProdListTopBottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603ProdListTopBottom.png', sizingMethod='scale');} .box603ProdListBottomTop{background: url(box603ProdListBottomTop.png);height: 7px;line-height: 7px;font-size: 1px;} * html .box603ProdListBottomTop{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603ProdListBottomTop.png', sizingMethod='scale');} .box603ProdListHead{background: url(box603ProdListHead.png) no-repeat;height: 4px;line-height: 4px;font-size: 1px;} * html .box603ProdListHead{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603ProdListHead.png', sizingMethod='scale');} .box603ProdListBottom{background: url(box603ProdListbottom.png) no-repeat;height: 4px;line-height: 4px;font-size: 1px;} * html .box603ProdListBottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603ProdListbottom.png', sizingMethod='scale');} .box603ProdListLight span,.box603ProdListNoBackground span{position: absolute;top: 0;right: 0;background: url(images/box603ProdListAddToCartIcon.gif) no-repeat 0% 0%;height: 19px;line-height: 19px;padding: 0 0 0 22px;margin: 0 8px 0 0;} * html .box603ProdListNoBackground span{top: -2px;} .box603ProdListLight span a b,.box603ProdListNoBackground span a b{background: url(images/box603ProdListAddToCartBG.gif) no-repeat 100% 0%;padding: 3px 7px;} .box603CategoryTitleTable{width: 556px;margin: 26px 0 0 26px;} .box603CategoryTitleTable tbody th{width: 140px;height: 102px;background: url(prodThumbBackground_122x102.png) no-repeat;text-align: left;padding: 0 0 0 9px;} * html .box603CategoryTitleTable tbody th{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='prodThumbBackground_122x102.png', sizingMethod='crop');} .box603CategoryTitleTable tbody td{width: 122px;vertical-align: top;} .box603CategoryTitleTable tbody td a{padding: 0 0 26px 22px;background: url(images/box603CategoryTitleIconBl.gif) no-repeat 3px 3px;color: #c6dcf9;font-weight: bold;display: block;} .box603CategoryTitleTable tbody td a:hover{color: #ffffff;background: url(images/box603CategoryTitleIconWh.gif) no-repeat 3px 3px;} .box603Inner p{padding: 0 0 9px 0;margin: 0 17px;font-size: 11px;line-height: 16px;} .box603CartList{width: 590px;padding: 0;margin: 16px 6px 20px 7px;list-style-type: none;} .box603CartList li{position: relative;} .box603CartList li b{line-height: 19px;} .box603CartList li a{height: 19px;line-height: 19px;font-weight: bold;width: 73px;color: #ffffff;background: url(images/box603CartListRemove.gif);padding: 0 0 0 31px;margin: 0 14px 0 0;text-decoration: none;display: block;float: left;} .box603CartList li a:hover{color: #ffffff;text-decoration: underline;} .box603CartList li span{position: absolute;top: 0;right: 5px;line-height: 19px;font-weight: bold;} .box603CartListNoBackground{width: 579px;padding: 0 0 0 11px;} .box603CartListLight{background: url(box603ProdListBackground.png);width: 579px;padding: 0 0 0 11px;} * html .box603CartListLight{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603ProdListBackground.png', sizingMethod='scale');} .box603CartListTopBottom{background: url(box603CartListTopBottom.png);height: 7px;line-height: 7px;font-size: 1px;} * html .box603CartListTopBottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603CartListTopBottom.png', sizingMethod='scale');} .box603CartListBottomTop{background: url(box603CartListBottomTop.png);height: 7px;line-height: 7px;font-size: 1px;} * html .box603CartListBottomTop{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603CartListBottomTop.png', sizingMethod='scale');} .box603CartListHead{background: url(box603CartListHead.png) no-repeat;height: 4px;line-height: 4px;font-size: 1px;} * html .box603CartListHead{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603CartListHead.png', sizingMethod='scale');} .box603CartListBottom{background: url(box603CartListbottom.png) no-repeat;height: 4px;line-height: 4px;font-size: 1px;} * html .box603CartListBottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box603CartListbottom.png', sizingMethod='scale');} /************************************************************************************************************************************/ /*** rightColumn contains the right column of the design, nested inside are the right-nav and and right-side advertisement banner ***/ /************************************************************************************************************************************/ .rightColumn{width: 250px;float: left;margin: 0 0 0 5px;} /************************************************************************************************************************************/ /*** box250 is nested within rightColumn, and is the container for the right-nav ***/ /************************************************************************************************************************************/ .box250{width: 250px;margin: 0 0 5px 0;} .box250Head{background: url(images/box250Head.gif) no-repeat;width: 239px;height: 17px;line-height: 16px;font-size: 12px;display: block;padding: 0 0 3px 0;margin: 0 6px 0 5px;text-indent: 7px;} .box250 dt{width: 250px;} .box250 dd i{font-style: normal;color: #fff553;} .box250Top{height: 4px;background: url(box250Top.png) no-repeat;font-size: 1px;} * html .box250Top{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box250Top.png', sizingMethod='scale');} .box250Bottom{height: 4px;background: url(box250Bottom.png) no-repeat;font-size: 1px;} * html .box250Bottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box250Bottom.png', sizingMethod='scale');} .box250 dd{background: url(ping.png);width: 250px;margin: 0;} * html .box250 dd{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='ping.png', sizingMethod='scale');} .box250 dd a{color: #ffffff;} .box250 dd a:hover{text-decoration: none;} .box250Light{position: relative;background: url(pingLight.png);width: 239px;margin: 0 6px 0 5px;display: block;line-height: 14px;text-indent: 7px;} * html .box250Light{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pingLight.png', sizingMethod='scale');} .box250Light span,.box250Dark span{position: absolute;top: 0;right: 5px;} .box250Dark{position: relative;background: url(pingDark.png);width: 239px;margin: 0 6px 0 5px;display: block;line-height: 14px;text-indent: 7px;} * html .box250Dark{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='pingDark.png', sizingMethod='scale');} .box250TopBottom{background: url(box250TopBottom.png) no-repeat;width: 239px;margin: 0 6px 0 5px;height: 5px;line-height: 5px;display: block;font-size: 1px;} * html .box250TopBottom{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box250TopBottom.png', sizingMethod='scale');} .box250BottomTop{background: url(box250BottomTop.png) no-repeat 0% 100%;width: 239px;margin: 0 6px 0 5px;height: 5px;line-height: 5px;display: block;font-size: 1px;} * html .box250BottomTop{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box250BottomTop.png', sizingMethod='scale');} .box250InnerTopLight{background: url(box250InnerTopLight.png) no-repeat;width: 239px;margin: 0 6px 0 5px;height: 2px;line-height: 2px;display: block;font-size: 1px;} * html .box250InnerTopLight{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box250InnerTopLight.png', sizingMethod='scale');} .box250InnerBottomDark{background: url(box250InnerBottomDark.png) no-repeat;width: 239px;margin: 0 6px 0 5px;height: 2px;line-height: 2px;display: block;font-size: 1px;} * html .box250InnerBottomDark{background: none;filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='box250InnerBottomDark.png', sizingMethod='scale');} /************************************************************************************************************************************/ /*** footerNav is a list, the list items set to display inline for a horizontal layout, the last item is used only for background ***/ /************************************************************************************************************************************/ .footerNav{padding: 0;margin: 17px 0;list-style-type: none;text-align: center;} .footerNav li{display: inline;font-size: 13px;font-weight: bold;background: url(images/footerNavDots.gif) no-repeat 0% 0%;} .footerNav li a{color: #c6dcf9;padding: 0 16px 0 23px;text-decoration: none;} /************************************************************************************************************************************/ /*** The following rules are not specific to any one page, container, or do not logically fit into one of the categories above ***/ /************************************************************************************************************************************/ .c{clear: both;} .breadcrumb{padding: 0;margin: 0 3px 0 27px;list-style-type: none;text-align: left;height: 18px;font-size: 12px;} .breadcrumb li{display: inline;font-size: 11px;font-weight: bold;} .breadcrumb li a{background: url(images/breadcrumb.gif) no-repeat 100% 0%;color: #c6dcf9;line-height: 18px;padding: 3px 28px 2px 0;} .dottedLine{background: url(images/dot.gif) repeat-x;height: 4px;font-size: 1px;margin: 0 auto;} .dottedLine581{width: 581px;} .addToCart{background: url(images/box603ProdListAddToCartIcon.gif) no-repeat 0% 50%;float: left;padding: 0px 0 0 22px;text-decoration: none;font-size: 11px;} .addToCart a{background: url(images/box603ProdListAddToCartBG.gif) no-repeat 100% 50%;float: left;color: #ffffff;padding: 3px 7px 3px 7px;text-decoration: none;} .addToCart a:hover{text-decoration: underline;color: #c6dcf9;}