@charset "utf-8";
/* CSS Document */

.grayBox_tl, .grayBox_t, .grayBox_tr, .grayBox_l, .grayBox_r, .grayBox_bl, .grayBox_b, .grayBox_br, .grayBox {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
.grayBox_t {
    /*
	<!-- powered by http://mierendo.com/software/rounded_css_boxes/ -->
	
        change this div to layout the whole box (width, height, float, margin, ...)
        example lines:
        width: 60%;
        margin: 7px 35px 0px 1px
        to change distance to content/text scroll to class ".grayBox" and change the padding
    */
    background-color: #FFFFFF;
    background-image: url("grayBox_border.png");
    background-repeat: repeat-x;
    background-position: top;

}
.grayBox_tl {
    height: 100%;
    background-image: url("grayBox_topleft.png");
    background-repeat: no-repeat;
    background-position: left top;
}
.grayBox_tr {
    height: 100%;
    background-image: url("grayBox_topright.png");
    background-repeat: no-repeat;
    background-position: right top;
}
.grayBox_bl {
    height: 100%;
    background-image: url("grayBox_bottomleft.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}
.grayBox_br {
    height: 100%;
    background-image: url("grayBox_bottomright.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}
.grayBox {
    height: 100%;
    /* change this if you want to change the distance distance to text/content */
    padding: 3px 4px 3px 4px;
}

.grayBox_l {
    height: 100%;
    background-image: url("grayBox_border.png");
    background-repeat: repeat-y;
    background-position: left;
}
.grayBox_r {
    height: 100%;
    background-image: url("grayBox_border.png");
    background-repeat: repeat-y;
    background-position: right;
}
.grayBox_b {
    height: 100%;
    background-image: url("grayBox_border.png");
    background-repeat: repeat-x;
    background-position: bottom;
}


.bbox { 
  background: #0188C9; 
}
.bboxtop { 
  background: url(bne.gif) no-repeat top right; 
}
.bboxtop div { 
  font-size: 0;
  height: 6px; 
  background: url(bnw.gif) no-repeat top left; 
}
.bboxbottom { 
  background: url(bse.gif) no-repeat bottom right; 
}
.bboxbottom div { 
  font-size: 0;
  height: 6px; 
  background: url(bsw.gif) no-repeat bottom left; 
}
.bboxcontent {
  padding: 0px 6px 0px 6px;
}


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

.rbox { 
  background: #F1D4D4; 
}
.rboxtop { 
  background: url(rne.gif) no-repeat top right; 
}
.rboxtop div { 
  font-size: 0;
  height: 8px; 
  background: url(rnw.gif) no-repeat top left; 
}
.rboxbottom { 
  background: url(rse.gif) no-repeat bottom right; 
}
.rboxbottom div { 
  font-size: 0;
  height: 8px; 
  background: url(rsw.gif) no-repeat bottom left; 
}
.rboxcontent {
  padding: 0px 8px 0px 8px;
}


.gbox { 
  background: #D3F5E3; 
}
.gboxtop { 
  background: url(gne.gif) no-repeat top right; 
}
.gboxtop div { 
  font-size: 0;
  height: 8px; 
  background: url(gnw.gif) no-repeat top left; 
}
.gboxbottom { 
  background: url(gse.gif) no-repeat bottom right; 
}
.gboxbottom div { 
  font-size: 0;
  height: 8px; 
  background: url(gsw.gif) no-repeat bottom left; 
}
.gboxcontent {
  padding: 0px 8px 0px 8px;
}



.mbox { 
  background: #D3E6F5; 
}
.mboxtop { 
  background: url(mne.gif) no-repeat top right; 
}
.mboxtop div { 
  font-size: 0;
  height: 8px; 
  background: url(mnw.gif) no-repeat top left; 
}
.mboxbottom { 
  background: url(mse.gif) no-repeat bottom right; 
}
.mboxbottom div { 
  font-size: 0;
  height: 8px; 
  background: url(msw.gif) no-repeat bottom left; 
}
.mboxcontent {
  padding: 0px 8px 0px 8px;
}


/*  yellow box */

.ybox { 
  background: #FF9202; 
}
.yboxtop { 
  background: url(yne.gif) no-repeat top right; 
}
.yboxtop div { 
  font-size: 0;
  height: 6px; 
  background: url(ynw.gif) no-repeat top left; 
}
.yboxbottom { 
  background: url(yse.gif) no-repeat bottom right; 
}
.yboxbottom div { 
  font-size: 0;
  height: 6px; 
  background: url(ysw.gif) no-repeat bottom left; 
}
.yboxcontent {
  padding: 0px 6px 0px 6px;
}

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



.bluebr_tl, .bluebr_t, .bluebr_tr, .bluebr_l, .bluebr_r, .bluebr_bl, .bluebr_b, .bluebr_br, .bluebr {
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    position: relative;
}
.bluebr_t {
    /*
        change this div to layout the whole box (width, height, float, margin, ...)
        example lines:
        width: 60%;
        margin: 7px 35px 0px 1px
        to change distance to content/text scroll to class ".bluebr" and change the padding
    */
    background-color: #FFFFFF;
    background-image: url("bluebr_border.png");
    background-repeat: repeat-x;
    background-position: top;
}
.bluebr_tl {
    height: 100%;
    background-image: url("bluebr_topleft.png");
    background-repeat: no-repeat;
    background-position: left top;
}
.bluebr_tr {
    height: 100%;
    background-image: url("bluebr_topright.png");
    background-repeat: no-repeat;
    background-position: right top;
}
.bluebr_bl {
    height: 100%;
    background-image: url("bluebr_bottomleft.png");
    background-repeat: no-repeat;
    background-position: left bottom;
}
.bluebr_br {
    height: 100%;
    background-image: url("bluebr_bottomright.png");
    background-repeat: no-repeat;
    background-position: right bottom;
}
.bluebr {
    height: 100%;
    /* change this if you want to change the distance distance to text/content */
    padding: 4px 5px 4px 5px;
}

.bluebr_l {
    height: 100%;
    background-image: url("bluebr_border.png");
    background-repeat: repeat-y;
    background-position: left;
}
.bluebr_r {
    height: 100%;
    background-image: url("bluebr_border.png");
    background-repeat: repeat-y;
    background-position: right;
}
.bluebr_b {
    height: 100%;
    background-image: url("bluebr_border.png");
    background-repeat: repeat-x;
    background-position: bottom;
}