/* DETAILS ///////////////////////////////////////////////////////////////////
//                                                                          //
//                      Created By: S4 Integration                          //
//                    Last Edited By: Gareth Ambrose                        //
//                          Date: 08 November 2010                          //
//                                                                          //
/////////////////////////////////////////////////////////////////////////// */

/* Properties for the display */
html,
body
{
  height: 100%;
}

/* Properties for Page and elements
  - Set the default properties
*/
body
{
  margin: 0 auto;
  font-family: Arial, Sans-Serif;
  font-size: 10pt;
  font-weight: normal;
  text-align: left;
  background-color: #E2E2E2;
  color: #000000;
}

/* Properties for Page Banner */
div.banner
{
  height: 100px;
  line-height: 100px;
  text-align: center;
  font-size: 64px;
  color: #000000;
  background: url(../Images/Banner.png) repeat-x bottom center;
  background-color: #FFFFFF;
  border: solid 1px #808080;
  border-bottom: none;
}

/* Properties for Page Content */
div.content
{
  margin-top: 10px;
  height: auto;
  min-width: 974px;
  padding: 10px;
  background-color: #F8F8F8;
  border: solid 1px #E2E2E2;
  overflow: auto;
}

/* Properties for Notifications - Error
  - Set the error style for notifications
*/
div.error
{
  background: url(../Images/Error.png) repeat-x bottom center;
  color: #FFFFFF;
  border: solid 1px #FF0000;
  overflow: auto;
}

/* Properties for Notifications - Notify
  - Set the notify style for notifications
*/
div.notify
{
  background: url(../Images/Notify.png) repeat-x bottom center;
  color: #FFFFFF;
  border: solid 1px #008000;
  overflow: auto;
}

/* Properties for Page Menu */
div.menu
{
  height: 35px;
  padding: 5px;
  background: url(../Images/MenuBottom.png) repeat-x bottom center;
  background-color: #FFFFFF;
  border: solid 1px #808080;
}

/* Properties for Page Menu - Header
  - Set the menu header properties
*/
div.menuHeader
{
  float: right;
  height: 35px;
  line-height: 35px;
  font-size: 10pt;
  font-weight: bold;
}

/* Properties for Page Menu Lvl 2 (drop down) - Sub Menu
  - Set the drop down menu properties
*/
div.subMenu
{
  margin-top: 0px;
  padding: 0 0 3px 0;
  background: url(../Images/SubMenuBottom.png) no-repeat bottom center;
}

/* Properties for Page Menu Lvl 2 (drop down) - Sub Menu Top
  - Set the drop down menu top properties
*/
div.subMenuTop
{
  padding: 5px 0 0 0;
  background: url(../Images/SubMenuTop.png) no-repeat top center;
}

/* Properties for Menu Lvl 3 (drop down expansion) - Not displayed
  - Don't display the drop down expansion
  - Adjust the margin upwards to align with the drop down menu
*/
div.subMenuTop div.subMenu
{
  display: none;
  margin-top: -23px;
}

/* Properties for Menu Lvl 3 (drop down expansion)
  - Set the top border
*/
div.subMenuTop div.subMenu div.subMenuTop
{
  padding: 3px 0 0 0;
  background: url(../Images/SubMenuTopL2.png) no-repeat top center;
}

/* Properties for Page */
div.page
{
  min-height: 100%;
  min-width: 996px;
  margin: 0 auto;
  padding: 0 10px 0 10px;
  background-color: #FFFFFF;
  border-left: solid 1px #808080;
  border-right: solid 1px #808080;
}

/* Properties for Page - Hyperlinks */
a, a:visited
{
  font-weight: bold;
  text-decoration: none;
  color: #008000;
} 

/* Properties for Page - Hyperlinks on hover */
a:hover
{ 
  text-decoration: underline;
}

td.warning, td.warning a
{
  color: #FFFFFF;
}

/* Properties for Page Lists */
p
{
  margin: 0px;
  padding: 0px;
}
p.pageList
{
  text-align: left;
}
p.pageList a
{
  padding: 0 3px 0 3px;
}
p.pageList a.current
{
  background-color: #FFFFFF;
  color: #008000;
  border: 1px solid #008000;
}
p.pageList a.image
{
  padding: 0 1px 0 1px;
}

/* Properties for Menus */
ul.menu,
ul.menu ul
{
	float: left;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Properties for Menu hyperlinks. */
ul.menu a,
ul.menu a:visited
{
  display: block;
  text-decoration: none;
  cursor: default;
}
ul.menu a:hover
{
  text-decoration: none;
}

/* Properties for Menu Lvl 1 (navigation) - Hyperlinks */
ul.menu a,
ul.menu a:visited
{
  width: 100px;
  height: 35px;
  line-height: 35px;
  text-align: center;
  font-size: 12pt;
  color: #FFFFFF;
}

/* Properties for Menu Lvl 1 (navigation) */
ul.menu li
{
	float: left;
  width: 100px;
  margin: 0 2px 0 0;
  background: url(../Images/MenuBase.png) no-repeat top center;
}

/* Properties for Menu Lvl 1 (navigation) - Logout
  - Set the current style for the navigation menu Logout item
*/
ul.menu li.logout 
{
  float: right;
  margin: 0 0px 0 0;
}

/* Properties for Menu Lvl 1 (navigation) - Parent
  - Set the parent style for the navigation menu
*/
ul.menu li.parent
{
  background: url(../Images/MenuBaseParent.png) no-repeat top center;
}

/* Properties for Menu Lvl 1 (navigation) - Current
  - Set the current style for the navigation menu
*/
ul.menu li.current
{
  background-position: center 99.9%; /* Internet Explorer 7 has a bug where background-position is specified as bottom or 100% */
}

/* Properties for Menu Lvl 1 (navigation) - On hover
  - The navigation menu item changes appearance when the nevigation menu is hovered over
*/
ul.menu li:hover,
ul.menu li.hover
{
  background-position: bottom center;
}

/* Properties for Menu Lvl 2 (drop down) - Not displayed
  - Don't display the drop down menu
  - The left edge of the drop down menu is moved so it is out of view
*/
ul.menu li div.subMenu
{
	position: absolute;
	left: -999em;
        z-index: 99;
}

/* Properties for Menu Lvl 2 (drop down) - Displayed
  - Display the drop down menu when the navigation menu is hovered over
  - The left edge of the drop down menu is auto adjusted so it is back into view
*/
ul.menu li:hover div.subMenu,
ul.menu li.hover div.subMenu
{
	left: auto;
}

/* Properties for Menu Lvl 2 (drop down) */
ul.menu li li
{
	clear: left;
  width: 150px;
}

/* Properties for Menu Lvl 3 (drop down expansion) - Displayed
  - Display the drop down expansion when the drop menu is hovered over
  - The left edge of the drop down expansion is adjusted so it is next to the drop down menu
*/
div.subMenuTop li:hover div.subMenu,
div.subMenuTop li.hover div.subMenu
{
  display: block;
	left: 150px;
}

/* Properties for Menu Lvl 2 (hyperlinks) - Parent
  - Set the parent style for the drop down menu
 */
div.subMenuTop li.parent a,
div.subMenuTop li.parent a:visited
{
  background: url(../Images/SubMenuParent.png) no-repeat top center;
  color: #000000;
}

/* Properties for Menu Lvl 2 (hyperlinks) - Parent on hover
  - Set the parent style for the drop down menu when it is hovered over
 */
div.subMenuTop li.parent a:hover,
div.subMenuTop li.parent.current a,
div.subMenuTop li.parent.current a:visited
{
  background: url(../Images/SubMenuParent.png) no-repeat bottom center;
  color: #FFFFFF;
}

/* Properties for Menu Lvl 2 and Menu Lvl 3 (hyperlinks)
  - Set the default style for the drop menu and drop down expansion
*/
div.subMenuTop li a,
div.subMenuTop li a:visited,
div.subMenuTop li li a,
div.subMenuTop li li a:visited,
div.subMenuTop li.parent li a,
div.subMenuTop li.parent li a:visited,
div.subMenuTop li.current li a,
div.subMenuTop li.current li a:visited,
div.subMenuTop li.parent.current li a,
div.subMenuTop li.parent.current li a:visited
{
  width: 143px;
  height: 20px;
  line-height: 20px;
  padding: 0 0 0 5px;
  text-align: left;
  font-size: 10pt;
  font-weight: normal;
  background: #FFFFFF;
  color: #000000;
  border-left: 1px solid #008000;
  border-right: 1px solid #008000;
}

/* Properties for Menu Lvl 2 and Menu Lvl 3 (hyperlinks) - On hover
  - Set the default style for the drop menu and drop down expansion when they are hovered over
*/
div.subMenuTop li a:hover,
div.subMenuTop li li a:hover,
div.subMenuTop li.parent li a:hover,
div.subMenuTop li.current li a:hover,
div.subMenuTop li.parent.current li a:hover
{
  background: url(../Images/SubMenuHighlight.png) repeat-y top center;
  color: #FFFFFF;
}

/* Properties for Menu Lvl 2 and Menu Lvl 3 (hyperlinks) - Current
  - Set the current style for the drop menu and drop down expansion
*/
div.subMenuTop li.current a,
div.subMenuTop li.current a:visited,
div.subMenuTop li li.current a,
div.subMenuTop li li.current a:visited,
div.subMenuTop li.parent li.current a,
div.subMenuTop li.parent li.current a:visited,
div.subMenuTop li.current li.current a,
div.subMenuTop li.current li.current a:visited,
div.subMenuTop li.parent.current li.current a,
div.subMenuTop li.parent.current li.current a:visited
{
  background: url(../Images/SubMenuHighlight.png) repeat-y top center;
  color: #FFFFFF;
}

/* Properties for Page Elements */
.fLeft            
{ 
  float: left;
}
.fRight           
{ 
  float: right;
}
.block
{
  display: block;
}
.bold
{
  font-weight: bold;
}
.highlightPrimary
{
  background-color: #A2D9A2;
}
.highlightSecondary
{
  background-color: #D4ECD4;
}
.superShort
{
  width: 25px;
}
.veryShort
{
  width: 50px;
}
.short
{
  width: 75px;
}
.shortish
{
  width: 100px;
}
.standard
{
  width: 125px;
}
.long
{
  width: 175px;
}
.veryLong
{
  width: 200px;
}
.superLong
{
  width: 225px;
}
.ultraLong
{
  width: 400px;
}
.scaryLong
{
  width: 425px;
}
.spacer
{
  margin-left: 5px;
}
.hspacer
{
  display: block;
  height: 3px;
  line-height: 1px;
}
.left
{
  text-align: left;
}
.center
{
  text-align: center;
}
.right
{
  text-align: right;
}
.high
{
  height: 60px;
}
.veryhigh
{
  height: 75px;
}
.titleA
{
  font-size: 16pt;
  font-style: italic;
}
.titleB
{
  font-size: 14pt;
}
.transparent
{
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.warning
{
  background-color: #FF2222;
}
select.superShort
{
  width: 30px;
}
select.veryShort
{
  width: 55px;
}
select.short
{
  width: 80px;
}
select.shortish
{
  width: 105px;
}
select.standard
{
  width: 130px;
}
select.long
{
  width: 180px;
}
select.veryLong
{
  width: 205px;
}
select.superLong
{
  width: 230px;
}
select.ultraLong
{
  width: 405px;
}
select.scaryLong
{
  width: 430px;
}

/* Properties for Image Blanks */
img.blank
{
  height: 10px;
  width: 10px;
}

/* Properties for Image Errors */
img.fieldError
{
  height: 10px;
  width: 10px;
  background-image: url(../Images/FieldError.png);
}

/* Properties for Image Links */
img.page
{
  position: relative;
  height: 16px;
  width: 16px;
  border: none;
}
img.pageList
{
  position: relative;
  bottom: -3px;
  height: 16px;
  width: 16px;
  border: none;
}

/* Properties for Image Required */
span.required
{
  color: #008000;
}

/* Properties for Tables */
table
{
  border-collapse: collapse;
  text-align: left;
}
th, td
{
  padding: 3px 5px 3px 5px;
  vertical-align: middle;
}
th
{
  background: #008000;
  color: #FFFFFF;
}

table.gridTable
{
  margin: 1px auto 4px auto;
  text-align: center;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #008000;
}

table.gridTable td
{
  border: 1px solid #008000;
}
table.gridTable th
{
  font-weight: bold;
  text-align: center;
  background-color: #FFFFFF;
  color: #000000;
  border: 1px solid #008000;
}

table.subTable
{
  margin: 1px auto 4px auto;
  text-align: center;
  border: 1px solid #008000;
}

table.subTable th
{
  font-weight: bold;
  text-align: center;
  background-color: #FFFFFF;
  color: #000000;
  border-bottom: 1px solid #008000;
}

table.reportTable
{
  margin: 1px auto 4px auto;
  width: 100%;
  text-align: center;
  border: 1px solid #008000;
}

table.reportTable td,
table.reportTable th
{
  border: 1px solid #008000;
  width: 33%;
}

table.viewTable
{
  text-align: center;
  border: 1px solid #008000;
}

table.bordered td,
table.bordered th
{
  border: 1px solid #008000;
}

table.centered
{
  margin: 1px auto 4px auto;
}

table td.left,
table th.left
{
  text-align: left;
}

table th.highlightPrimary
{
  background-color: #A2D9A2;
}
table th.highlightSecondary
{
  background-color: #D4ECD4;
}

form
{
  margin: 0;
  padding: 0;
}

input,
textarea
{
  font-family: Arial, Sans-Serif;
  font-size: 10pt;
  font-weight: normal;
}
input.button
{
  width: 75px;
  text-transform: none;
}
input.login
{
  text-transform: none;
}
textarea
{
  height: 100px;
}

.hackWidth /* This is used to try and get IE to respect set cell widths in tables with column spanning cells */
{
  width: 10000px;
}

.ChatRoomLink-Active {
  -webkit-animation-name: change_background_color;
  -moz-animation-name: change_background_color;
  -ms-animation-name: change_background_color;
  animation-name: change_background_color;
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -ms-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
  -moz-animation-direction: alternate;
  -ms-animation-direction: alternate;
  animation-direction: alternate;
  -webkit-animation-timing-function: ease-in-out;
  -moz-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

@-webkit-keyframes change_background_color {
  to {
    background-color: rgba(57, 230, 57, 0.4);
  }
}

@-moz-keyframes change_background_color {
  to {
    background-color: rgba(57, 230, 57, 0.4);
  }
}

@-ms-keyframes change_background_color {
  to {
    background-color: rgba(57, 230, 57, 0.4);
  }
}

@keyframes change_background_color {
  to {
    background-color: rgba(57, 230, 57, 0.4);
  }
}