/**************************/
/*  AXEL library CSS file */
/**************************/
/* * AXEL core sheet * */

/* This file decribes the CSS styles used to make the library work properly.
   It includes styles to make the right element appears, to set position of
   floating elements and so on.

   WARNING: Do not edit this file unless you *really* know what you're doing! */

/*******************/
/** Repeat editor **/

/* CSS trick to make unset (repeated) part disappear */
.axel-repeat-unset .axel-hide-if-unselect,
.axel-repeat-unset.axel-hide-if-unselect {
  display: none;
}

/************************************************************/
/** Core styles (styles used by many parts of the library) **/

/* Style for ediatble parts of the template */
.axel-core-editable {
  cursor: pointer;
}

/* Generic class for showing inline elements */
span.axel-core-on {
  display: inline;
}

/* Generic class for showing block elements */
p.axel-core-on,
div.axel-core-on {
  display: block;
}

/* Generic class for hiding unused elements */
.axel-core-off {
  display: none;
}

/* Hiding of boundaries. */
.axel-core-boundary {
  display: none;
}

/*******************/
/** Plugin "text" **/

/* Common styles for placed or float text devices
   (inherit works wory every browsers but IE7)*/
textarea.axel-text-placed,
input.axel-text-placed,
textarea.axel-text-float,
input.axel-text-float {
  margin: 0;
  padding: 0;
  color: inherit;
  font-style: inherit;
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  vertical-align: inherit;
  line-height: inherit;
  background-color: inherit;
  overflow: hidden;
}

/* Style for flaoting text device */
textarea.axel-text-float,
input.axel-text-float {
  position: absolute;
  display: inline;
}

/* Style for text container */
div.axel-text-container { 
  position: relative;
  overflow: visible;
}

/* Style for having a hidden "shadow" buffer for text geometry computations */
/* below is a trick from : 
   http://labnol.blogspot.com/2006/10/html-css-trick-for-displaying-code.html
   to wrap long lines of text */
.axel-text-shadowbuffer {
  position: absolute;
  top: -1000px;
  left: -1000px;
  visibility: hidden;
  white-space: pre-wrap; /* css-3 */
  white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
  word-wrap: break-word; /* Internet Explorer 5.5+ */
  border: solid 2px white; /* assumes 2px input field border ? (empirical) */
}

/*********************/
/* Popup menu device */

.axel-popup-container {
  position: absolute;
  visibility: hidden;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 1000;
}

.axel-popup-container > ul {
  margin: 0;
  padding: 0;
}

.axel-popup-container li {
  list-style-type: none;
  margin:0;
  padding: 0;
}

.axel-popup-sublist {
  margin: 0;
  padding: 0;
  width: 100%;
}

.axel-popup-sublistheader {
  margin:0;
  vertical-align: top;
}

.axel-popup-sublistbody {
  margin:0;
  padding: 0;
  vertical-align: top;
}

/****************************************/
/* Layout manager (used by lens device) */

.axel-layout-container {
  position: relative;
  overflow: visible;
  display: inline;
  width: 0;
  height: 0;
  margin: 0;
  padding: 0;
  vertical-align: top;
}

/**********************/
/* Lens based devices */
         
.axel-lens-container {
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  margin: 0;
  min-width: 80px;
}

/*********************/
/* Service extension */

span.axel-service-handle {
  display: none;
}

/**************************/
/* Menu tracker extension */
div.axel-tracker-menu {
  position: absolute;
}

/**********************/
/* File upload plugin */
span.xt-file.over:hover > span.xt-file-trans {
 display: inline;
}
span.xt-file-trans {
 display: none;
}
input#xt-file-input {
  top: -20px;
  left: 0;
  position: absolute;
  visibility: hidden;
}
img.xt-file-editable {
  cursor: pointer;
}
#xt-tooltip {
  position: absolute;
  background: black;
  color: white;
  border: outset 3px white;
  padding: 9px;
  display: none;
  z-index: 100;
}
#xt-tooltip a {
  color: white;
}
button.xt-file-del {
  background: transparent;
  padding: 0px;
  cursor: pointer;
  border: 0px none;
  font-size: 22px;
  font-weight: bold;
  line-height: 12px;
  vertical-align:top;
  opacity:0.2;
}
button.xt-file-del:hover, button.xt-file-del:focus {
  color: #000;
  text-decoration: none;
  opacity: 0.4;
}/* * AXEL style sheet * */

/* This file decribes the visual styles used by the AXEL library to improve and decorate the transformed
   template (the user interface). It includes (among others) color styles, borders and constomizable
   margins.
   
   Feel free to customize the styles below to match your visual requirements */

/*******************/
/** Repeat editor **/

/* style for the left button (-) */
.axel-repeat-left {
  padding-left: 5px;
  padding-right: 2px;
}

/* style for the right button (+) */
.axel-repeat-right {
  padding-left: 2px;
  padding-right: 5px;
}

/* style for the unset (repeated 0 time) element inside a repeat.
   Greys out unrepeated content */
.axel-repeat-unset,
.axel-repeat-unset * {
  font-style: italic !important;
  color: gray !important;
}

/* "Ungreys" the greyed content when its contently being edited */
.axel-repeat-unset .axel-core-editing,
.axel-repeat-unset .axel-core-editing * {
  font-style: normal !important;
  color: black !important;
}

/* Greys out images and objects that are not repeated */
img.axel-repeat-unset,
object.axel-repeat-unset {
  opacity: 0.3;
}

/*****************/
/** Core styles **/

/* Style for editable parts of the template */
.axel-core-editable {
  outline: thin dashed #bbffdd;
}

/* Style for error message within the template as a result of a problem in the transformation process */
.axel-generator-error {
  font-family: sans-serif;
  color: red;
}

/*************************************************/
/** Optionality management (shared between plugins
   supporting the option="set|unset" attribute) **/

/* Style for the checkbox for optional editors */
.axel-option-checkbox {
  vertical-align: middle;
  margin-right: 5px;
}

/* Style for selected (set) optional elements */
.axel-option-set {
  font-style: inherit;
  color: inherit;
}

/* Styles for greying out unset optional elements */
.axel-option-unset {
  font-style: italic;
  color: gray !important;
}
img.axel-option-unset,
object.axel-option-unset {
  opacity: 0.3;
}

/* ******************* */
/* Popup menu device */

.axel-popup-container {
  font-size: 13px;
  border:1px solid black;
  color: blue;
  background: white;
  padding: 2px;
}

.axel-popup-container > ul {
  border: 1px solid lightGrey;
}

.axel-popup-container li {
  border-bottom: 1px solid lightGrey;
}

.axel-popup-container li.axel-popup-selectable {
  padding: 5px;
}

.axel-popup-container li.axel-popup-selectable:hover {
  color: white;
  background: blue;
}

.axel-popup-container li.selected {
  background: orange !important;
}

.axel-popup-sublistheader {
  padding: 5px;
  border: 1px solid lightGrey;
  color: grey;
  font-variant: small-caps;
  font-weight: bold;
  width: 25%;
}

.axel-popup-sublistbody {
  border: 1px solid lightGrey;
  width: 75%;
}
/* ********************/
/* Lens based devices */

.axel-lens-containerstyle {
  border: 1px solid black;
  background-color: rgb(115, 166, 42);
  text-align: left;
}

/*****************/
/* Plugin "link" */

/* Style for the link model's handle */
.axel-link-handle {
  color: blue;
  font-family: verdana, arial;
  text-decoration: underline;
  font-size: 100%;
}

/****************/
/* Photo plugin */

/* Style for the photo model's handle */
.axel-photo-handle {
  max-width: 100px;
  max-height: 100px;
}

/*************************/
/* Service filter trigger */
.axel-service-trigger {
  margin: 0 5px;
}

/***********************/
/* Wiki 'span' variant */
span.important { font-weight: bold; }
span.verbatim { font-family: courier, monospace; font-size: 0.85em; }
span.emphasize { font-style: italic; }

/**************************/
/* Menu tracker extension */
div.axel-tracker-menu {  
  opacity: 0.6;
}
div.axel-tracker-menu  > button.off {
  background: none repeat scroll 0 0 gray;
  font-style: italic;
}
div.axel-tracker-menu  > button {
  background: none repeat scroll 0 0 yellow;
  color: black;
}

/*  This style sheet adds some rules to hide AXEL structural menus 
    when the body element (that contains an XTiger XML transformed templates)
    has a 'preview' class in its class attributes.  */

body.preview .axel-repeat-left,
body.preview .axel-repeat-right,
body.preview .axel-option-checkbox,
body.preview .axel-option-unset,
body.preview .axel-repeat-unset,
body.preview select,
body.preview span.axel-option-unset + .axel-hide-if-unselect,
body.preview .axel-hide-if-preview {
  display: none !important;
}