/* Rounded Corner Effect =========================================================================================== */

/* 
Leave the width of this class set to 'auto' and don't override with inline styles.  The reason: the 'rounded' class 
will add padding to the width of the element, while 'rounded-js' will add padding to the inside of the element.  The 
widths between these two need to be consistent so we don't get shifting if they have javascript enabled or not.

Instead, set the width of whatever container is surrounding the .rounded element.
*/

/* base styles: */
div.box-effect, div.header-effect, div.rounded-content, div.rounded-js {
/*	width: auto !important; *//* make sure somesone doesn't override the width with inline styles */
}

/* default padding */
div.box-effect, div.header-effect, div.rounded-content {
	padding: 7px 10px;
}

/* default background */
div.box-effect, div.header-effect, div.rounded-js {
	background: #ededed url(../images/boxes/lightgray/center.gif) repeat-x top; 
	color: #000;
}

/* colors: */

/* default gray */
div.rounded-js div.rounded-top { background: transparent url(../images/boxes/lightgray/top.gif) repeat-x top; }
div.rounded-js div.rounded-right { background: transparent url(../images/boxes/lightgray/right.gif) repeat-y right; }
div.rounded-js div.rounded-bottom { background: transparent url(../images/boxes/lightgray/bottom.gif) repeat-x bottom; }
div.rounded-js div.rounded-left { background: transparent url(../images/boxes/lightgray/left.gif) repeat-y left; }
div.rounded-js div.rounded-topRight { background: transparent url(../images/boxes/lightgray/top-right.gif) no-repeat top right; }
div.rounded-js div.rounded-topLeft { background: transparent url(../images/boxes/lightgray/top-left.gif) no-repeat top left;}
div.rounded-js div.rounded-bottomRight { background: transparent url(../images/boxes/lightgray/bottom-right.gif) no-repeat bottom right; }
div.rounded-js div.rounded-bottomLeft { background: transparent url(../images/boxes/lightgray/bottom-left.gif) no-repeat bottom left; }

/* dark blue, no border */
div.box-effect.darkblue-solid,
div.header-effect.darkblue-solid,
div.rounded-js.darkblue-solid { background: #0083A9 url(../images/boxes/darkblue-solid/center.gif) repeat-x top; color: #FFF; }
div.rounded-js.darkblue-solid div.rounded-top { background: transparent url(../images/boxes/darkblue-solid/top.gif) repeat-x top; }
div.rounded-js.darkblue-solid div.rounded-right { 	background: transparent url(../images/boxes/darkblue-solid/right.gif) repeat-y right; }
div.rounded-js.darkblue-solid div.rounded-bottom { background: transparent url(../images/boxes/darkblue-solid/bottom.gif) repeat-x bottom; }
div.rounded-js.darkblue-solid div.rounded-left { background: transparent url(../images/boxes/darkblue-solid/left.gif) repeat-y left; }
div.rounded-js.darkblue-solid div.rounded-topRight  { background: transparent url(../images/boxes/darkblue-solid/top-right.gif) no-repeat top right; }
div.rounded-js.darkblue-solid div.rounded-topLeft  { background: transparent url(../images/boxes/darkblue-solid/top-left.gif) no-repeat top left;}
div.rounded-js.darkblue-solid div.rounded-bottomRight { background: transparent url(../images/boxes/darkblue-solid/bottom-right.gif) no-repeat bottom right; }
div.rounded-js.darkblue-solid div.rounded-bottomLeft { background: transparent url(../images/boxes/darkblue-solid/bottom-left.gif) no-repeat bottom left; }

/* dark gray, no border */
div.box-effect.darkgray-solid,
div.header-effect.darkgray-solid,
div.rounded-js.darkgray-solid { background: #666 url(../images/boxes/darkgray-solid/center.gif) repeat-x top; color: #FFF; }
div.rounded-js.darkgray-solid div.rounded-top { background: transparent url(../images/boxes/darkgray-solid/top.gif) repeat-x top; }
div.rounded-js.darkgray-solid div.rounded-right { 	background: transparent url(../images/boxes/darkgray-solid/right.gif) repeat-y right; }
div.rounded-js.darkgray-solid div.rounded-bottom { background: transparent url(../images/boxes/darkgray-solid/bottom.gif) repeat-x bottom; }
div.rounded-js.darkgray-solid div.rounded-left { background: transparent url(../images/boxes/darkgray-solid/left.gif) repeat-y left; }
div.rounded-js.darkgray-solid div.rounded-topRight  { background: transparent url(../images/boxes/darkgray-solid/top-right.gif) no-repeat top right; }
div.rounded-js.darkgray-solid div.rounded-topLeft  { background: transparent url(../images/boxes/darkgray-solid/top-left.gif) no-repeat top left;}
div.rounded-js.darkgray-solid div.rounded-bottomRight { background: transparent url(../images/boxes/darkgray-solid/bottom-right.gif) no-repeat bottom right; }
div.rounded-js.darkgray-solid div.rounded-bottomLeft { background: transparent url(../images/boxes/darkgray-solid/bottom-left.gif) no-repeat bottom left; }