/* 
 * Styles for tooltip elements
 */
div.pxn8_tip {
	position: absolute;
	z-index: 3;
	border: 1px solid black;
	width: 160px;
	background-color: white;
}

div.pxn8_tip h1 {
	background-color: #e4e4e4;
	padding: 4px;
	font-size: 100%;
	color: black;
	border-bottom: 1px solid #cccccc;
}

div.pxn8_tip p 
{
	padding: 4px;
}
/*
 * The following CSS styling is for PXN8 elements which are added by 
 * javascript at runtime.
 */

.pxn8_color_box {
	border: 1px solid #cccccc;
	width: 16px;
   height: 16px;
}

/**
 *
 * Slider control styling
 * 
 */
div.pxn8_slide:hover {
	background-color: white;
}

span.pxn8_slider {
  background-color: #800000;
  position: absolute;
  top: 12px;
  left: 58px;
  width: 6px;
  height: 16px;
}

div.pxn8_slide {
  background: transparent url(../images/scale.gif) bottom center no-repeat;
  position: relative;
  width: 126px;
  height: 28px;
  cursor: pointer;

}
.pxn8_slidervalue 
{
	border: 1px solid #cccccc;
	width: 32px;
}

input.pxn8_field
{
	border: 1px solid #cccccc;
	line-height: 16px;
	background-color: white;
}

input.pxn8_small_field
{
     width: 60px;
	  border: 1px solid #cccccc;
	  background-color: white ;
	  line-height: 16px;
}

select.pxn8_field
{
	border: 1px solid #cccccc;
	line-height: 16px;
	background-color: white;
}

.pxn8_colorwell
{
	border: 1px solid black;
	width: 24px;
	height: 16px;
	overflow: visible;
}

.pxn8_checked {
	background: url(../images/collapsed.gif) top left no-repeat;
	padding-left: 16px;
	font-weight: bold;
}

.pxn8_unchecked {
	padding-left: 16px;
	font-weight: normal;
}
/**
 * How button-like links should be displayed
 */
a.pxn8_button, a.pxn8_button:visited 
{
	text-decoration: none;
	border-top: 2px solid #f0f0f0;
	border-left: 2px solid #f0f0f0;
	border-right: 2px solid #b0b0b0;
	border-bottom: 2px solid #b0b0b0;
	background-color: steelblue;
	line-height: 24px;
	font-weight: bold;
	color: white;
	padding: 2px 4px 2px 4px;

}
/* ------------------------------------------------------------------------
 * 
 * (c) Copyright 2005-2009 Sxoop Technologies Ltd. All rights reserved.
 *
 * ------------------------------------------------------------------------
 *
 * CORE PXN8 elements common to all themes
 */

/*
 * The timer div appears when the user performs an operation on the image which
 * requires server interaction. (A http request)
 */

#pxn8_timer, .warning
{	
    position: absolute;
    font-family: Arial, Verdana;
    font-size: 11px;
    text-align: left;
    color: black;
    top: 0px;
    left: 0px;
    font-weight: bold;
    background-color: white;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 32px;
    filter: alpha(opacity: 80);
    opacity: 0.80;
    height: 2.0em;
    width: 48.0em;
}
/*
 * .pxn8_preview_update is the class of message which appears when 
 * the preview pane is updating
 *
 */
.pxn8_preview_update 
{
	font-family: Arial;
	font-size: 11px;
	font-weight: bold;
	color: white;
	background-color: teal;
}

#pxn8_timer 
{
    background: white url(/pixenate/images/countdown4.gif) 5px 5px no-repeat;
}

/*
 * The select_rect is the div which is displayed when the user 
 * clicks and drags over the image canvas.
 */

#pxn8_select_rect 
{
    background-color: white;
    opacity: 0.0;
    -moz-opacity: 0.0;
    cursor: move;
    font-size: 0px;
    border: 1px dotted red;
    position: absolute;
    width: 0px;
    height: 0px;
    display: block;
    z-index: 1;
    left: 0px;
    top: 0px;
    filter: alpha(opacity: 0);
}
/**
 * A special optional hidden div that can be put on the editor page to preload 
 * certain images used by Pixenate.
 */
#pxn8_preloaded_images 
{
	width: 0px;	
	height: 0px;
	display: inline;
	background-image: url(/pixenate/images/bluepin.gif);
	background-image: url(/pixenate/images/redpin.gif);
	background-image: url(/pixenate/images/scale.gif);
	background-image: url(/pixenate/images/collapsed.gif);
   background-image: url(/pixenate/images/pxn8_xhairs_white.gif);
   background-image: url(/pixenate/images/countdown4.gif)
}
div.pxn8_color_container a
{
   width: 11px;
   height: 11px;
   display: block;
   border: none;
}
div.pxn8_color_well {
   width: 40px;
   height: 40px;
   float: left;
   margin-right: 8px;
}
div.pxn8_color_picker 
{
   padding: 8px;
}

div.pxn8_color_picker input 
{
   border: 1px solid #ccc;
   text-transform: uppercase;
}
div.pxn8_color_picker button 
{
   display: block;
}

/**
 * (c) 2005-2009 Sxoop Technologies Ltd.
 * 
 * For support email support@sxoop.com
 *
 * Sample Slick stylesheet
 * This stylesheet is used by the sample slick editor
 */

* { 
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
	 padding: 0px;
	 margin: 0px;
}
form {
    padding: 0px;
    margin: 0px;
}
a {
    text-decoration: underline;
}
h1 {
    font-size: 140%;
}

table.infotable td {
    color: #aaaaaa;
    padding-right: 12px;
}

.infolabel{
    color: #999999;
    font-weight: bold;
}

#left_pane {
    position: absolute;
    top: 64px;
    left: 0px;
    width: 215px;
}

table.toolstable td {
    padding: 2px;
}
/*
 * Bookmarklet links appear in the help section and should
 * look different to regular bookmarklets.
 * I'm not sure how you make something look 'draggable' - this is my best effort.
 */

.bookmarklet {
    display: block;
    color: black;
    text-decoration: none;
    border: 1px dashed black;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 8px;
    margin-bottom: 8px;
    text-align: center;
}

#banner {
    position: absolute; 
    top: 0px; 
    left: 224px;
}

#content {
    position: relative; 
    top:  8px; 
    left: 8px
              }

#filename {
    width: 200px;
    background-color: transparent;
}
#canvas_container {
    position:absolute; 
    top: 96px;  
    left:224px;
}

#google_ads {
	clear: left;  
	margin-top: 8px; 
	padding-top: 10px; 
	padding-left: 0px; 	
	
	width: 740px; height: 100px;
}

#font { width: 144px;}
#bubbles_table img { cursor: pointer ; }
#bubbles_table img:hover { background-color: steelblue; }

/*
 * =============================================================================
 *
 * STANDARD PXN8 ELEMENT STYLES GO HERE.
 *
 * =============================================================================
 */

/*
 *  The canvas element is where the image will be displayed
 */
#pxn8_canvas 
{
    position: relative;
	 margin-bottom: 12px;
	 float: left; 

    top:0px; 
    left: 0px;
    /* setting width to zero fixes IE bug (float left is not enough) */

	 width: 0px;

}
/*
 * The image_container appears within the canvas
 */
#pxn8_image_container 
{
    /* height must be specified for fade to work in IE */
    height: 100%;
}


#pxn8_config_title 
{
    padding-bottom: 4px;
    padding-top: 4px;
    border-bottom: 2px solid #a0a0a0;
    margin-bottom: 4px;
}