/* From David LMS site test Gradbox.css */


/*****************************************************************
 * CSS Sheet for the gradiented box control.
 *
 * Corner images are currently 4 separate files. I've done this 
 * to allow for internal transparency. If you combine them into one
 * the backgrounds overlap slightly.
 * 
 * IE appears to have a bug where <img> tags dont regard parents with
 * position:relative to be creating a positioning context.
 * To fix this we need to use a <div> with position:absolute as a 
 * container for the <img>. The <div> tag correctly treats
 * position:relative as starting a context, and the <img> then 
 * takes its context from the absolute div.
 *
 * All style classes are prefixed by gb_ for gradient box
 * 
 * Works in IE7&8, Firefox2&3, Chrome and Safari3.1.2, Fails in IE6.
 *****************************************************************/


/* The outermost div of the box. It contains everything.
 * It has a fixed width, but grows to contain its content.
 */
.gb_outer
{
	padding: 11px 0px 11px 0px;  /* Everybox needs some padding at the top and bottom */
}

.center
{
  margin-left: auto;         /*These two lines center the box. May need to remove them*/
  margin-right: auto;       /**/
}

/* This is the first row of the box, the top two rounded corners and the top border
 * The left corner actually spans the entire width of the box and contains the right corner div.
 * Similarly the right corner div contains the center div.
 * Positioning is done using margins to push the divs away from each other.
 */
.gb_topleft
{
  background-image:url(../newimages/gradient_box/topleft.png);
  background-repeat:no-repeat;          
  height:10px;              /* The height of the image */
  font-size: 0px;
  margin: 0px 0px 0px 0px;
}
.gb_topright
{
  background-image:url(../newimages/gradient_box/topright.png);
  background-repeat:no-repeat;		
  background-position:top right;        
  height:10px;              /* The height of the image */
  margin: 0px 0px 0px 10px;
  font-size: 0px;
}
.gb_topmid
{
  background-image:url(../newimages/gradient_box/topmid.png);
  height:10px;	            /* The height of the image */
  margin: 0px 10px 0px 0px;
  font-size: 0px;
}


/* The middle portion of the box.
 * Works similarly to the top portion, but now we don't specify a height so that it can grow to
 * hold all of its content.
 * 
 * This section of the box doesn't use background images because they do not stretch (CSS2 limitation)
 * Instead they use an <img> tag, with height set to 100%. The content is then placed on top of the image.
 *
 * I assign relative positioning to the midleft and midright divs to start a new positioning context.
 * Otherwise it will use the document itself, and will be 100% of the height of the whole page rather than just
 * the box. The 100% is relative to the first parent it finds with position:relative or absolute.
 */
.gb_midleft
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
}
.gb_midleftimage
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;                  
  left:0px;
  width: 10px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}
.gb_midright
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-left:10px;         /* Push this div 10px away from the border so we don't cover it up. */
}
.gb_midrightimage
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;
  right:0px;                /* Position this image flush with the right of the div */
  width: 10px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}

/* This is the centre of the bordered box. it contains the stretchable image and a div to hold the content */
.gb_midmid
{
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-right:10px;        /* Push this div away from the right border */
  height: 100%;             /* Fix IE7 not scaling gradient image to full height of content div. */
}
.gb_midmidimage
{
  padding: 0px;
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;              /* Fill up the entire content div with the gradient*/
  height: 100%;             /* Fill up the entire content div with the gradient*/
}

/* This tag holds the actual content of the box. If it expands, everything else does too */
.gb_content
{
  position:relative;        /* Keep it in the document flow so it expands its parent */
}

.gb_contentinner
{
	
	font-size: 11px;
	font-family: Arial, Sans-Serif;
	padding:10px 3px 10px 3px;
}

/* The bottom row. Works identically to the top row.*/
.gb_botleft
{
  background-repeat:no-repeat;
  height:10px;              /* The height of the image */
}
.gb_botright
{
  background-repeat:no-repeat;
  background-position:bottom right;
  height:10px;              /* The height of the image */
  margin-left:10px;         /* Push this div 10px away from the left border so it doesn't cover it */
}
.gb_botmid
{
  height:10px;              /* The height of the image */
  margin-right:10px;        /* Push this div 10px away from the right border */
}


/* Classes used by login boxes (bigger than everything else) */
.gb_outer_login
{
}

.gb_topleft_login
{
  background-image:url(../newimages/gradient_box/login/topleft.png);
  background-repeat:no-repeat;          
  height:28px;              /* The height of the image */
  font-size: 0px;
  margin: 0px 0px 0px 0px;
}
.gb_topright_login
{
  background-image:url(../newimages/gradient_box/login/topright.png);
  background-repeat:no-repeat;		
  background-position:top right;        
  height:28px;              /* The height of the image */
  margin: 0px 0px 0px 28px;
  font-size: 0px;
}
.gb_topmid_login
{
  background-image:url(../newimages/gradient_box/login/topmid.png);
  height:28px;	            /* The height of the image */
  margin: 0px 28px 0px 0px;
  font-size: 0px;
}
.gb_midleft_login
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
}
.gb_midleftimage_login
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;                  
  left:0px;
  width: 28px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}
.gb_midright_login
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-left:28px;         /* Push this div 10px away from the border so we don't cover it up. */
}
.gb_midrightimage_login
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;
  right:0px;                /* Position this image flush with the right of the div */
  width: 28px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}
.gb_midmid_login
{
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-right:20px;        /* Push this div away from the right border */
  height: 100%;             /* Fix IE7 not scaling gradient image to full height of content div. */
}
.gb_midmidimage_login
{
  padding: 0px;
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;              /* Fill up the entire content div with the gradient*/
  height: 100%;             /* Fill up the entire content div with the gradient*/
}

.gb_content_login
{
  position:relative;        /* Keep it in the document flow so it expands its parent */
}

.gb_contentinner_login
{
	padding: 0px 0px 0px 20px;
}

/* The bottom row. Works identically to the top row.*/
.gb_botleft_login
{
  background-repeat:no-repeat;
  height:28px;              /* The height of the image */
}
.gb_botright_login
{
  background-repeat:no-repeat;
  background-position:bottom right;
  height:28px;              /* The height of the image */
  margin-left:28px;         /* Push this div 10px away from the left border so it doesn't cover it */
}
.gb_botmid_login
{
  height:28px;              /* The height of the image */
  margin-right:28px;        /* Push this div 10px away from the right border */
}






/* Gradient Panel for Emessages:*/
/*.......*/
/*.......*/
/*.......*/

.gbem_outer
{
	padding: 0px 0px 0px 0px;  /* Everybox needs some padding at the top and bottom */
}

.center
{
  margin-left: auto;         /*These two lines center the box. May need to remove them*/
  margin-right: auto;       /**/
 
}

/* This is the first row of the box, the top two rounded corners and the top border
 * The left corner actually spans the entire width of the box and contains the right corner div.
 * Similarly the right corner div contains the center div.
 * Positioning is done using margins to push the divs away from each other.
 */
.gbem_topleft
{
  /*background-image:url(../newimages/gradient_box/topleft.png);*/
  background-repeat:no-repeat;          
  height:0px;              /* The height of the image */
  font-size: 0px;
  margin: 0px 0px 0px 0px;
}
.gbem_topright
{
  /*background-image:url(../newimages/gradient_box/topright.png);*/
  background-repeat:no-repeat;		
  background-position:top right;        
  height:10px;              /* The height of the image */
  margin: 0px 0px 0px 10px;
  font-size: 0px;
}
.gbem_topmid
{
 /* background-image:url(../newimages/gradient_box/topmid.png);*/
  height:0px;	            /* The height of the image */
  margin: 0px 10px 0px 0px;
  font-size: 0px;
  background-color:#FFFFFF;
}


/* The middle portion of the box.
 * Works similarly to the top portion, but now we don't specify a height so that it can grow to
 * hold all of its content.
 * 
 * This section of the box doesn't use background images because they do not stretch (CSS2 limitation)
 * Instead they use an <img> tag, with height set to 100%. The content is then placed on top of the image.
 *
 * I assign relative positioning to the midleft and midright divs to start a new positioning context.
 * Otherwise it will use the document itself, and will be 100% of the height of the whole page rather than just
 * the box. The 100% is relative to the first parent it finds with position:relative or absolute.
 */
.gbem_midleft
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  background-repeat:repeat-y;
}
.gbem_midleftimage
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;                  
  left:0px;
  width: 10px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}
.gbem_midright
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-left:10px;         /* Push this div 10px away from the border so we don't cover it up. */
  background-position:right bottom;
}
.gbem_midrightimage
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;
  right:0px;                /* Position this image flush with the right of the div */
  width: 10px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}

/* This is the centre of the bordered box. it contains the stretchable image and a div to hold the content */
.gbem_midmid
{
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-right:10px;        /* Push this div away from the right border */
  height: 100%;             /* Fix IE7 not scaling gradient image to full height of content div. */
}
.gbem_midmidimage
{
  padding: 0px;
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;              /* Fill up the entire content div with the gradient*/
  height: 100%;             /* Fill up the entire content div with the gradient*/
}

/* This tag holds the actual content of the box. If it expands, everything else does too */
.gbem_content
{
  position:relative;  
  background-color:#FFFFFF;      /* Keep it in the document flow so it expands its parent */
}

.gbem_contentinner
{
	font-size: 12px;
	font-family: Verdana;
	background-color:#FFFFFF; 
}

/* The bottom row. Works identically to the top row.*/
.gbem_botleft
{
  /*background-repeat:no-repeat;
  height:13px;              /* The height of the image */
  margin-left:-3px;
  background-position:top left;   
  background-repeat:no-repeat;          
	height:14px;  
}
.gbem_botright
{
  /*background-repeat:no-repeat;
  background-position:bottom right;
  margin-left:10px;        
  height:13px;      */       
  margin-right:-3px;

	background-repeat:no-repeat;		
	background-position:top right;        
	height:14px;              /* The height of the image */
	 
}
.gbem_botmid
{
  /*height:10px; */             /* The height of the image */
 /* margin-right:10px;	*/	/* Push this div 10px away from the right border */
	
	height:12px;	          /* The height of the image */
	margin-right:14px;        /* Push this div 10px away from the right border */
	background-image:none;
	background-color: Transparent;
	margin-left:14px;
 
}


/*************/

.gbem_midleft_emailPage
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  background-repeat:repeat-y;
}
.gbem_midleftimage_emailPage
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;                  
  left:0px;
  width: 2px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}
.gbem_midright_emailPage
{
  padding: 0px;
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-left:2px;         /* Push this div 10px away from the border so we don't cover it up. */
  background-position:right bottom;
}
.gbem_midrightimage_emailPage
{
  padding: 0px;
  position:absolute;        /* Removes the image from the document flow (makes the content appear over it) */
  top:0px;
  right:0px;                /* Position this image flush with the right of the div */
  width: 2px;              /* Set the width to the width of the image (prevents proportional scaling) */
  height: 100%;             /* Scale the image to be the height of its container. */
}

/* This is the centre of the bordered box. it contains the stretchable image and a div to hold the content */
.gbem_midmid_emailPage
{
  position:relative;        /* Lets us use absolute positioning and % height on the child image */
  margin-right:2px;        /* Push this div away from the right border */
  height: 100%;             /* Fix IE7 not scaling gradient image to full height of content div. */
}

.gbem_midmidimage_emailPage
{
  padding: 0px;
  position:absolute;
  top:0px;
  left:0px;
  width: 100%;              /* Fill up the entire content div with the gradient*/
  height: 96%;             /* This needs to be 98% IE hack to stop the background image overlaping.*/
}