body {
  background-color: white;
  color: black;
  font-family: Arial, sans-serif;
}

div#container {
 text-align: center;
}

div#portrait-option,
div#landscape-option {
 width: 150px;
 height: 75px;
 padding: 10px;
 cursor: pointer;
 border: 2px solid #fff;
 float: left;
}

div#portrait-option:hover,
div#landscape-option:hover {
 background: #6BB93E;
 border: 2px solid #387957;
}

div.clear {
 clear: both;
}

div#canvas-container {
 float: left;	
}

div#kiwicanvas {
 background: #fff;
 border: 2px solid #000;
 color: #000;
 overflow: hidden;
 position: relative;
}

div.portrait {
 width: 450px;
 height: 500px;
}

div.landscape {
 width: 500px;
 height: 350px;
}

#tools-container {
 text-align: left;	
}

#tools-container h3 {
 font-weight: bold;
 color: #3B5998;
 border-bottom: 1px solid #3B5998;
 margin-bottom: 4px;
}

div.textobject {
 cursor: pointer;
 width: auto;
 text-align: center;
 position: absolute;
}

div.imageobject {
 cursor: pointer;
 position: absolute; 
}

div.videoobject {
 cursor: pointer;
 position: absolute;
}

#object-properties p span {
 cursor: pointer;
 color: #3B5998;
 border: 1px solid #fff;
}

#media-container ul,
#background-container ul {
 margin: 0;
 padding: 0;
 list-style-type: none;
}
#media-container ul li,
#background-container ul li { 
 margin: 10px;
 padding: 10px;
 padding-left: 30px;
 border: 1px solid #fff;
 cursor: pointer;
}
#media-container ul li.add-text { background: url(../images/text_add.png)  center left no-repeat #fff; }
#media-container ul li.add-image { background: url(../images/image_add.png) center left no-repeat #fff;  }
#media-container ul li.add-video { background: url(../images/video_add.png) center left no-repeat #fff; }
#background-container ul li.bg-colour { background: url(../images/background_color.png) center left no-repeat #fff; }
#background-container ul li.bg-image { background: url(../images/background_image.png) center left no-repeat #fff; }

#media-container ul li:hover, 
#background-container ul li:hover { background-color: #A9D26A; }

.bg-color-box {
 width: 5px;
 height: 5px;
 border: 1px solid black;
}

.click {
 cursor: pointer;
}

.to-tool-style {
 padding: 5px;
 margin: 5px;
 cursor: pointer;
}

.to-tool-style:hover {

}

.to-tool-delete {
 background: url(../images/delete.png) no-repeat #fff;
 margin: 5px;
 padding: 5px;
 padding-left: 30px;
 color: red;
 cursor: pointer;
}
.to-tool-delete:hover {
 background-color: red;
 color: #fff;
}

.to-tool-toggled {
 border: 1px solid #000;
}

/* --Text object styles-- */
div.to-bold {font-weight:bold;}
div.to-italics {font-style:italic;}
div.to-underline {text-decoration:underline;}

/* --COLOUR PICKER-- */
#mini { display: none; COLOR: #999; CURSOR: move; FONT-FAMILY: arial, helvetica, san-serif; FONT-SIZE: 11px; POSITION: absolute; background: #000; padding-bottom: 8px; border: 1px solid #111; WIDTH: 148px; HEIGHT: 155px; Z-INDEX: 100; }
#mini div { margin: 0; padding: 0; }
#mini .north { background: #111; border-bottom: 1px solid #171717; }
#mini .north div { color: #999; float: right; padding: 5px 7px; CURSOR: pointer; -moz-user-select: none; -khtml-user-select: none; user-select: none;}
#mini .north div:hover { COLOR: #DE83AD; }
#mini .south { margin: 32px 10px 0 10px; cursor: crosshair; -moz-user-select: none; -khtml-user-select: none; user-select: none; }
#mini .south div { background: url('../images/miniCurr.gif') no-repeat; position: absolute; height: 9px; width: 9px; z-index: 101; }
#mini .south img { height: 100%; WIDTH: 100%; position: relative; TOP: -8px; LEFT: -1px; } 
#mini #mHEX { padding: 5px 0 4px 7px; cursor: text; float: left; } 
#mini #mHEX:hover { color: #DE83AD } 
#mini #mSize { float: right; top: -14px; left: 7px; position: relative; height: 14px; width: 14px; cursor: se-resize }
#mini #plugID {height: 20px; width: 20px; border:1px solid #666; background:#FFF}