/* For things shared across all skins, e.x. modal styles */

/* MODAL CSS */
/*
     #dialog-modal-fade
	The lightbox effect. Change background and opacity.
	Everything else is required.

     .dialog
	Provides darker border for the dialog box using its 
	padding and background color. Also controls minimum 
	dialog size using its min-(width|height) properties

     .dialog>div:first-child
	Content  area of  a dialog box;  the lighter-shaded
	portion.  Its  color is  set  by a  background  and
	border.  It  has  a  max-height  to  avoid  clipped
	dialogs,  though obviously,  this isn't fool-proof.

     .dialog>div:first-child+div
	The container  for the buttons  at the bottom  of a
	modal.

     .dialog .modal-form-error
	Text color for error messages in dialog forms.

     .dialog .dialog-header
        Optional  header  for  a dialog.  The SPAN  is  the
	large text; the P is an optional small description.
	Negative  margins  allow it to "ignore" the padding
	set on .dialog>div:first-child , making it flush
	with that element's edges.

     .dialog.modal.stretch
	Used for stretched modals,  which  should  (almost)
	fill the screen.  Edit  the top,  right,  left, and
	bottom properties to control spacing from each edge
	and browsers  will stretch it to  match the values.

     .dialog.modeless
	Used for modeless dialogs  (dialogs that don't lock
	the page). Multiple such dialogs can exist at once.
	This  class uses CSS3 properties  (including  those
	with  vendor prefixes)  to add drop shadows to such
	dialogs.

     .dialog.modeless.focused
	Applied via JS to the focused modeless dialog. This
	allows a dialog to be shown  in front when multiple
	modeless dialogs exist  on-screen.  This basic  CSS
	just forces it to the front using z-index,  but you
	could,  for  example,  add CSS to this class and to
	the previous  one to apply color changes  to active
	and inactive dialogs, like many OSes do.
*/

#dialog-modal-fade{position:fixed;z-index:999;left:0;top:0;width:100%;height:100%;background:#000;opacity:.7;}
.dialog{position:fixed;z-index:1000;display:block;min-width:300px;max-width:700px;padding:.25em;background:#0C2A0C}
   .dialog>div:first-child{max-height:500px;padding:1em;border:6px double #0C2A0C;overflow:auto;background:#1C3A1C}
      .dialog>div:first-child input.stretch{width:272px;padding:1px 0!important;border:2px inset #FFF!important;margin:0}
   .dialog>div:first-child+div{padding:.5em 0 .75em;text-align:center}
      .dialog>div:first-child+div>input{margin-left:.5em}
      .dialog>div:first-child+div>input:first-child{margin-left:0}
   .dialog>a.drag{position:absolute;right:0;top:0;display:inline-block;padding:5px 10px;background:#0C2A0C;cursor:move}
.dialog.modal.stretch{left:30px!important;right:30px!important;top:15px!important;bottom:15px!important;margin:0!important;max-width:none}
   .dialog.modal.stretch>div:first-child{width:auto;height:auto;max-height:none;position:absolute;left:1em;right:1em;top:1em;bottom:4em}
   .dialog.modal.stretch>div:first-child+div{position:absolute;left:1em;right:1em;bottom:1em}

   .dialog ul.checkbox-list{list-style:none;padding:0;margin:0}
      .dialog ul.checkbox-list>li{padding:.2em 0}
         .dialog ul.checkbox-list>li>input:first-child{margin:0 .75em}

   .dialog .modal-form-error{color:#FC6}

   .dialog label.above{display:block;margin-bottom:.6em}

   .dialog .dialog-header{display:block;padding:.75em 1em;margin:-1em -1em 1em -1em;background:#194B19}
      .dialog .dialog-header>span{display:block;font-size:1.25em;font-weight:bold}
      .dialog .dialog-header>p{margin:0}

.dialog.modal{left:50%;top:50%}
.dialog.modeless{z-index:997;box-shadow:1px 1px 8px black;-moz-box-shadow:1px 1px 8px black;-webkit-box-shadow:1px 1px 8px black} /* PROPRIETARY EXTENSIONS */
.dialog.modeless.focused{z-index:998}
/* END MODAL */