/****
 * PARECI CSS style
 *
 * This file contains CSS for use with a Pareci application.
 * The class names in this document are recommended suggestions. Class names can be specified using the 'class' property in any widget.
 *
 **** */

/***************************************/
/* Global background and font settings */
/***************************************/

html,
body
{
   background:       #fff;
   font-family:      Lucida Grande, Tahoma, Helvetica, Arial, sans-serif;
   font-size:        13px;

   /* This is necessary to make sure the background will be visible through the entire viewport */
   width:            100%;
   height:           100%;
}

/*********************/
/* Application title */
/*********************/

.applicationTitle
{
   border-bottom:       3px solid #000;
   border-top:          3px solid #000;
   float: right;
   border-left:     1px solid #555;
   padding:          4px 10px 6px;
   font-weight:      bold;
   white-space: nowrap;
   color:            #999;
}

.applicationTitle a
{
   color:            inherit;
   text-decoration:  inherit;
}

.applicationTitle a:hover
{
   text-decoration: inherit;
}

/*************/
/* Main menu */
/*************/

.mainMenu.Widget_Stack_Horizontal
{
   padding:             0;
   background:          #000;
   margin:              0;
}

.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float > a,
.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float > .Widget_Menu > .Widget_Menu_Text,
.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float_Single > a,
.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float_Single > .Widget_Menu > .Widget_Menu_Text
{
   font-weight:         normal;
   display:             block;
   padding:             4px 7px 6px;
   text-decoration:     none;
   color:               #ccc;
   border-bottom:       3px solid #000;
   border-top:          3px solid #000;
}

.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float_Single
{
   display: inline-block;
}

.mainMenu a:hover
{
   color:               #eee;
   background:          #333;
   border-color: #333;
   text-decoration:     none;
}

.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float > a.Widget_LinkButton_Selected,
.mainMenu > .Widget_Stack_Row_Float > .Widget_Stack_Cell_Float_Single > a.Widget_LinkButton_Selected
{
   color:               #fff;
   font-weight:         bold;
   border-bottom-color: #4787ED;
}

.mainMenu a.Widget_LinkButton_Selected:hover
{
   color:               #fff;
}

/*************/
/* Main page */
/*************/
.mainPage
{
   margin:           10px 20px;
   background:       none repeat scroll 0 0 white;
}

.mainPage .title
{
   display: block;
   background-color: #eee;
   border-bottom: 1px solid #ccc;
   margin: -10px -20px 10px;
   padding: 12px 20px;
   font-size: 18px;

}

/*****************/
/* Page tool bar */
/*****************/
.mainPage .pageToolBar
{
   margin-bottom: 10px;
   border-bottom: 1px solid #eee;
}

.mainPage .pageToolBar a
{
   display:          block;
   color:            #666;
   text-decoration:  none;
   padding:          3px;
   margin:           5px;
   margin-bottom:    0;
}

.mainPage .pageToolBar a:hover
{
   color:            #111;
}

.mainPage .pageToolBar a.Widget_LinkButton_Selected
{
   border-bottom:    2px solid #8eb3ed;
   color:            #000;
   font-weight:      bold;
}

/******************/
/* Button classes */
/******************/
.Widget_LinkButton.button,
.Widget_FileUpload_Button,
.Widget_Menu.button > .Widget_Menu_Text
{
   border-radius:    3px;
   border:           1px solid #eee;
   background-color: #4a8bf5;
   filter:           progid:DXImageTransform.Microsoft.gradient(startColorstr='#4D90FE', endColorstr='#4787ED');
   background:       -webkit-gradient(linear, left top, left bottom, from(#4D90FE), to(#4787ED));
   background:       -moz-linear-gradient(top, #4D90FE, #4787ED);
   color:            #fff;
   display:          inline-block;
   font-size:        .9em;
   font-weight:      bold;
   padding:          3px 12px;
   text-decoration:  none;
}

.Widget_LinkButton.button:hover
{
   box-shadow:       0 1px 1px rgba(0, 0, 0, 0.3);
   border:           1px solid rgba(0,0,0,0.2);
}

/***************/
/* Panel class */
/***************/
.panel
{
   display:          block;
   background-color: #efefef;
   filter:           progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#EAEAEA');
   background:       -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#EAEAEA));
   background:       -moz-linear-gradient(top, #F5F5F5, #EAEAEA);
   border-radius:    3px;
   border:           1px solid #ccc;
   padding:          8px;
   margin:           5px;
}

.panelTitle
{
   display:          block;
   color:            #000;
   margin:           -8px -8px 5px -8px;
   padding:          2px 10px;
   border-radius:    3px 3px 0 0;
   background:       #fff;
   font-weight:      bold;
}

/****************/
/* Text classes */
/****************/
.caption
{
   display: block;
   font-size: 0.85em;
   font-style: italic;
   text-align: right;
}

/***********/
/* Widgets */
/***********/

/* All widgets that output anchor tags */
a
{
  color: #4787DD;
  text-decoration: none;
  font-size: 1em;
}

a:hover
{
   text-decoration: underline;
}

/* All widgets that output input (and related) tags except select. Styling 'select' widgets has unexpected effects on Firefox. */
input,
textarea
{
   padding:          3px;
   border:           1px solid #ccc;
   border-radius:    0;
}

input[type=checkbox],
input[type=radio]
{
   width:            auto;
   border:           none;
}

input[type=file]
{
   border: none;
}
/********************/
/* Widget_Accordion */
/********************/

.Widget_Accordion
{
   margin:           0 5px;
}

.Widget_Accordion_Caption
{
   background-color: #fff;
   border-bottom:    1px solid #CCCCCC;
   color:            #000;
   display:          block;
   font-size:        1em;
   font-weight:      bold;
   height:           auto;
   margin:           0;
   padding:          0.3em 0.9em 0 .6em;
   text-decoration:  none;
}

.Widget_Accordion_Caption_Closed:hover
{
   background-color: #f4f4f4;
}

.Widget_Accordion_Caption_Opened,
.Widget_Accordion_Caption_Opened:hover
{
   background-color: #f8f8f8;
}

.Widget_Accordion_Icon
{
   display:          none;
}

.Widget_Accordion_Content
{
   padding:          0 10px;
   border:           0;
   box-shadow:       0 2px 5px rgba(0, 0, 0, 0.05);
   display:          block;
}

.Widget_Accordion_Content_Opened
{
   padding:          10px;
}

/***************/
/* Widget_Menu */
/***************/
.Widget_Menu.subMenu      > .Widget_Menu_Icon,
.Widget_Menu.subMenuBelow > .Widget_Menu_Icon
{
   background-image: url('../images/icons.png');
}

.Widget_Menu_Children
{
   border-radius:    3px;
   border:           1px solid #ccc;
   background-color: #efefef;
   filter:           progid:DXImageTransform.Microsoft.gradient(startColorstr='#F5F5F5', endColorstr='#EAEAEA');
   background:       -webkit-gradient(linear, left top, left bottom, from(#F5F5F5), to(#EAEAEA));
   background:       -moz-linear-gradient(top, #F5F5F5, #EAEAEA);
   display:          inline-block;
   font-size:        12px;
   /*font-weight:      bold;*/
   text-decoration:  none;

   /*border-radius: 3px;*/
   /*box-shadow: 0px 0px 3px #b6bbc2;*/
}

.Widget_Menu_Children > .Widget_Menu_ChildWrapper > *,
.Widget_Menu_Children > .Widget_Menu_Items > .Widget_Menu_ChildWrapper > *
{
   padding: 3px 5px;
}

/* Add a border line between the menu items. */
.Widget_Menu_Children > .Widget_Menu_ChildWrapper,
.Widget_Menu_Children > .Widget_Menu_Items > .Widget_Menu_ChildWrapper
{
   border-bottom: 1px solid #ccc;
}

.Widget_Menu_Children > .Widget_Menu_ChildWrapper:last-child,
.Widget_Menu_Children > .Widget_Menu_Items:last-child > .Widget_Menu_ChildWrapper:last-child
{
   border: none;
}


.Widget_Menu_Children > .Widget_Menu_ChildWrapper:hover,
.Widget_Menu_Children > .Widget_Menu_Items > .Widget_Menu_ChildWrapper:hover
{
   background: rgba(128,128,128,0.1)
}

/****************/
/* Widget_Table */
/****************/

.Widget_Table
{
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #b8cee5;
  margin-bottom: 4px;

}

.Widget_Table th,
.Widget_Table td
{
  padding:              0 6px;
  border-top:           1px solid #ccc;
  border-bottom:        none;
  border-left:          none;
  border-right:         none;
}

.Widget_Table tr th
{
   text-align:          left;
   border-top:          1px solid #b8cee5;
   border-bottom:       1px solid #b8cee5;
   background:          #f8f8f8;
   font-size:           95%;
   font-weight:         bold;
   padding:             4px 6px;
}

.Widget_Table_Row_Selected td
{
   background-color:    #f4f4f4;
}

.Widget_Table tr:hover td
{
   background-color:    #f8f8f8;
}

.Widget_Table td > *
{
   color: #000;
   font-size: .8em;
}

.Widget_Table .Widget_NumberOutput
{
  display: block;
  text-align: right;
}

.Widget_Table caption
{
   color: #444444;
   display: table-caption;
   font-size: 1.2em;
   font-weight: bold;
   text-align: left;
   padding: 6px 6px 2px 6px;
}

.Widget_Table .Widget_Table_ControllerRow
{
   background-image: none;
   background-color: #F4F4F4;
   border-width:     1px;

   color:            #555;
   padding:          2px 10px;
   font-weight:      bold;
   text-align:       left;
}

/******************************/
/* Widget_PaginatorController */
/******************************/

.Widget_PaginatorController
{
   width:   148px;
}

.Widget_PaginatorController .Widget_PaginatorController_First,
.Widget_PaginatorController .Widget_PaginatorController_Previous,
.Widget_PaginatorController .Widget_PaginatorController_Next,
.Widget_PaginatorController .Widget_PaginatorController_Last
{
	background-image:url(emily/ui-icons_c2c2c2_256x240.png);
   background-repeat: no-repeat;
   width: 16px;
   height: 16px;
   border: 1px solid #c2c2c2;
   border-radius: 3px;
   margin: 0 2px;
	cursor:pointer;
}

.Widget_PaginatorController .Widget_PaginatorController_First:hover,
.Widget_PaginatorController .Widget_PaginatorController_Previous:hover,
.Widget_PaginatorController .Widget_PaginatorController_Next:hover,
.Widget_PaginatorController .Widget_PaginatorController_Last:hover
{
	background-image:url(emily/ui-icons_f4f4f4_256x240.png);
   background-color: #c2c2c2;
}

.Widget_PaginatorController .Widget_PaginatorController_Info
{
   width: 60px;
}

.Widget_PaginatorController .Widget_PaginatorController_First
{
   background-position: -240px -48px;
}

.Widget_PaginatorController .Widget_PaginatorController_Previous
{
   background-position: -96px -49px;
}

.Widget_PaginatorController .Widget_PaginatorController_Next
{
   background-position: -32px -49px;
}

.Widget_PaginatorController .Widget_PaginatorController_Last
{
   background-position: -208px -48px;
}

/*********************/
/* Widget_FormLayout */
/*********************/
.Widget_FormLayout fieldset
{
   border:           none;
   padding:          0;
}

.Widget_FormLayout.panel .Widget_FormLayout_Row
{
   border-bottom:    1px solid #eeeeee;
   border-collapse:  collapse;
   min-height:       2em;
}

.Widget_FormLayout fieldset input,
.Widget_FormLayout fieldset select,
.Widget_FormLayout fieldset textarea,
.Widget_FormLayout fieldset span,
.Widget_FormLayout fieldset a,
.Widget_FormLayout fieldset a.Widget_LinkButton.button,
.Widget_FormLayout fieldset .Widget_FileUpload_Button
{
   margin:           5px 0;
}

.Widget_FormLayout fieldset input[type=checkbox],
.Widget_FormLayout fieldset input[type=radio]
{
   display:          inline;
   width:            auto;
   margin-top:       9px;
}

.Widget_FormLayout label.disabled
{
   opacity: .45;
}

/*************************/
/* Widget_HintingDropDown*/
/*************************/

.ui-widget-content
{
   color:            inherit;
   display:          block;
   padding:          4px 0;
   margin:           5px;
   border:           1px solid #ccc;
   border-radius:    0 0 5px 5px;
   background:       #FFFFFF;
}

.ui-widget
{
   font-size:        inherit;
}

.ui-menu .ui-menu-item a
{
   padding:          0 4px;
   font-weight:      inherit;
   color:            #000;
}

.ui-menu .ui-menu-item a.ui-state-hover
{
   background-image: none;
   background-color: #eee;
   border:           0;
   color:            #333;
   margin:           0;
   border-radius:    0;
}

/***********************/
/* Widget_ColourPicker */
/***********************/

#mColorPicker
{
   padding:          10px;
   border-radius:    2px;
   background-color: rgba(240,240,240,0.8);
   box-shadow:       0 2px 5px rgba(0, 0, 0, 0.05);
}

#mColorPickerWrapper
{
   border-radius:    2px;
}

#mColorPickerImg
{
   border-radius:    2px 2px 0 0;
}

#mColorPickerFooter
{
   background:       rgba(0,0,0,0.1);
   border-radius:    0 0 5px 5px;
}

.mColorPickerTrigger.mColorPickerHidden
{
   border: 1px solid #ccc;
}

/* Validation of the ColourPicker */
.Widget_ColourPicker.ValidatorErrorInput
{
   border: none;
   background: none;
}

.Widget_ColourPicker.ValidatorErrorInput .mColorPickerTrigger
{
   border:           1px solid red;
}

/**************/
/* Validators */
/**************/

.ValidatorErrorMessage
{
   color:            #f00;
   padding:          0 5px;
}

.Widget_FormLayout .ValidatorErrorMessage_before,
.Widget_FormLayout .ValidatorErrorMessage_after
{
   clear:            left;
   margin-left:      46%;
}

.ValidatorErrorInput
{
   background-color: #fdd;
   background-image: none;
   border:           1px solid red;
}

/****************/
/* Popup window */
/****************/

.ui-dialog
{
   border:           1px solid #ccc;
   padding-top:      0;
   border-radius:    4px;
}

.ui-dialog-titlebar
{
   background-color: #f4f4f4;
   background-image: none;
   border:           1px solid #ccc;
   border-radius:    4px 4px 0 0;
   margin:           -1px -1px 0px;
}

.ui-dialog-title
{
   font-weight:      bold;
   color:            #000;
}

/* Error popup gets a special colour scheme */
.pareciErrorDialog .ui-dialog-titlebar
{
   background-color: #ED4787;
}

.pareciErrorDialog  .ui-dialog-titlebar .ui-dialog-title
{
   color:            #FFFFFF;
   text-shadow:      none;
}