/* This stylesheet was created by Paul 25/2/2009 for the wallpaper rolls module only. The HTML must contain a div with */
/* a class of "rolls-module", with another div nested inside this. Any text or images which should be positioned over */
/* the wallpapers goes within there, along with the GetWallpaperRollsDisplay PHP call. */

/*The outer div is positioned relatively so things can be absolutely positioned within it*/
div.rolls-module
	{
	position: relative;
	width: 475px;
	height: 155px;
	z-index: 1;/*MS: Establishes a new z-index context*/
	}

/*All styles which make the module shorter go within div.rolls-module-short. This class is at the same level as div.rolls-module above*/
div.rolls-module-short
	{
	height: 85px;
	}

/*IE 6 requires two relative nested divs before applying an absolute position*/
div.rolls-module div.inner
	{
	position: relative;
	height: 155px;
	/*This is for the shadow on the right of the rolls module*/
	background: transparent url(../images/common/dropshadow-right.gif) top right repeat-y;
	}

div.rolls-module-short div.inner
	{
	height: 85px;
	}

/*To get the top corner, this goes within the div above*/
div.rolls-module div.inner div.rolls-corner-top
	{
	position: absolute;
	height: 10px;
	top: 0px;
	left: 0px;
	}

/*Likewise for the bottom corner*/
div.rolls-module div.inner div.rolls-corner-bottom
	{
	position: absolute;
	height: 15px;
	bottom: 0px;
	left: 0px;
	}
	
div.rolls-module div.inner div.img-block
	{
	position: absolute;
	top: 0px;
	left: 0px;
	}

/*These are the divs that contain each image*/
div.rolls-module div.inner div.img-block div.rolls-slot-img
	{
	float: left;
	display: inline;
	overflow: hidden;
	width: 32px;
	height: 150px;
	}
	
div.rolls-module div.inner div.img-block div.rolls-slot-img-1, div.rolls-module div.inner div.img-block div.rolls-slot-img-15
	{
	width: 27px;
	}
	
/*The first and 15th images have margins so that they will fit*/
div.rolls-module div.inner div.img-block div.rolls-slot-img-1 img {margin-left: -5px;}
div.rolls-module div.inner div.img-block div.rolls-slot-img-15 img {margin-right: -5px;}
	
div.rolls-module-short div.inner div.img-block div.rolls-slot-img
	{
	height: 80px;
	}
	
/*In case they filled in extra ones (originally there were 17 across*/
div.rolls-module div.inner div.img-block div.rolls-slot-img-16 {display: none;}
div.rolls-module div.inner div.img-block div.rolls-slot-img-17 {display: none;}
div.rolls-module div.inner div.img-block div.rolls-slot-img-18 {display: none;}
div.rolls-module div.inner div.img-block div.rolls-slot-img-19 {display: none;}
div.rolls-module div.inner div.img-block div.rolls-slot-img-20 {display: none;}

/*These are the divs that contain each link and HTML box*/
div.rolls-module div.inner div.rolls-slot
	{
	float: left;/*Added to allow rollover boxes to position themselves properly*/
	display: inline;
	position: relative;
	width: 32px;/*Added to allow rollover boxes to position themselves properly*/
	height: 150px;/*Added to allow rollover boxes to position themselves properly*/
	}
	
div.rolls-module div.inner div.rolls-slot-1, div.rolls-module div.inner div.rolls-slot-15
	{
	width: 27px;
	}
	
div.rolls-module-short div.inner div.rolls-slot
	{
	height: 80px;/*Added to allow rollover boxes to position themselves properly*/
	}
	
/*Added to reverse index slots so they don't overlay top of html box in IE*/
div.rolls-module div.inner div.rolls-slot-1 {z-index: 15;}
div.rolls-module div.inner div.rolls-slot-2 {z-index: 14;}
div.rolls-module div.inner div.rolls-slot-3 {z-index: 13;}
div.rolls-module div.inner div.rolls-slot-4 {z-index: 12;}
div.rolls-module div.inner div.rolls-slot-5 {z-index: 11;}
div.rolls-module div.inner div.rolls-slot-6 {z-index: 10;}
div.rolls-module div.inner div.rolls-slot-7 {z-index: 9;}
div.rolls-module div.inner div.rolls-slot-8 {z-index: 8;}
div.rolls-module div.inner div.rolls-slot-9 {z-index: 7;}
div.rolls-module div.inner div.rolls-slot-10 {z-index: 6;}
div.rolls-module div.inner div.rolls-slot-11 {z-index: 5;}
div.rolls-module div.inner div.rolls-slot-12 {z-index: 4;}
div.rolls-module div.inner div.rolls-slot-13 {z-index: 3;}
div.rolls-module div.inner div.rolls-slot-14 {z-index: 2;}
div.rolls-module div.inner div.rolls-slot-15 {z-index: 1;}
	
/*In case they filled in extra ones (originally there were 17 across*/
div.rolls-module div.inner div.rolls-slot-16 {display: none;}
div.rolls-module div.inner div.rolls-slot-17 {display: none;}
div.rolls-module div.inner div.rolls-slot-18 {display: none;}
div.rolls-module div.inner div.rolls-slot-19 {display: none;}
div.rolls-module div.inner div.rolls-slot-20 {display: none;}

/*Place holder images to get links/mouseovers to work in IE7*/
div.rolls-module div.inner div.rolls-slot a.rolls-slot-link img
	{
	width: 32px;
	height: 150px;
	}
	
div.rolls-module div.inner div.rolls-slot-1 a.rolls-slot-link img {width: 27px;}
div.rolls-module div.inner div.rolls-slot-15 a.rolls-slot-link img {width: 27px;}

div.rolls-module-short div.inner div.rolls-slot a.rolls-slot-link img
	{
	height: 80px;
	}

/*These are the HTML boxes*/

div.rolls-module div.inner div.rolls-slot div.rolls-box
	{
	display: none;
	position: absolute;
	top: 140px;
	left: -46px;
	background-color: #fff;
	text-align: left;
	width: 356px;
	height: auto;/*MS:2009.02.25: Added to allow box to grow with content height*/
	border: 2px solid #000;
	z-index: 100;
    color: #000;
	}
	
div.rolls-module-short div.inner div.rolls-slot div.rolls-box
	{
	top: 70px;
	}

div.rolls-module div.inner div.rolls-slot div.rolls-box h2
    {
    color: #000;
    text-decoration: underline;
    font-size: 110%;
    margin: 5px 10px 8px 10px;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box h2 a
    {
    color: #000;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box
    {
    float: left;
    display: inline;
    width: 100px;
    margin: 0 0 10px 10px;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box div.roll-thumbnail
    {
    clear: left;
    position: relative;
    top: 0;
    left: 0;
    margin: 0;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box div.roll-thumbnail a
    {
    display: block;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box img.roll-thumb
    {
    width: 100px;
    height: 100px;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box div.roll-price-box
    {
    margin: 15px 0 10px 0;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box div.roll-price-box span.item-price
    {
    font-size: 150%;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-left-box div.roll-price-box p
    {
    margin: 0 0 0.5em 0;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-right-box
    {
    float: right;
    display: inline;
    width: 226px;
    margin: 0 10px 10px 0;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-right-box div.roll-detail-box
    {
    clear: right;
    min-height: 100px;
    margin-bottom: 10px
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-right-box div.roll-detail-box p.roll-description
    {
    margin: 0 0 0.75em 0;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-right-box div.roll-detail-box p.roll-dimensions
    {
    margin: 0 0 0.75em 0;
    color: #888;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-right-box a
    {
    display: inline-block;
    margin: 0;
    }

div.rolls-module div.inner div.rolls-slot div.rolls-box div.roll-right-box a.roll-sample-link
    {
    margin-top: 6px;
    }

/*Any extra stuff to be overlayed on top of the rolls.*/
div.rolls-module div.inner div.rolls-extra
	{
	position: absolute;
	width: 248px; height: auto;
	top: 10px;
	left: 10px;
	z-index: 100;/* to bring it in front of the rolls links */
	}

div.rolls-module div.inner div.rolls-extra p
	{
	font-size: 95%;
	background: transparent url(../images/rolls-module/semi-transparent.png) bottom left no-repeat;
	padding: 5px;
	color: #141414;
	}