Styles

/*---------------------------------
itembox.css
------------------------------------
Some more or less usefull styles
for some typical itemBoxes
It is all up to you to change them,
remove that you dont need or to
introduce others
------------------------------------*/

/*---------------------------------
itembox
basic, default box. This is the necessary one
------------------------------------*/
.itembox{min-width:20px;}
.itembox.dragged{
   border-style:solid; border-width:thin;
   border-color:red;
   padding:0px
}

.itembox .header{
   border-style:solid; border-width:thin;
   font-size:14px;font-weight:bold;line-height:100%;
   padding: 2px 0px 2px 2px;  margin:0px; min-height:16px;				
}

.itembox .drag{background:#7AC5CD;cursor:move;}
.itembox .nodrag{background:#CCCCCC}

.itembox .toggler{
   cursor:pointer; 
   min-width:20px;min-height:16px;
   float:right;
   display:inline}

.itembox .toggler.off {background:url(expand.jpg) no-repeat}
.itembox .toggler.on  {background:url(collapse.jpg) no-repeat}
			   
.itembox .content{
   margin:0px;padding:10px;display:block;
   background-color:#eeeeee;
   border-style:solid;border-width:thin;
   border-color:#aaaaaa}

/* --------------------------------------
codebox
presentation of code
involved as "style-codebox" in itemBox's classlist
----------------------------------------- */
.codebox{min-width:100px;}
.codebox.dragged{
   border-style:solid; border-width:thin;
   border-color:red;padding:0px
}

.codebox .header{
   border-style:solid; border-width:thin;
   font-size:14px;font-weight:bold;line-height:100%;
   padding: 2px 0px 2px 2px;  margin:0px; min-height:16px;				
}


.codebox .drag{background:#7AC5CD;cursor:move;}
.codebox .nodrag{background:rgba(139, 170, 110, 0.61)}

.codebox .toggler{cursor:pointer; 
   min-width:20px;min-height:16px;
   float:right;
   display:inline
}

.codebox .toggler.off {background:url(expand.jpg) no-repeat}
.codebox .toggler.on  {background:url(collapse.jpg) no-repeat}
			   
.codebox  .content{display:block;
   background-color:#FBFAE8;
   padding:0px 2px 0px 2px;
   max-width:600px;max-height:500px;overflow:auto;
   border-style:solid;border-width:thin;border-color:black
}
/* --------------------------------------
imagebox
presentation without header
no expand, no background
involved as "style-imagebox" in itemBox's classlist
----------------------------------------- */
.imagebox{min-width:10px;}
.imagebox.dragged{
   border-style:solid;border-width:thin;
   border-color:red;padding:0px
}
.imagebox .header{
   min-height:10px; min-width:5px;
   font-size:5px;color:#aa0000;
   background:#aa0000;
   padding:0px;margin:0px
}			   
.imagebox .content{margin:0%;padding:0%;}
.imagebox .drag{cursor:move}
.imagebox .nodrag{}
.imagebox .toggler.off {display:none}
.imagebox .toggler.on  {display:none}
.imagebox .content,.drag{cursor:move;}
.imagebox  img{margin:0px;padding:0px}
/* --------------------------------------
popbox
presentation of popup
involved as "style-popbox" in itemBox's classlist

poptrigger is necessary class in elements 
that should trigger a popup
----------------------------------------- */
.poptrigger{color:#0020AA}
.popbox{border-style:solid;
   border-width:0.1em;
   border-color:#CDAA7D;
   border-radius: 5px;
   margin:0px;padding:7px;
   font-size:12px;
   background-color:#F5F2D6;
   box-shadow: 5px 5px 5px #888888;}
.popbox.dragged{
   border-style:solid;
   border-width:thin;
   border-color:red;
   padding:7px;
}
.popbox .header{
   font-size:14px;font-weight:bold;color:#0020AA;
   padding:0px;margin-bottom:4px
}
.popbox .content{
   margin-left:0px
}	
.toggler{cursor:pointer; 
   min-width:20px;min-height:16px;
   float:right;
   background-color:#F5F2D6;
   display:inline
}		   
.popbox .drag{cursor:move;}
.popbox .nodrag{}
.popbox .on {background:url(delete.png) no-repeat}
.popbox .off  {background:url(gopen.gif) no-repeat}
.popbox .content.drag{}