@CHARSET "ISO-8859-1";



/*************** utility css for common tasks ***************/
/*
CONTENTS

General Setup
Database Tables
Tool tips
Forms
Image Tiles
General Stuff - styling, ...
2-way ListBoxes - probably should be in its own file
Splitter Frames using Divs - ditto
Modal Dialog (lightbox)

*/


/*************** general setup - just some general defaults  ***************/

/* to override browser defaults */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,td,html,p,blockquote,fieldset,input
{ margin: 0; padding: 0; }

p {
  margin-bottom: 1em;
}

/*** Correction for non-IE browsers ***/
#wrap {
  overflow: hidden;
}

a img,:link img,:visited img { border: none; }

a { text-decoration: none; }

a:hover { text-decoration: underline; }

/*
body, td
{
  font-family: "Trebuchet MS", verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
*/


/***************** tool tip css ************************/

/*
  To use this css for tool tips, you have two choices. The first is to use the built-in tool tip
  functionality. The downside is it isn't very flashy, and it takes a moment or two to pop-up. The
  upside is it works when the tip goes outside of the frame. The other way is the flashy way, but
  doesn't handle outside of frames well.

  To use the tool-tip way (the 1st one), put your help text within either an 'abbr' tag or another
  tag (usually span) with a class=help. Put your help text into a 'title' field within the tag, e.g.
  title='some help here'.

  To use the pop-up way (the 2nd one), put your help text within either an 'abbr' tag or an anchor tag
  with a class=help (hover only works with anchor I think). Next, put your help text after your main text,
  but within a span tag. That is all there is to it.

*/

abbr, .help {
  position: relative; /*this is the key*/
  z-index:24;
  border-bottom: 1px dotted #333;
  cursor: help;
}

.help-icon {
  position: relative;
  z-index: 24;
  cursor: help;
}

.help-icon img {
  width: 14px;
}

abbr:hover, .help:hover {
  z-index:25;
  border-bottom: 1px dotted red;
}

abbr span, .help span {
  display: none
}

abbr:hover span, .help:hover span { /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:2em;
    left:2em;
    width:15em;
    border: 2px solid red;
    background-color: white;
    color: black;
    text-align: left;
    padding: 0.5em;
}

.table-title .help-icon {
  font-size: 12px;
  margin-left: 10px;
}

.help-icon a:link, .help-icon a:visited, .help-icon a:hover, .help-icon a:active {
  color: blue;
}

.help-icon a:hover {
  text-decoration: underline;
}

.table-title .help-icon a:link, .table-title .help-icon a:active {
  color: lightblue;
}

/************************ Pull Quotes *******************/
/* see http://www.pearsonified.com/2006/09/snazzy_pullquotes_for_your_blo.php */

.pullquote_left {
    width: 200px;
    margin: 5px 15px 5px 0;
    font-size: 1.4em;
    text-align: center;
    float: left;
  }

.pullquote_right {
    width: 200px;
    margin: 5px 0 5px 15px;
    font-size: 1.4em;
    text-align: center;
    float: right;
  }

/************************ Spin Div Icons *******************/
img.spin-div {
  width: 12px;
}

/************************ Forms *************************/
/**/

.modalWindow .content {
  /* padding:10px; - for some reason padding at this point, while logical, is not consistent
  width:400px; */
}

/* not sure why all the font stuff is messed up in the modal help window, but here are some fixes */
.modalWindow .content .help-content {
  color:black;
  font-weight:normal;
  height:400px;
  overflow:auto;
  padding:10px 10px 10px 20px;
  width:700px;
}

.help-content ul {
  padding-left: 20px;
  padding-bottom: 10px;
}

.modalWindow .content form {
	padding: 10px;
}

.modalWindow .content .loading { /* div shown when loading ajax call */
  padding: 10px;
}

.modalWindow .content .popupResults {
  padding: 4px 10px 10px;
}

div.form-input-pair {
	clear: both;
	margin-top: 2px;
}

.content form div.form-input-pair select {
	/*width: 185px;*/
}

label {
  font-weight: bold;
  padding-right: 4px;
  /*float: left;*/
}

input {
  margin-right: 8px;
  margin-bottom: 4px;
}

input.button {
  margin: 0;
}

input[type="text"], input[type="password"] {
  width: 100%;
}

input[type="checkbox"] {
  margin-right: 0px;
}

textarea {
  width: 100%;
}

label.checkbox {
  margin-top: 2px;
}

.input-group {
  /*float: left;*/
  margin-bottom: 6px;
}

.input-group label {
  float: none;
}

ul.radio_list {
  list-style: none;
}

.form-image {
  margin-right: 8px;
}

/* .button - both as link and input button */

/* general styling */

a.button, input.button, a.small-button, input.small-button {
  font-size: 1.0em;
  font-family: sans-serif;
  font-weight: bold;
  text-decoration: none;
  padding: 1px 8px;
  width: auto;
  height: auto;
}

a.right-form-button { /* seperate the cancel button */
  margin-right: 10px;
}

a.button {
  padding: 2px 8px; /* need extra vertial padding to match input.button */
  padding-bottom: 0.5px; /* strange I know */
}

a.small-button, input.small-button {
	font-size: 0.8em;
}

.fix-link-margins { /* add this class to a div containing a.button to fix the margins */
  margin-top: 4px;
}

/* color - override for per app */
a.button, input.button, a.small-button, input.small-button {
  color: white;
  background-color: green;
  border: 2px outset green;
}

/* hover coloring */
a.button:hover, input.button:hover, a.small-button:hover, input.small-button:hover {
  color: darkgreen;
  background-color: lightgreen;
  border: 2px outset lightgreen;
  text-decoration: none;
}

a.delete-btn {
  /*background-image: url('delete.gif');*/
  text-decoration: none;
  margin: 0;
  margin-top: -18px;
  float: right;
  width: 14px;
  height: 14px;
}

td a.delete-btn {
  margin-top: 0px;
  margin-right: 14px;
}

table.stats a.button, table.stats input.button {
  font-size: 10px;
}

a.button[disabled=true], a.small-button[disabled=true] {
	background-color:white;
	border:medium none;
	color:lightgrey;
}

input[disabled="disabled"], input[disabled="disabled"]:hover {
  background-color: lightgrey;
  color: white;
  border: medium none;
}

label[disabled], label[disabled]:hover {
  background-color: lightgrey;
  color: white;
  border: medium none;
}


a.button, a.small-button {
  cursor:default; /* to match input buttons */
}

/*
a.delete-btn:hover {
  background-image: url('delete_hover.gif');
}

a.delete-btn:active {
  background-image: url('delete_active.gif');
}
*/
a.alert, input.alert {
  color: white;
  background-color: red;
  border: 2px outset red;
}

/* hover coloring */
a.alert:hover, input.alert:hover {
  color: darkred;
  background-color: lightred;
  border: 2px outset lightred;
  text-decoration: none;
}

/* symfony error form text */
ul.error_list li {
	/*background-color:lightBlue;
	color: darkRed;*/
	float:left;
  /*font-weight:bold;*/
	list-style: disc; /*none;*/
  list-style-position: inside;
	padding: 1px 2px;
  margin-top: -5px;
}

div.form-error {
  color: red;
}

div.form-error p {
  font-weight: bold;
  margin-bottom: 4px;
}

div.form-error ul li {
  clear: both;
  /*background-color: none;
  color: red;*/
}

div.form-fields {
  clear: both;
  padding-right: 4px; /* this permits inputs to have 100% width without extending extra pixels which they do for some reason */
}

div.error input {
  border: 1px solid red;
}

.right-form-button {
  float: right;
  margin-left: 5px;
}

.error-box {
	border: 3px ridge red;
}

/************************ Image tiles *******************************/

div.image-tile {
  float: left;
  padding: 4px;
  border: 1px solid black;
}

div.image-tile div.image {
}

div.image-tile div.caption {
  margin-bottom: 5px;
  margin-right: 15px;
}

/* div.edit-images is used for admin page for uploading multiple images */

div.edit-images {
 /* margin-top: 10px;*/
 clear: both;
 padding-top: 5px;
}

div.edit-images div.image-tile {
  margin-bottom: 40px;
}

.active_photo { /* for selecting the active image */
  float: left;
  margin: 0px;
  /*border: 1px solid blue;*/
}

/************************ General Stuff - styling, ... *************************/
/*

Contents:
div.buffer - clear both and pad 5 pixels
.bold
.error

*/

div.buffer {
  clear: both;
  padding: 5px 0px;
}

.bold {
  font-weight: bold;
}

.font-normal {
	font-weight: normal;
	color: black;
}

.error {
  color: red;
}

label span.error-text {
	/*color: red; */
	font-weight: normal;
	padding-left: 8px;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.clear-both {
  clear: both;
}

.hidden {
  visibility: hidden;
}

img.zoomable {
  cursor: url(magnify.cur), pointer;
}

.headline-span { /* make inline text smaller than headline */
  font-size: 80%;
  font-weight: normal;
  padding: 0px 8px;
}


/*****************  2-way ListBoxes - probably should be in its own file *******************/
/* needs more work - how-to, etc. */

/* The list boxes */
div.list {
  float: left;
	margin: 8px 10px;
}

select.list-left, select.list-right {
	width: 200px;
}

/* the arrows */
div.move-arrows {
  float: left;
  padding-top: 40px;
}

div.move-arrows a.button {
	margin: 5px;
}

/************************ Splitter Frames using Divs **************************/
div#parent {
	/*border: 1px solid red;*/
	width: 750px;
	height: 410px;
}

div.framediv {
	float: left;
  border: 2px inset black;
  margin-bottom: 10px;
  overflow: hidden;
}

div#frame1 {
  width: 150px;
  height: 400px;
  margin-right: 5px;
}

div#frame2 {
  width: 586px;
  height: auto; /*400px;*/
}

div#splitter {
	width: 5px;
	height: 400px;
/*	background: red;
	opacity: .5;
*/
}


/************************ Modal Dialog (lightbox) ******************************/

iframe.hidden {
  visibility: hidden;
  width: 0px;
  height: 0px;
}

/* override for custom size */
iframe.visible {
  width: 600px;
  height: 250px;
  visibility: visible;
}

/* old source - http://luke.breuer.com/tutorial/javascript-modal-dialog.aspx */
/* new source - http://yensdesign.com/2008/09/how-to-create-a-stunning-and-smooth-popup-using-jquery/ */

.modalBackground
{
  display: none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6*/
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;

  z-index: 1;
  background-color:#333333;
  border:1px solid #cecece;
  opacity: 0.40;
  filter: alpha(opacity=40)
}

.modalWindow
{
  display:none;
  position:fixed;
  _position:absolute; /* hack for internet explorer 6*/

  z-index: 99; /* values of say 2 to 5 don't cover up the help link/icons, 99 does */
  background-color: white;
  border: 1px solid blue;
}

.modalTitleBar {
  background-color: lightblue;
  height: 18px;
  width: 100%;
  border-bottom: 1px solid darkblue;
  cursor: move;
}

.modalTitleBar h1 {
	font-size: 14px;
	padding-left: 4px;
}

a.modalCloseBox
{
  font-size:12px;
  line-height:12px;
  right:2px;
  top:1px;
  padding: 0px 2px;
  position:absolute;
  font-weight:700;
  display:block;
  cursor: pointer;
  color: blue;
  border: 2px outset blue;
  background-color: lightblue;
  text-decoration: none;
}

/* hover coloring */
a.modalCloseBox:hover {
  color: white;
  background-color: blue;
  border: 2px outset lightblue;
}

/********************** ie 6.0 hacks ******************/
* html .modalBackground, #modalIframe
{
  position: absolute;
    left: expression(ignoreMe = document.documentElement.scrollLeft + "px");
    top: expression(ignoreMe = document.documentElement.scrollTop + "px");
    width: expression(document.documentElement.clientWidth + "px");
    height: expression(document.documentElement.clientHeight + "px");
}

* html #modalIframe
{
  filter: alpha(opacity=0);
  z-index: 8;
}

* html #modalWindow
{
  position: absolute;
    left: expression(ignoreMe = document.documentElement.scrollLeft + "px");
    top: expression(ignoreMe = document.documentElement.scrollTop + "px");
}

div.dialog-buttons {
	padding: 5px;
	margin-top: 5px;
  height: 25px;
	border-top: 1px solid darkblue;
}

/***************** database tables for editing DB records ************************/

div.symfony-form {
  border: 1px solid darkBlue;
  padding: 5px 5px 0;
}

/*    table masthead layout  */
div.tableMastHead {
  height: 25px;
  margin-bottom: 2px;
  background-color: darkBlue;
  color: white;
}

div.tableMastHead h2.table-title {
  float: left;
  margin-left: 5px;
}

div.tableMastHead a.add-button {
  float: right;
  font-size: 10px;
  margin-right: 5px;
  margin-top: 3px;
}

/* the table layout itself */
table.stats {
  text-align: left;
  width: 100%;
  border: 1px solid darkblue;
}

/* first the head (labels) */
table.stats thead {
  background: lightBlue;
}

table.stats tr.label th {
  font-weight: bold;
}

table.stats thead td {
  padding-right: 20px;
}

/* now the table data */
table.stats tr.alt {
  background-color: pink;
}

table.stats tr.over {
  background-color: red;
}

table.stats td {
  padding-right: 5px;
}

/* the outer elements - delete, data & edit */
table.stats td.delete {
  width: 40px;
}

table.stats td.data
{
  padding-right: 0px;
}

table.stats td.edit {
  text-align: center;
  width: 50px;
  padding: 0;
}

/* now the actual data elements */
table.stats td.name {
  text-align: left;
}

table.stats td.num {
  text-align: right;
  width: 50px;
}

table.stats td.bool {
  text-align: right;
  width: 30px;
  padding: 0;
}

/* lastly, specific distinct values for label elems */
table.stats thead td.delete {
  padding-right: 4px;
}

table.stats thead td.data
{
}

table.stats thead td.edit {
}




/************** misc fonts from amazon (use in cart) *************/
/* body text style */
/*
td, th {select.html (line 116)
font-family:verdana,arial,helvetica,sans-serif;
font-size:small;
}
*/
/* mini-cart text */
/*
.tiny {select.html (line 124)
font-family:verdana,arial,helvetica,sans-serif;
font-size:x-small;
}
*/