/*
    Document   : Stylesheet for plugins
    Created on : Jun 5, 2011, 9:49:57 PM
    Author     : Lee
    Description:
        Sytlesheet that is used for the TWS Plugins
*/

/* Photo Album Viewer */
div.photoAlbum a.firstPic {
    display:block;
}

div.photoAlbum a.firstPic img {
    width:300px;
    border: 1px solid #DDD;
    padding: 5px;
    background-color: #FFF;
    margin-bottom: 10px;
    -moz-box-shadow: 5px 5px 5px #888;
    -webkit-box-shadow: 5px 5px 5px #888;
    box-shadow: 5px 5px 5px #888;
}

div.photoAlbum a.firstPic img:hover {
  border: 1px solid #000;
}

div.photoAlbum a {
    display: none;
}

div.photoAlbum {
  float:left;
  margin-right:20px;
  margin-bottom: 10px;
}

div.photoAlbumTitle {
  padding : 5px;
  text-align: center;
}

span.albumTitleText {
  font-weight: bold;
}

/* StandAlone Picture Viewer */
div.photoViewer {
  padding : 20px;
  background-color: #000;
  float: left;
  -moz-border-radius: 10px; /* For FireFox */
  -webkit-border-radius: 10px; /* For Safari/Chrome */
  border-radius: 10px;
}

div.photoViewer div.photo {
  padding:7px;
  background-color: #fff;
  position:relative;
}

div.photoViewer div.photo img.currentPhoto {
  -moz-box-shadow: 5px 5px 3px #333;
  -webkit-box-shadow: 5px 5px 3px #333;
  box-shadow:  5px 5px 3px #333;
}

div.photo div.nav {
  position: absolute;
  top: 50%;
  left: 2%;
  right: 2%;
  bottom: 1%;
  opacity : 0.1;
  filter :alpha(opacity=10);
  opacity : 0.7 \0/ !important;
  filter :alpha(opacity=70) \0/ !important;
   /*border:15px solid #ff0000;*/
  overflow: auto;
}

div.photoViewer div.photo div.nav:hover  {
  opacity : 1;
  filter :alpha(opacity=100);
  z-index: 10;
}

div.photo div.nav a img.rightNav  {
  position :absolute;
  right : 2%;
  top : 0;
}

div.photo div.nav a img.leftNav  {
  position :absolute;
  left : 2%;
  top : 0;
}

div.photo div.nav a img.leftNav, div.photo div.nav a img.rightNav {
  opacity:0.5;
  filter :alpha(opacity=50);
}

div.photo div.nav a img.leftNav:hover, div.photo div.nav a img.rightNav:hover {
  opacity : 1;
  filter :alpha(opacity=100);
}

div.photoViewerMenu {
  clear:both;
  margin-top:10px;
  margin-bottom:10px;
  padding:5px;
  position:relative;
  min-height: 55px;
}

div.photoViewerMenu div.count {
  float: left;
  top : 0;
  left:0;
  width : 50px;
  background-color: #C0C0C0;
  opacity: 0.5;
  filter :alpha(opacity=50);
  text-align: center;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  margin-right:5px;
}

div.photoViewerMenu div.baseNav {
  float: left;
  top : 0;

}

div.photoViewerMenu div.baseNav img {
  margin-right:10px;
  opacity : 0.7;
  filter :alpha(opacity=70);
}

div.photoViewerMenu div.baseNav img:hover {
  opacity : 1;
  filter :alpha(opacity=100);
}

div.photoViewerMenu div.baseNext {
  position: absolute;
  top : 0;
  right: 10px;
  opacity : 0.7;
  filter :alpha(opacity=70);
}

div.photoViewerMenu div.baseNext:hover {
  opacity:1;
  filter :alpha(opacity=100);
}

div.photoViewerMenu div.details {
  position:absolute;
  left : 155px;
  right: 120px;
}

div.photoViewerMenu div.details span.albumTitle {
  font-weight: bold;
  color :#fff;
}

div.photoViewerMenu div.details span.photoCaption {
  margin-top: 5px;
  display:block;
  color :#AAA;
  font-style: italic;
}


/* Forms */
span.required {
  font-weight: bold;
  color: #F00;
}
/* Inline Form */
.inlineForm label {
  display:block;
  float:left;
  margin:0 10px 0 0 ;
}

.inlineForm label input, .inlineForm label textarea{
  display:block;
}

.inlineForm label select{
  display:block;
  margin: 0px;
  margin-bottom: -2px; /* firefox wrapping issue */
  min-width: 75px;
}

.inlineForm label input[type="radio"],  .inlineForm label input[type="checkbox"] {
  display:inline;
  margin-right:3px;
}

.inlineForm label.inline  {
  margin: 17px 10px 0 0;
  display: block;
  float: left;
}

.inlineForm fieldset label.inline  {
  margin: 0 5px 0;
  display: inline;
  float: left;
}

.inlineForm label.stacked  {
  margin-bottom: 2px;
  clear: both;
}

.inlineForm legend {
  padding:3px;
}

.inlineForm fieldset {
 display: inline-block;
 float: left;
 margin: 0 10px 0 0;
 padding: 5px 10px 10px;
 border: 2px groove threedface;
}

form .row {
  clear:both;
  width:100%;
  margin : 0 0 10px 0;
  padding : 0 0 2px 0;
  overflow: hidden;
}

form .requiredLabel {
  color : #f00;
  font-weight: bold;
}

/* Block Form */
.blockForm label {
  display:block;
  float:left;
  margin:0 5px 5px 0 ;
  position: relative;
  width: 115px; /** WIDTH SET HERE **/
}

.blockForm label input, .blockForm label select{
  display:inline;
  position: absolute;
  top: 0px;
  left: 120px; /** WIDTH SET HERE **/
}

.blockForm label textarea{
  display:inline;
  position: relative;
  top: -15px;
  left: 120px; /** WIDTH SET HERE **/
  margin-bottom: -15px;
}

.blockForm fieldset {
  float: left;
  margin-left : 120px;
  border: 2px groove threedface;
  padding: 10px 10px 10px;
}

.blockForm label input[type="radio"],  .blockForm label input[type="checkbox"] {
  display:inline;
  margin-right:3px;
  position: static;
}
.blockForm label.inline,  .blockForm label.stacked {
  width : auto;
  margin-right: 10px;
}

.blockForm .row {
  position :relative;
}

.blockForm fieldset legend {
  position: absolute;
  top : 0;
  left : 0;
  overflow: auto;
  width: 115px; /** WIDTH SET HERE **/
  height:auto;
  white-space: pre-line;
  min-height: 300px;
}


/* Form Errors */
.inlineForm .errorIcon, .blockForm .errorIcon {
  background: url(../img/errorIcon.gif) no-repeat;
  display:inline;
  width:16px;
  height:14px;
  margin: 0 0 -2px 2px;
  position: absolute;
}

.inlineForm .helpIcon, .blockForm .helpIcon {
  background: url(../img/helpIcon.png) no-repeat;
  display:inline;
  width:16px;
  height:14px;
  padding-right:20px;
  position: relative;
}

.formErrorsHeader {
    background: url("../img/errorIcon.gif") no-repeat scroll 0 0 transparent;
    margin: 0 0 5px;
    padding: 0 0 0 20px;
}

.formErrors ul  {
  margin: 3px 0 15px 25px;
  padding: 0;
}

.formErrors ul li {
  list-style-type: square;
  color: #f00;
}

.formErrors ul li a {
  color: #f00;
  text-decoration: underline;
}

.formErrors ul li a:hover {
  color: #000;
  text-decoration: none;
}

.row div.fieldErrors, .row div.error-message {
  display:block;
  margin: 2px 0 0 0;
  clear : both;
  color: #f00;
  float:left;
}

.row .fieldErrors span {
  display : block;
}

.blockForm .row .fieldErrors {
  display: block;
  margin: 0px 0 3px 120px; /** WIDTH SET HERE **/
}

.formErrors {display:none;}

label.error {float :none;}

.blockForm .formErrors label {width: auto; margin: 0;}

/* Styles */
.TWS_Overlay {
  border : 0;
  background-color: #000;
  opacity : 0.6;
  filter:alpha(opacity=60);
  color: #fff;
  cursor :auto;
  font-weight: bold;
  -moz-border-radius: 10px;
  -webkit-border-radius : 10px;
  border-radius : 10px;
  overflow: auto;
}

.TWS_OverlaySide {
  background: #000 url("../img/ajax-loader.gif") 5px 5px  no-repeat;
  opacity: .6;
  filter:alpha(opacity=60);
  color: #fff;
  cursor : auto;
  font-weight: bold;
  min-height: 50px;
  text-align: left;
  padding-left: 50px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.TWS_OverlayContent {
  padding : 50px 15px 15px 15px;
  background:url("../img/ajax-loader.gif") no-repeat center 10px;
}

.TWS_OverlayText {
  margin: 5px;
  min-height: 16px;
  padding: 5px 15px 15px 35px;
  text-align: left;
}

.TWS_SuccessText {
  background: url("../img/successIcon.png") no-repeat scroll 15px 5px transparent;
}

.TWS_ErrorText {
  background: url("../img/errorIcon.png") no-repeat scroll 15px 5px transparent;
}

.TWS_WarningText {
  background: url("../img/warningIcon.png") no-repeat scroll 15px 5px transparent;
}

.TWS_ConfirmText {
  background: url("../img/confirmIcon.png") no-repeat scroll 15px 5px transparent;
}

.TWS_OverlaySuccessTitle {
  background-color: #006400;
  color : #fff;
  padding: 3px 3px 3px 10px;
  text-align: left;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;

}

.TWS_OverlayErrorTitle {
  background-color: #8A0808;
  color : #fff;
  padding: 3px 3px 3px 10px;
  text-align: left;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}

.TWS_OverlayWarningTitle {
  background-color: #FF4500;
  color : #fff;
  padding: 3px 3px 3px 10px;
  text-align: left;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}

.TWS_OverlayConfirmTitle {
  background-color: #FFA500;
  color : #fff;
  padding: 3px 3px 3px 10px;
  text-align: left;
  -moz-border-top-left-radius: 10px;
  -webkit-border-top-left-radius: 10px;
  border-top-left-radius: 10px;
  -moz-border-top-right-radius: 10px;
  -webkit-border-top-right-radius: 10px;
  border-top-right-radius: 10px;
}


.TWS_OverlayTitleText {
 text-align: left;
}

.TWS_OverlayClose {
  float: right;
  margin-right: 10px;
  height : 20px;
  width: 20px;
  cursor : pointer;
  background: url("../img/closeIcon.png") no-repeat scroll 0 0 transparent;
}

.TWS_OverlayButton {
  float:left;
  padding: 10px;
  margin:8px;
}

/* Form Styles for WYM Editor */
div[role=main] header, var {
    display: block;
    font-size: 2em;
    font-weight: bold;
    font-style: normal;
    margin: 0.67em 0;
    color: #0981AC;
    border-top: 1px dotted #CCC;
    }

body.wym_dialog fieldset label {
  width : 150px;
  text-align: right;
  float:left;
  display: block;
}

body.wym_dialog fieldset input, body.wym_dialog fieldset textarea, body.wym_dialog fieldset select {
  margin-left : 10px;
  float:left;
}

body.wym_dialog fieldset div.row {
  float:left;
}

body.wym_dialog fieldset legend {
  font-weight:bold;
  font-size: 1.2em;
}

body.wym_dialog fieldset div.row-indent {
  margin-left : 155px;
}

.imgLeft {
  float : left;
  margin-right: 3px;
}

.imgRight {
  float : right;
  margin-left: 3px;
}

/** End of Sample */