/* 

  shaped borders with CSS and Javascript

  - third attempt - 24.jul.2006 - www.gunlaug.no

  Based on www.gunlaug.no/homesite/main_6_xv.html, with the addition of...

       rcGeorg.js

  by Paul Novitski - JuniperWebcraft.com
  23 July 2006


*/
 


/* basic styles if no javascript support */

.rc0,.sc0 {margin: 6px 10px 0 30px; min-width: 100px; /*max-width: 1200px*/; background: #e0e7ef; border: solid 1px #999; padding: 5px 0 0 0;}


@media screen {/* this is where old and weak browsers are shut out */


/* generated elements get basic styles */

.rc {margin: 6px 10px 2px 30px; min-width: 100px; /*max-width: 1200px*/; background: transparent;}
.rc div {background: #e0e7ef;}
.rc .wr {border: solid 1px #888; border-width: 0 1px; background-position: 0 -8px;}
.rc .wr div {background: transparent!important; padding: 1px 0; margin: 0;}
.rc .wr div * {position: relative; z-index: 1;}

* html .rc div.wr div {height: 1%;}

/* some simple backgrounds */

.bg1 div {background: transparent url("../imagedepot/bgnd-blue-semi.png");}
.bg2 div {background: transparent url("../imagedepot/bgnd-white-semi.png");}
.bg3 div {background: #edb url("../imagedepot/bgnd-oldbook.png");}
.bg4 div {background: transparent url("../imagedepot/bgnd-notes.png") repeat-x;}



.t0,.b0,.t1,.b1,.t2,.b2,.t3,.b3,.t4,.b4,.t5,.b5,.t6,.b6 {border-style: solid; border-color: #888; font-size: 1px; line-height: 0; overflow-y: hidden; position: relative; background: #e0e7ef;}


/* basic borders */

.rc .t0,.rc .b0 {border-width: 1px 0px 0px 0px; height: 0; border-color: #aaa;}

* html .rc .t0,* html .rc .b0 {height: 1px /* for IE-win: only in 'Quirks mode' - delete in 'Standard compliant mode' */;}

.rc .t1,.rc .b1 {border-width: 0 3px; height: 1px; border-color: #aaa;}

.rc .t2,.rc .b2 {border-width: 0 2px; height: 1px; border-color: #aaa;}

.rc .t3,.rc .b3 {border-width: 0 1px; height: 1px;}

.rc .t4,.rc .b4 {border-width: 0 1px; height: 2px;}

.rc .t5,.rc .b5 {border-width: 0 1px 0 1px; height: 3px;}

.rc .t6,.rc .b6 {display: none /* not needed at the moment */}



/* round all corners - the basic shape */

.rc .t0,.rc .b0 {margin: 0 9px;}

.rc .t1,.rc .b1 {margin: 0 6px; background-position: -6px 0;}

.rc .t2,.rc .b2 {margin: 0 4px; background-position: -4px -1px;}

.rc .t3,.rc .b3 {margin: 0 3px; background-position: -3px -2px;}

.rc .t4,.rc .b4 {margin: 0 2px; background-position: -2px -3px;}

.rc .t5,.rc .b5 {margin: 0 1px; background-position: -1px -5px;}




/* a set of predefined shapes - class-name: sc1 - sc8 */

/* if someone wants to create their own shapes - or just need a round box, then the css below isn't needed */



/* sc1: round 3 corners - invert upper right */

.sc1 .t0,.sc2 .t0 {margin: 0 -11px 0 9px;}

.sc1 .t1,.sc2 .t1 {margin: 0 -7px 0 6px;}

.sc1 .t2,.sc2 .t2 {margin: 0 -5px 0 4px;}

.sc1 .t3,.sc2 .t3 {margin: 0 -3px 0 3px;}

.sc1 .t4,.sc2 .t4 {margin: 0 -2px 0 2px;}

.sc1 .t5,.sc2 .t5 {margin: 0 -1px 0 1px;}



/* sc2: round 2 corners - invert lower left and upper right */

.sc2 .b0 {margin: 0 9px 0 -11px;}

.sc2 div.b1 {margin: 0 6px 0 -6px; background-position: 6px 100%;}

.sc2 div.b2 {margin: 0 4px 0 -4px; background-position: 4px 100%;}

.sc2 div.b3 {margin: 0 3px 0 -3px; background-position: 3px 100%;}

.sc2 div.b4 {margin: 0 2px 0 -2px; background-position: 2px 100%;}

.sc2 div.b5 {margin: 0 1px 0 -1px; background-position: 1px 100%;}



/* sc3: round 3 corners - sharp upper right */

.sc3 .t0,.sc4 .t0 {margin: 0 0 0 9px;}

.sc3 .t1,.sc4 .t1 {margin: 0 0 0 6px; border-width: 0 1px 0 3px; border-right-color: #777;}

.sc3 .t2,.sc4 .t2 {margin: 0 0 0 4px; border-width: 0 1px 0 2px; border-right-color: #777;}

.sc3 .t3,.sc4 .t3 {margin: 0 0 0 3px;}

.sc3 .t4,.sc4 .t4 {margin: 0 0 0 2px;}

.sc3 .t5,.sc4 .t5 {margin: 0 0 0 1px;}



/* sc4: round 2 corners - sharp lower left and upper right */

.sc4 .b0 {margin: 0 9px 0 0;}

.sc4 .b1 {margin: 0 6px 0 0; border-width: 0 3px 0 1px; border-left-color: #777;}

.sc4 .b2 {margin: 0 4px 0 0; border-width: 0 2px 0 1px; border-left-color: #777;}

.sc4 .b3 {margin: 0 3px 0 0;}

.sc4 .b4 {margin: 0 2px 0 0;}

.sc4 .b5 {margin: 0 1px 0 0;}



/* sc5: round 3 corners - sharp upper left */

.sc5 .t0,.sc6 .t0 {margin: 0 9px 0 0;}

.sc5 .t1,.sc6 .t1 {margin: 0 6px 0 0; background-position: 0 0; border-width: 0 3px 0 1px; border-left-color: #777;}

.sc5 .t2,.sc6 .t2 {margin: 0 4px 0 0; background-position: 0 -1px; border-width: 0 2px 0 1px; border-left-color: #777;}

.sc5 .t3,.sc6 .t3 {margin: 0 3px 0 0; background-position: 0 -2px;}

.sc5 .t4,.sc6 .t4 {margin: 0 2px 0 0; background-position: 0 -3px;}

.sc5 .t5,.sc6 .t5 {margin: 0 1px 0 0; background-position: 0 -5px;}




/* sc6: round 2 corners - sharp lower right and upper left */

.sc6 .b0 {margin: 0 0 0 9px;}

.sc6 .b1 {margin: 0 0 0 6px; border-width: 0 1px 0 3px; border-right-color: #777;}

.sc6 .b2 {margin: 0 0 0 4px; border-width: 0 1px 0 2px; border-right-color: #777;}

.sc6 .b3 {margin: 0 0 0 3px;}

.sc6 .b4 {margin: 0 0 0 2px;}

.sc6 .b5 {margin: 0 0 0 1px;}



/* sc7: round 2 corners - sharp upper left & invert upper right */

.sc7 .t0,.sc8 .t0 {margin: 0 -11px 0 0;}

.sc7 .t1,.sc8 .t1 {margin: 0 -7px 0 0; background-position: 0 0; border-width: 0 3px 0 1px; border-left-color: #777;}

.sc7 .t2,.sc8 .t2 {margin: 0 -5px 0 0; background-position: 0 -1px; border-width: 0 2px 0 1px; border-left-color: #777;}

.sc7 .t3,.sc8 .t3 {margin: 0 -3px 0 0; background-position: 0 -2px;}

.sc7 .t4,.sc8 .t4 {margin: 0 -2px 0 0; background-position: 0 -3px;}

.sc7 .t5,.sc8 .t5 {margin: 0 -1px 0 0; background-position: 0 -5px;}



/* sc8: sharp 2 corners - invert lower left and upper right */

.sc8 .b0 {margin: 0 0 0 -11px;}

.sc8 .b1 {margin: 0 0 0 -6px; background-position: 6px 100%; border-width: 0 1px 0 3px; border-right-color: #777;}

.sc8 .b2 {margin: 0 0 0 -4px; background-position: 4px 100%; border-width: 0 1px 0 2px; border-right-color: #777;}

.sc8 .b3 {margin: 0 0 0 -3px; background-position: 3px 100%;}

.sc8 .b4 {margin: 0 0 0 -2px; background-position: 2px 100%;}

.sc8 .b5 {margin: 0 0 0 -1px; background-position: 1px 100%;}



/* testing image-backgrounds */
/* ib1: curled top and bottom */

.ib1 div {border: none;}

.ib1 div.wr {border-left: solid 1px #d0d0d0; border-right: solid 1px #d0d0d0; background: #efefea; padding: 3px 0 6px 0; margin: -5px 0 -1px 0;}

/* top */

.ib1 .t1 {margin: 0 0 0 -10px; background: transparent url(../imagedepot/curletop-left.png); height: 19px; width: 13px; float: left; display: inline;}
.ib1 .t2 {margin: 0 0 0 -9px; background: transparent url(../imagedepot/curletop-right.png); height: 19px; width: 13px; float: right;display: inline;}
.ib1 .t3 {margin: 0 11px 0 1px; background: transparent url(../imagedepot/curletop-center.png); height: 19px; }
.ib1 .t0, .ib1 .t4, .ib1 .t5 {display: none;}

/* bottom */

.ib1 .b3 {margin: 0 -11px 0 0; background: transparent url(../imagedepot/curlebottom-left.png); height: 21px; width: 26px; float: left;display: inline;}
.ib1 .b2 {margin: 0 -10px 0 -4px; background: transparent url(../imagedepot/curlebottom-right.png); height: 21px; width: 13px; float: right;display: inline;}
.ib1 .b1 {margin: 0 1px 0 11px; background: transparent url(../imagedepot/curlebottom-center.png); height: 21px;}
.ib1 .b0, .ib1 .b4 {display: none;}

.ib1 .b5 {width: 50px; height: 75px; background: transparent url(../imagedepot/pen-2.png); float: right; margin: -65px -30px -75px -50px;}

}