:focus
{
  -moz-outline-style  :  none;
}

html
{

}

body
{
  margin  :  0px;
}

table
{
  border-collapse  :  collapse;
  border-spacing   :  0;
  table-layout     :  fixed;
}

body, p, div, td, span, a
{
  font-family  :  verdana, arial, sans-serif;
  font-size    :  11px;
  color        :  #333333;
  
  position     :  relative;
  outline      :  none;  
}

h1
{
  font-family  :  verdana, arial, sans-serif;
  font-weight  :  bold;
  font-size    :  21px;
  color        :  #333333;
  
  text-shadow  :  1px 1px 0px #999999;
  
  margin       :  0px 0px 15px 0px;
  padding      :  0px;
}

h2
{
  font-family  :  verdana, arial, sans-serif;
  font-weight  :  bold;
  font-size    :  17px;
  color        :  #333333;
  
  margin       :  0px 0px 5px 0px;
  padding      :  0px;
}

h3
{
  font-family    :  verdana, arial, sans-serif;
  font-weight    :  bold;
  font-size      :  14px;
  color          :  #444444;
  
  margin         :  0px 0px 5px 0px;
  padding        :  0px;
  border-bottom  :  solid 2px #444444;
}

h3 a
{
  font-family    :  verdana, arial, sans-serif;
  font-weight    :  bold;
  font-size      :  14px;
  color          :  #444444;
  
  text-decoration  :  none;
}

h4
{
  font-family    :  verdana, arial, sans-serif;
  font-weight    :  bold;
  font-size      :  12px;
  color          :  #666666;
  
  margin         :  0px 0px 10px 0px;
  padding        :  0px;
  border-bottom  :  solid 1px #666666;
}

h5
{
  font-family  :  verdana, arial, sans-serif;
  font-weight  :  bold;
  font-size    :  14px;
  color        :  #333333;
  
  margin       :  0px;
  padding      :  0px;
}


div.br5
{
  clear        :  both;
  line-height  :  5px;
  height       :  5px;
  font-size    :  1px;
}

div.br10
{
  clear        :  both;
  line-height  :  10px;
  height       :  10px;
  font-size    :  1px;
}

hr
{
  border-top     :  dotted 1px #999999;
  border-right   :  solid 1px #ffffff;
  border-bottom  :  solid 1px #ffffff;
  border-left    :  solid 1px #ffffff;
  margin         :  20px 0px 20px 0px;
}

.hidden
{
  display  :  none;
}

.noPadding
{
  padding  :  0px;
}

.gray
{
  color  :  #888888;
}

.green
{
  color  :  #378e2b;
}

a img
{
  border  :  none;
}

form
{
  margin  :  0px;
}

form select
{
  max-width  :  288px;
}

label
{
  font-family  :  verdana, arial, sans-serif;
  font-size    :  12px;
  color        :  #333333;
  
  display      :  block;
  margin       :  0px;
  padding      :  0px 0px 2px 0px;
}

label span
{
  font-size  :  10px;
  color      :  #bbbbbb;
}

label span.required
{
  color  :  #be0000;
}

label span a, .ui-widget-content label span a
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  10px;
  color            :  #bbbbbb;
  
  text-decoration  :  none;
}

label span a:hover, .ui-widget-content label span a:hover
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  10px;
  color            :  #666666;
  
  text-decoration  :  none;
}


ul
{
  margin      :  5px 0px 5px 20px;
  padding     :  0px;
  list-style  :  square;
}

ul li
{
  padding  :  2px 0px 2px 0px;
  margin   :  0px;
}

ul.list li
{
  margin   :  0px;
  padding  :  3px 0px 3px 0px;
}

ul.list li a
{
  font-size        :  12px;
  color            :  #666666;
  text-decoration  :  none;
}

ul.list li a:hover
{
  color            :  #333333;
  text-decoration  :  underline;
}

ul.list li a.selected
{
  font-weight      :  bold;
  color            :  #000000;
  text-decoration  :  none;
}


#MainDiv
{

}

#Welcome a small
{
  position               :  absolute;
  top                    :  -7px;
  right                  :  -6px;
  background             : #aa0000;
  padding                :  2px 5px 3px 5px;

  font-size              :  11px;
  color                  : #ffffff;

  line-height            :  12px;
  height                 :  12px;

  -moz-border-radius     :  50%;
  border-radius          :  50%;
  -webkit-border-radius  :  50%; 
}

#Body
{
  clear       :  both;
  min-height  :  451px;
}

#Body #Page #Indicator
{
  float         :  right;
  display       :  none;
  width         :  48px;
  height        :  48px;
  margin-right  :  22px;
}

#Body #Page img
{
  float         :  left;
  display       :  block;
  margin-right  :  5px;
  width         :  48px;
  height        :  48px;
}

#Footer
{
  line-height  :  60px;
  
  font-family  :  verdana, arial, sans-serif;
  font-size    :  11px;
  color        :  #eeeeee;    
  
  text-align   :  center;
  text-shadow  :  1px 1px 0 #000000;
}

#Footer a
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  11px;
  color            :  #eeeeee;  

  text-shadow      :  1px 1px 0 #000000;
  text-decoration  :  none;
}

#Footer a:hover
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  11px;
  color            :  #aaaaaa;  

  text-shadow      :  1px 1px 0 #000000;
  text-decoration  :  none;
}

.padding10
{
  padding  :  8px;
}

body.popupBg
{
  background  :  #ffffff;
}


#PopupDiv
{
  margin   :  0px;
  padding  :  20px;
}


.alert
{
  clear                  :  both;
  background             :  #feffc8 url('../images/icons/alert.png') 10px 10px no-repeat;
  border                 :  solid 1px #f1aa2d;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px; 
  
  font-family            :  verdana, arial, sans-serif;
  font-size              :  11px;
  color                  :  #000000;
}

.error
{
  clear                  :  both;
  background             :  #fdcea4 url('../images/icons/error.png') 10px 10px no-repeat;
  border                 :  solid 1px #c44509;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;  
  
  font-family            :  verdana, arial, sans-serif;
  font-size              :  11px;
  color                  :  #000000;
}

.success
{
  clear                  :  both;
  background             :  #d4f684 url('../images/icons/success.png') 10px 10px no-repeat;
  border                 :  solid 1px #739f1d;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;
  
  font-family            :  verdana, arial, sans-serif;
  font-size              :  11px;
  color                  :  #000000;
}

.info
{
  clear                  :  both;
  background             :  #c3e4fd url('../images/icons/info.png') 10px 10px no-repeat;
  border                 :  solid 1px #688fdc;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;
  
  font-family            :  verdana, arial, sans-serif;
  font-size              :  11px;
  color                  :  #000000;
}

.info.noHide
{
  clear                  :  both;
  background             :  #eeeeee url('../images/icons/info.gif') 10px 10px no-repeat;
  border                 :  solid 1px #cccccc;
  padding                :  10px 10px 10px 35px;
  margin-bottom          :  15px;
  min-height             :  16px;
  line-height            :  16px;
  cursor                 :  pointer;
  
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;
  
  font-family            :  "Trebuchet MS", verdana, arial, sans-serif;
  font-size              :  11px;
  color                  :  #000000;
}

.icon, .icnDelete, .icnEdit, .icnView, .icnToggle, .icnExport, .icnDownload, .icnRestore, .icnPicture, .icnThumb, .icnEmail, .icnStats, .icnVideo, .icnStatus, .icnFlash, .icnScript
{
  margin  :  0px 3px 0px 3px;
  cursor  :  pointer;
  width   :  16px;
  height  :  16px;
}

.dlgConfirm
{
  padding  :  10px 5px 10px 5px;
}

.dlgConfirm span
{
  float   :  left;
  margin  :  0px 7px 20px 0px;
}


/* Login & Password Page */

#Tabs
{
  width   :  550px;
  margin  :  80px auto 0px auto;
}

#Tabs .tab
{
  padding     :  30px 30px 30px 190px;
  min-height  :  152px;
}

#Tabs input.textbox
{
  font-size  :  13px;
  width      :  96%;
  padding    :  6px;
}


/* My Account Page */

#frmMyAccount, #frmMyPassword
{
  width  :  500px;
}

#frmMyAccount input.textbox, #frmMyPassword input.textbox
{
  font-size  :  13px;
  width      :  50%;
}

#frmMyAccount select
{
  font-size  :  13px;
}



/*   Navigator  */

ul#Navigator
{
  margin      :  5px 0px 0px 0px;
  padding     :  0px;
  list-style  :  none;
}

ul#Navigator li
{
  float        :  left;
  width        :  320px;
  padding      :  5px;
  margin       :  10px 20px 10px 0px;
  border       :  solid 1px #dddddd;
  background   :  #f6f6f6;
  line-height  :  16px;
}

ul#Navigator li:hover
{
  border      :  solid 1px #cccccc;
  background  :  #e6e6e6;
}

ul#Navigator li .picture
{
  border        :  solid 1px #dddddd;
  padding       :  1px;
  background    :  #ffffff;
  margin-right  :  12px;
  float         :  left;
}

ul#Navigator li:hover .picture
{
  border  :  solid 1px #cccccc;
}

ul#Navigator li .picture img
{
  width   :  96px;
  height  :  96px;
}

ul#Navigator li b, ul#Navigator li a
{
  font-family      :  verdana, arial, sans-serif;
  font-weight      :  bold;
  font-size        :  11px;
  color            :  #444444; 
  
  display          :  block;
  text-decoration  :  none;
}

ul#Navigator li a:hover
{
  color            :  #000000; 
  text-decoration  :  none;
}

ul#Navigator li i
{
  color  :  #666666;
}

ul#Navigator li.withdrawn
{
  border-color  :  #fc7a7a;
  background    :  #fef1f1;
}

ul#Navigator li.graduated
{
  border-color  :  #4baa4b;
  background    :  #f3fdf3;
}

ul#Navigator li b.withdrawn, #Profile b.withdrawn
{
  color  :  #ff0000;
}

ul#Navigator li b.graduated
{
  color  :  #00aa00;
}

ul#Navigator li b.gray
{
  color  :  #777777;
}



#Profile #Summary
{
  padding-bottom  :  25px;
}

#Profile #Summary .picture
{
  border        :  solid 2px #aaaaaa;
  padding       :  2px;
  background    :  #ffffff;
  margin-right  :  20px;
}

#Profile #Summary .picture img
{
  width   :  160px;
  height  :  160px;
}

#Profile #Summary td
{
  line-height  :  18px;
  border       :  solid 1px #ffffff;
}

#Profile #Summary .gray
{
  color  :  #555555;
}

#Profile .profile td label
{
  font-weight  :  bold;
}

#Profile #Subjects, #Profile #AdditionalSubjects
{
  overflow  :  auto;
}

#Profile #Subjects td, #Profile #AdditionalSubjects td
{
  line-height  :  18px;
}

#Profile .comment
{
  background             :  #f3f3f3;
  border-left            :  solid 15px #dddddd;
  margin                 :  5px 0px 20px 0px;
  
  -moz-border-radius     :  8px;
  border-radius          :  8px;
  -webkit-border-radius  :  8px;   
}

#Profile .comment.darkRed
{
  border-color  :  #d63d3d;
}

#Profile .comment.lightRed
{
  border-color  :  #fecdcd;
}

#Profile .comment.lightGreen
{
  border-color  :  #c5f2bf;
}

#Profile .comment.darkGreen
{
  border-color  :  #378e2b;
}

#Profile .comment div
{
  padding      :  12px;
  line-height  :  18px;
}

#Profile .comment .date
{
  font-weight  :  bold;
  font-size    :  18px;
  color        :  #999999;
  
  line-height  :  27px;
  padding      :  10px 5px 10px 5px;
  width        :  auto;
}

#Profile .comment b
{
  display    :  block;
  margin     :  0px 0px 5px 0px;
  font-size  :  13px;
}

#Profile .comment img.delete
{
  cursor  :  pointer;
}


@media all and (max-width : 640px) 
{
	#MainDiv
	{
	  min-width  :  100%;
	}
	

}


.grid tr.yellow
{
  background  :  #feffc8;
}

.grid tr.red
{
  background  :  #fdcea4;
}

.grid tr.green
{
  background  :  #d4f684;
}

.grid tr.blue
{
  background  :  #c3e4fd;
}


.btnAdd.ui-button-text-icon-primary .ui-button-text
{
  padding      :  0.4em 1.3em; 
  text-indent  :  -9999999px;
}



.grid a.roundPic
{
  display      :  block;
  line-height  :  48px;
  height       :  48px;
}

.grid a.roundPic img
{
  width                  :  48px;
  height                 :  48px;
  margin                 :  0px 10px 0px 5px;
  display                :  block;
  float                  :  left;
  
  -moz-border-radius     :  50%;
  border-radius          :  50%;
  -webkit-border-radius  :  50%;
}

.grid a.roundPic span
{
  display      :  inline-block;
  line-height  :  18px;
  padding-top  :  5px;
}



#Calendar
{

}

#Calendar #Title
{
  padding  :  0px 0px 10px 0px;
}

#Calendar #Title td
{
  font-weight  :  bold;
  font-size    :  17px;
}

#Calendar .grid .header td
{
  font-size   :  17px;
  text-align  :  center;
}

#Calendar td.empty
{
  padding     :  15px;
  background  :  #f3f3f3;
  min-height  :  120px;
}

#Calendar .day
{
  padding     :  15px;
  background  :  #e9e9e9;
}

#Calendar .list
{
  padding     :  15px;
  background  :  #e9e9e9;
}

#Calendar .day .dayDiv, #Calendar .list .dayDiv
{
  min-height  :  140px;
}

#Calendar .day.sunday, #Calendar .list.sunday
{
  background  :  #dadada;
}

#Calendar .day span, #Calendar .list span
{
  display      :  block;

  font-family  :  verdana, arial, sans-serif;  
  font-weight  :  bold;
  font-size    :  42px;
  color        :  #bbbbbb;

  text-align   :  right;
}

#Calendar .list span
{
  color  :  #888888;
}

#Calendar .list .booking
{
  font-family            :  verdana, arial, sans-serif;  
  font-size              :  12px;
  color                  :  #ffffff;

  line-height            :  12px;
  text-align             :  left;

  display                :  block;
  cursor                 :  pointer;
  margin                 :  10px 0px 0px 0px;
  padding                :  8px 10px;
  -moz-border-radius     :  4px;
  border-radius          :  4px;
  -webkit-border-radius  :  4px;
}

#Calendar .list .rehearsal
{
  background  :  #688fdc;
}

#Calendar .list .setup
{
  background  :  #fc7a7a;
}

#Calendar .list .event
{
  background  :  #4baa4b;
}

#Calendar .list .booking b
{
  font-size  :  13px;
  display    :  block;
}

#Calendar .list .booking small
{
  font-size    :  11px;
  display      :  block;
  line-height  :  20px;
}

#Calendar .list .booking .school
{
  font-size  :  12px;
  color      :  #ffffff;
  display    :  block;
  padding    :  10px 0px 3px 0px;
}

#Calendar .list .booking i
{
  display      :  block;
  font-weight  :  bold;
}


.uploadProgress
{
  border                 :  solid 1px #888888;
  background             :  #f9f9f9;
  padding                :  2px;
  height                 :  17px;
  width                  :  91%;
  overflow               :  hidden;
  
  -moz-border-radius     :  3px;
  border-radius          :  3px;
  -webkit-border-radius  :  3px;
}

.uploadProgress .progressBar
{
  font-family            :  verdana, arial, sans-serif;
  font-size              :  11px;
  color                  :  #ffffff;
  text-indent            :  7px;
  
  background             :  #0a84ff;
  height                 :  17px;
  line-height            :  17px;
  width                  :  50%;
  
  -moz-border-radius     :  3px;
  border-radius          :  3px;
  -webkit-border-radius  :  3px;
}

.uploadProgress .progressBar.uploaded
{
  background  :  #33ac03;
}


ul.stats
{
  margin      :  0px;
  padding     :  0px;
  list-style  :  none;
}

ul.stats li
{
  display        :  inline-block;
  padding        :  10px 20px;
  margin         :  0px 5px 0px 5px;
  background     :  #337ab7;
  color          :  #ffffff;
  font-size      :  21px;
  text-align     :  center;
  min-width      :  150px;
  border-radius  :  10px;
}

ul.stats li span
{
  display      :  block;
  font-weight  :  bold;
  font-size    :  36px;
  color        :  #ffffff;
  margin       :  5px 0px 0px 0px;
}

ul.stats li:nth-child(2)
{
  background  :  #00a65a;
}

ul.stats li:nth-child(3)
{
  background  :  #f66955 ;
}