: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;
  
  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;
}

a.noLine
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  11px;
  color            :  #000000;
   
  text-decoration  :  none;
}

a.noLine:hover
{
  font-family      :  verdana, arial, sans-serif;
  font-size        :  11px;
  color            :  #444444;
   
  text-decoration  :  none;
}

a img
{
  border  :  none;
}


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;
}

.fLeft
{
  float  :  left;
}

.fRight
{
  float  :  right;
}

.gray
{
  color  :  #888888;
}

.green
{
  color  :  #378e2b;
}

span.details
{
  color   :  #000000;
  cursor  :  help;
}


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
{
  color  :  #888888;
}

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
{
  min-width  :  1129px;
}

#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  :  8px;
  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, .error, .success, .info, .info.noHide
{
  clear                  :  both;
  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;
}

.alert
{
  background  :  #feffc8 url('../images/icons/alert.png') 10px 10px no-repeat;
  border      :  solid 1px #f1aa2d;
}

.error
{
  background  :  #fdcea4 url('../images/icons/error.png') 10px 10px no-repeat;
  border      :  solid 1px #c44509;
}

.success
{
  background  :  #d4f684 url('../images/icons/success.png') 10px 10px no-repeat;
  border      :  solid 1px #739f1d;
}

.info
{
  background  :  #c3e4fd url('../images/icons/info.png') 10px 10px no-repeat;
  border      :  solid 1px #688fdc;
}

.info.noHide
{
  background  :  #eeeeee url('../images/icons/info.gif') 10px 10px no-repeat;
  border      :  solid 1px #cccccc;
}

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

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

.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.withdrawan
{
  border-color  :  #fc7a7a;
  background    :  #fef1f1;
}

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

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

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

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

.pending
{
  color  :  #0000ff;
}



#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
{
  overflow  :  auto;
}

#Profile #Subjects 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;
}


#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;
  min-height  :  120px;
}

#Calendar .list
{
  padding     :  15px;
  background  :  #e9e9e9;
  min-height  :  120px;
}

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

#Calendar .day span
{
  display      :  block;

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

  text-align   :  right;
}

.stats
{
  display     :  inline-block;
  background  :  #666666;
  border      :  solid 1px #444444;
  color       :  #ffffff;
  padding     :  2px 8px 2px 8px;
  margin      :  0px 0px 0px 10px;
  min-width   :  32px;
}


h3.ui-accordion-header a
{
  font-size  :  11px;
}

.plupload_filelist_header .plupload_cell, .plupload_filelist_footer .plupload_upload_status, .plupload_filelist_footer .plupload_total_status, .plupload_filelist_footer .plupload_total_file_size
{
  color  :  #ffffff;
}


#ProfileActions
{
  height    :  30px;
  overflow  :  hidden;
}

#ProfileActions button
{
  display       :  inline-block;
  margin-right  :  8px;
}

/*************** Timetable  ******************/

.tblTimetable .grid .header td
{
  font-weight  :  normal;
  font-size    :  16px;
  padding      :  15px;
}

.tblTimetable div.droppable
{
  padding  :  0px 0px 10px 0px;
}

.tblTimetable div.droppable.hover
{
  border      :  dotted 1px #aaaaaa;
  padding     :  0px 0px 9px 0px;
  background  :  #ffffff;
}

.tblTimetable div.droppable span.subject, .tblTimetable div.droppable span.teacher
{
  position     :  relative;
  display      :  block;
  margin       :  0px 10px 0px 10px;
  padding      :  6px;
  height       :  16px;
  line-height  :  16px;
}

.tblTimetable div.droppable span.timing
{
  display        :  block;
  height         :  18px;
  line-height    :  18px;
  border-bottom  :  dotted 1px #e0e0e0;
  margin-bottom  :  10px;
  background     :  #f0f0f0; 
  
  font-size      :  10px;
  color          :  #bbbbbb;
  
  text-align     :  center;
}

.tblTimetable tr.odd div.droppable span.timing
{
  border-bottom  :  dotted 1px #d0d0d0;
  background     :  #e6e6e6; 
  color          :  #bbbbbb;
}

.tblTimetable div.droppable.hover span.timing
{
  height         :  17px;
  line-height    :  17px;
  margin-bottom  :  9px;
}

.tblTimetable div.droppable span.subject.selected
{
  margin-bottom  :  5px;
  padding        :  5px;
  background     :  #feffc8;
  border         :  dotted 1px #f1aa2d;
}

.tblTimetable div.droppable span.teacher.selected
{
  padding     :  5px;
  background  :  #c3e4fd;
  border      :  dotted 1px #688fdc;
}

.tblTimetable div.droppable span.subject.saved, .tblTimetable div.droppable span.teacher.saved
{
  background  :  #d4f684;
  border      :  dotted 1px #739f1d;
}

.tblTimetable div.droppable span.subject.error, .tblTimetable div.droppable span.teacher.error
{
  background  :  #fdcea4;
  border      :  dotted 1px #c44509;
}

.tblTimetable div.droppable span img
{
  position  :  absolute;
  top       :  8px;
  right     :  6px;
  cursor    :  pointer;
}


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

.tblTimetable ul li
{
  float   :  left;
  margin  :  2px 5px 0px 0px;
}

.tblTimetable ul li span.draggable
{
  display     :  block;
  cursor      :  move;
  padding     :  6px 10px 6px 10px;
  background  :  #f9f9f9;
  border      :  dotted 1px #cccccc;  
}

.tblTimetable ul li span.draggable:hover
{
  background  :  #eeeeee;
  border      :  dotted 1px #666666;  
}

.tblTimetable ul li span.draggable.subject:hover
{
  background    :  #feffc8;
  border-color  :  #f1aa2d;
}

.tblTimetable ul li span.draggable.teacher:hover
{
  background    :  #c3e4fd;
  border-color  :  #688fdc;
}

.tblTimetable ul li span.draggable.disabled
{
  color         :  #cccccc;
  background    :  #f9f9f9;
  border-color  :  #dddddd;
}


.grid #TblAttendance a, .grid #TblAttendance td
{
  font-weight  :  normal !important;
}

.grid .ft_container table tr th select
{
  margin-top  :  3px;
}

.grid .header a
{
  color  :  #ffff00 !important;
}

.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;
}



.select2-container 
{
	box-sizing		: border-box;
	display			: inline-block;
	margin			: 0;
	position		: relative;
	vertical-align	: middle; 
}
  
.select2-container .select2-selection--single 
{
	box-sizing			: border-box;
	cursor				: pointer;
	display				: block;
	height				: 22px;
	user-select			: none;
	-webkit-user-select	: none; 
}

.select2-dropdown 
{
	background-color	: white;
	border				: 1px solid #aaa;
	border-radius		: 4px;
	box-sizing			: border-box;
	display				: block;
	position			: absolute;
	left				: -100000px;
	width				: 100%;
	z-index				: 1051; 
}

.select2-results 
{
	display	: block; 
}

.select2-results__options 
{
	list-style	: none;
	margin		: 0;
	padding		: 0; 
}

.select2-results__option 
{
	padding				: 6px;
	user-select			: none;
	-webkit-user-select	: none; 
}

.select2-results__option[aria-selected] 
{
	cursor	: pointer; 
}

.select2-container--open .select2-dropdown 
{
	left	: 0;
}

.select2-container--open .select2-dropdown--above 
{
	border-bottom				: none;
	border-bottom-left-radius	: 0;
	border-bottom-right-radius	: 0; 
}

.select2-search--dropdown .select2-search__field 
{
	padding		: 4px;
	width		: 100%;
	box-sizing	: border-box; 
}

.select2-hidden-accessible 
{
	border		: 0 !important;
	clip		: rect(0 0 0 0) !important;
	height		: 1px !important;
	margin		: -1px !important;
	overflow	: hidden !important;
	padding		: 0 !important;
	position	: absolute !important;
	width		: 1px !important; 
}

.select2-container--default .select2-selection--single
{
	font-family				: Verdana,Arial,sans-serif;
	font-size				: 1em;
	color					: #666666;
	padding					: 3.2px;
	border					: solid 1px #888888;
	background				: #f9f9f9;
	-moz-border-radius		: 3px;
	border-radius			: 3px;
	-webkit-border-radius	: 3px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow 
{
	height		: 23px;
	position	: absolute;
	top			: 1px;
	right		: 1px;
	width		: 20px; 
}
.select2-container--default .select2-selection--single .select2-selection__arrow b 
{
	border-color	: #888 transparent transparent transparent;
	border-style	: solid;
	border-width	: 5px 4px 0 4px;
	height			: 0;
	left			: 50%;
	margin-left		: -4px;
	margin-top		: -2px;
	position		: absolute;
	top				: 50%;
}

.select2-container--default .select2-results > .select2-results__options 
{
  max-height	: 200px;
  overflow-y	: auto; 
}