/* 4. 
 * These instructions and rules are for a box with a transparent, gradient 
 * backgound where both height and width can be adjusted.
 * To view the page go to: http://www-stage.zetta.net/indexTransWithGradHandW.php
 *
 * This is trickier as there are now 9 containers and all their rules that 
 * may need to change. Missing one change can break the whole thing. The 
 * actual content lives inside a container with id="powBoxTransWithGradHandW_mid"
 */

/* ++++++++++++++++++++
 * BEGIN rules you MUST change to adjust the size of the box
 * ++++++++++++++++++++ */
#powBoxTransWithGradHandW {
	left:493px; /* change this to move the box to the left or right on the page. */
	top:46px; /* change this to move the box up or down on the page. */
	position:absolute;
    width:425px; /* width of the whole box ( width of content + 28 + 28 ), if content is 369 then this is 425. */
}

/* At the risk of making these rules really hard to read, I've consolidated all the 
 * height and with changes into two rules. Change the numbers here, and you've resized
 * the box. I've left the original rules in place but commented out, which might help
 * someone make sense of things later. */

/* Width of the content (overall width - 28 -28), not to exceed 469px */
#powBoxTransWithGradHandW_top, 
#powBoxTransWithGradHandW_mid, 
#powBoxTransWithGradHandW_bot { width:369px; }
/* Height of the content (overall height - 28 -28), not to exceed 225px or go below 110px */
#powBoxTransWithGradHandW_MidRow, 
#powBoxTransWithGradHandW_lt, 
#powBoxTransWithGradHandW_mid, 
#powBoxTransWithGradHandW_mid div, 
#powBoxTransWithGradHandW_rt { height:200px; position:relative; }

 /* Should be the same as the width set above for powBoxTransWithGradHandW_top,mid,bot + 28 + 28 */
#powBoxTransWithGradHandW_MidRow,
#powBoxTransWithGradHandW_BotRow {
    width:425px;
}
/* ++++++++++++++++++++
 * END rules you MUST change to adjust the size of the box
 * ++++++++++++++++++++ */




/* ++++++++++++++++++++
 * BEGIN rules you MAY need to change of add to depending on the content you place in the box.
 * ++++++++++++++++++++ */
#powBoxTransWithGradHandW_mid div.powBox1of2 { 
    color:#fff;
    float:left;
    width:200px;
}

/* This rule affects the large text in the box */
#powBoxTransWithGradHandW_mid div.powBox1of2 h2 {  
    color:#fff; /* change text color */
	/* change the padding around the text */
	padding-top:5px;
	padding-right:0;
	padding-bottom:0;
	padding-left:5px; 
}

/* This rule affects the "Read the survey" link */
#powBoxTransWithGradHandW_mid div.powBox1of2 p.readMore {
    padding:0;
	position:absolute;
    text-align:right;
	bottom:6px;
	width:200px;
	z-index:2;
}

#powBoxTransWithGradHandW_mid div.powBox2of2 {
    float:right;
    width:165px;
}

#powBoxTransWithGradHandW_mid div.powBox2of2 img {
	/* change the margins around the outside of the image */
	margin-top:0px;
	margin-right:0;
	margin-bottom:0;
	margin-left:15px;
}

/* for rotating text */
#rotation { height:180px; }
#rotation h2 { display:none; }
#rotation h2.first { display:block; }

/* ++++++++++++++++++++
 * END rules you MAY need to change of add to depending on the content you place in the box.
 * ++++++++++++++++++++ */

/* END bottom row */

/* ++++++++++++++++++++ */
/* Should not need to change anything below here */
/* ++++++++++++++++++++ */

/* IE png fix */
#powBoxTransWithGradHandW div { behavior:url(lib/iepngfix/iepngfix.htc); }

#powBoxTransWithGradHandW_mid a,
#powBoxTransWithGradHandW_mid a:visited { color:#fff; }
#powBoxTransWithGradHandW_mid a:hover { text-decoration:underline; }

/* do not change this rule */
#powBoxTransWithGradHandW_tl {
    background:transparent url('images/powBoxBgTransGradHandW.png') no-repeat left top;
    float:left;
    height:28px;
    width:28px;
}

#powBoxTransWithGradHandW_top {
    background:transparent url('images/powBoxBgTransGradHandW.png') no-repeat -28px 0px;
    float:left;
    height:28px;
}

/* do not change this rule */
#powBoxTransWithGradHandW_tr {
    background:transparent url('images/powBoxBgTransGradHandW.png') no-repeat right top;
    float:left;
    height:28px;
    width:28px;
}

#powBoxTransWithGradHandW_lt {
    background:transparent url('images/powBoxBgTransGradHandW_lt.png') no-repeat left bottom;
    float:left;
    width:28px;
}

/* BEGIN middle row */
#powBoxTransWithGradHandW_mid {
    background:transparent url('images/powBoxBgTransGradHandW_mid.png') no-repeat 0px bottom;
    float:left;
}
    
#powBoxTransWithGradHandW_rt {
    background:transparent url('images/powBoxBgTransGradHandW_rt.png') no-repeat right bottom;
    float:left;
    width:28px;
}
/* END middle row */

/* BEGIN bottom row */
#powBoxTransWithGradHandW_BotRow {
    height:28px;
}

/* do not change this rule */
#powBoxTransWithGradHandW_bl {
    background:transparent url('images/powBoxBgTransGradHandW.png') no-repeat left bottom;
    float:left;
    height:28px;
    width:28px;
}

/* do not change this rule */
#powBoxTransWithGradHandW_bot {
    background:transparent url('images/powBoxBgTransGradHandW.png') no-repeat -28px bottom;
    float:left;
    height:28px;
}

/* do not change this rule */
#powBoxTransWithGradHandW_br {
    background:transparent url('images/powBoxBgTransGradHandW.png') no-repeat right bottom;
    float:left;
    height:28px;
    width:28px;
}
/* END 4. */
/* END Home page POW box */