/*Designed By Hadi Kiwan*/

#MainContent .ui-layout-north, #MainContent .ui-layout-south
{
    text-align: center;
}
#preStudentMessagesText 
{
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.NorthContent
{
    padding: 0px;
    position: relative;
    overflow: auto;
    height: 82px;
    background-color: #55708B;
}
.SouthContent
{
    position: relative;
    overflow: auto;
    height: 46px;
    padding: 0px;
}
/*padding:	10px;*/


/*
*	COMMON LAYOUT PANE FORMATTING
*/
/* Menu Conenten pane class */
.pane, .ui-layout-pane
{
    /* inner pane class */
    background-color: #FFF; /*border: 1px solid #777;*/ /*roger*/
    padding: 0; /* alignment & padding is on the inner-divs */
    overflow: auto; /* will be auto-set to 'hidden' for any pane with a 'scrolling content div' */
}
/*
*	OUTER-LAYOUT PANE FORMATTING
*/
.pane-north, .pane-south, .pane-west
{
    overflow: hidden;
}
.pane-north
{
    border-bottom: none;
}
.pane-north .Northcontent, .pane-south .Southcontent
{
    text-align: center;
}
.pane-center
{
    /* show off the inner-layout inside the outer-center-pane*/
    background-color: #F6F6F6;
    padding: 15px; /* for outer layout */
}

#MainContent .ui-layout-pane
{
    padding: 10px;
}

#MainContent .ui-layout-center
{
    padding: 0 !important; /* inner divs have padding */
}
#MainContent .ui-layout-content
{
    padding: 10px;
}
#MainContent .ui-layout-center h3
{
    font-size: 1em;
    padding: 5px;
    margin: 0;
}
/*
*	OUTER LAYOUT RESIZERS & TOGGLERS
*/
/* north-pane is not resizable
.resizer-north-dragging ,
.resizer-north:hover		{ background: url(../img/resizable-n.gif) repeat-x center; }*/

.resizer-north-dragging, .resizer-north:hover
{
    background: url('Images/resizable-s.gif?v=20160512') repeat-x center;
}

/*.resizer-south-dragging ,
.resizer-south:hover		{ background: url(Images/resizable-s.gif) repeat-x center; }*/

.resizer-west-dragging, .resizer-west-open:hover
{
    background: url('Images/resizable-w.jpg?v=20160512') repeat-y center;
    width: 11px; /* /*url(Images/resizable-w.jpg) repeat-y center;*/
}

.resizer-west-open
{
    /*background-color: #999;*/
    background: url('Images/resizable-w.jpg?v=20160512') repeat-y center; /*opacity: 0.1; 	filter: alpha(opacity=10);*/
    width: 11px !important;
}

/*.resizer-west-open:hover {
	opacity: 1;
	filter: alpha(opacity=100);
}*/
.resizer-dragging
{
    /* see draggable.opacity option 	opacity: 0.5; 	filter: alpha(opacity=50); 	*/
}
.resizer-dragging-limit
{
    background: #FF3300 !important;
}

/* IE6 * HACK - always show resizer graphics because IE6 cannot understand elem:hover */
/** html .resizer-north		{ background: url(../img/resizable-n.gif) repeat-x center !important; } */
* html .resizer-north
{
    background: url('Images/resizable-s.gif?v=20160512') repeat-x center !important;
}
/** html .resizer-south		{ background: url(Images/resizable-s.gif) repeat-x center !important; }
* html .resizer-west-open	{ background: url(Images/resizable-w.jpg) repeat-y center !important; }*/
/** html .resizer-east-open	{ background: url(Images/resizable-e.gif) repeat-y center !important; }*/
/** html .resizer-north , */
* html .resizer-north, /** html .resizer-south , * html .resizer-west-open ,*/ /** html .resizer-east-open { 	opacity: 0.1 !important; 	filter: alpha(opacity=10) !important; }*/ /* *	SIMPLE TOGGLER BUTTONS (used on Outer Layout North/South only) */ .toggler-north-open, /*.toggler-south-closed 		{ background: url(Images/toggle-up.gif) no-repeat center bottom; }*/ .toggler-north-closed, /*.toggler-south-open   		{ background: url(Images/toggle-dn.gif) no-repeat center top; }*/ /* *	extJS-STYLE RESIZER/SLIDER-BAR (CLOSED) */ .resizer-west-closed
{
    background: #D1E6FC url('Images/D1E6FC_40x100_textures_10_dots_medium_90.png?v=20160512') 0 0 repeat; /*border-top: 1px solid #777; 	border-bottom: 1px solid #777;*/
}
/*.resizer-west-closed:hover {
	background: #D1E6FC;
}*/

/*
 *	extJS-STYLE TOGGLE & PIN BUTTONS
 *
 *	these 'extra buttons' are INSIDE the east/west panes
 */

/* CUSTOM pin/close buttons */
span.button-pin, span.button-close
{
    position: absolute;
    top: 0;
    width: 21px;
    height: 35px;
    z-index: 2;
    display: block;
    cursor: pointer;
}
span.button-close-west
{
    /*left:	 0;*/
    right: 1px;
    z-index: 2;
}
/*Roger*/
/*span.button-close-east	{ right: 0; }*/
span.button-pin-west
{
    display: none;
    right: 1px;
    z-index: 1;
}
/*span.button-pin-east	{ left:	 1px; }*/

/* CUSTOM pin-buttons */
span.button-pin-up
{
    background: url('Images/pin-up-off.gif?v=20160512') no-repeat center;
}
span.button-pin-up:hover
{
    background: url('Images/pin-up-on.gif?v=20160512') no-repeat center;
}
span.button-pin-down
{
    background: url('Images/pin-dn-off.gif?v=20160512') no-repeat center;
}
span.button-pin-down:hover
{
    background: url('Images/pin-dn-on.gif?v=20160512') no-repeat center;
}

/* CUSTOM close-buttons */
span.button-close-west
{
    background: url('Images/close-menu.png?v=20160512') no-repeat center;
    width: 21px;
    height: 35px;
    top: 3px;
    padding-left: 10px;
}
span.button-close-west:hover
{
    background: url('Images/close-menu.png?v=20160512') no-repeat center;
    width: 21px;
    height: 35px;
    top: 3px;
    padding-left: 10px;
}
/*span.button-close-east			{ background: url(Images/open-menu.png) no-repeat center; 

}
span.button-close-east:hover	{ background: url(Images/open-menu.png)  no-repeat center; }*/

/* STANDARD toggler-buttons - when the east/west panes are 'closed' */
.toggler-west-closed
{
    background: url('Images/open-menu.png?v=20160512') no-repeat center;
    width: 21px;
    height: 35px !important;
    top: 3px !important;
}
.toggler-west-closed:hover
{
    background: url('Images/open-menu.png?v=20160512') no-repeat center;
    width: 21px;
    height: 35px !important;
    top: 3px !important;
}
/*.toggler-east-closed		{ background: url(Images/close-menu.png) no-repeat center; }
.toggler-east-closed:hover	{ background: url(Images/close-menu.png)  no-repeat center; }*/


/*
*	INNER LAYOUT RESIZERS & TOGGLERS
*
*	These styles target 'children of center pane', so only affect the Inner Layout
*	This layout has applyDefaultCSS=true, so use !important to override defaults 
*/

#MainContent .ui-layout-resizer-closed:hover
{
    background: #FFEDCA !important;
}
#MainContent .ui-layout-resizer-open:hover, #MainContent .ui-layout-resizer-dragging
{
    background: #C4E1A4 !important;
}
#MainContent .ui-layout-resizer-dragging-limit
{
    background: #FF3300 !important;
}

#MainContent .ui-layout-resizer-north /*, #MainContent .ui-layout-resizer-south	*/
{
    border-left: 1px solid #BBB !important;
    border-right: 1px solid #BBB !important;
}
#MainContent .ui-layout-resizer-north-closed
{
    border-top: 1px solid #BBB !important;
}
#MainContent .ui-layout-resizer-south-closed
{
    border-bottom: 1px solid #BBB !important;
}
#MainContent .ui-layout-resizer-west-closed
{
    border-left: 1px solid #BBB !important;
}
#MainContent .ui-layout-resizer-east-closed
{
    border-right: 1px solid #BBB !important;
}

#MainContent .ui-layout-resizer:hover .ui-layout-toggler
{
    opacity: 0.4;
    filter: alpha(opacity=40);
}
#MainContent .ui-layout-resizer:hover .ui-layout-toggler:hover
{
    opacity: 1;
    filter: alpha(opacity=100);
    background: #FD9 !important;
    border-color: #CB7 !important;
}

#MainContent .ui-layout-resizer-sliding
{
    opacity: 0.3;
    filter: alpha(opacity=30);
}
#MainContent .ui-layout-resizer-sliding:hover
{
    opacity: 1;
    filter: alpha(opacity=100);
}
#MainContent .ui-layout-resizer-sliding .ui-layout-toggler
{
    display: none !important;
}
#MainContent .ui-layout-resizer-sliding:hover .ui-layout-toggler
{
    display: block !important;
}

.MainContentPadd
{
    padding-left: 10px;
}
.MainContentNoPadd
{
    padding-left: 0px;
}
/******HEADER******/
.StudentHeaderLogo
{
    background-image: url('Images/logo.jpg?v=20160512');
    height: 53px;
    width: 171px;
    background-repeat: no-repeat;
}
.StudentHeaderRepeat
{
    background-image: url('Images/Header-repeat.jpg?v=20160512');
    background-repeat: repeat-x;
    overflow: auto;
    height: 53px;
    color: White;
    width: 100%;
}
.StudentHeaderSeperator
{
    background-image: url('Images/left-seperator-after-btn.jpg?v=20160512');
    height: 53px;
    background-repeat: no-repeat;
    width: 2px;
}
.StudentTimerValue
{
    color: #13e837;
    font-weight: bold;
}
.StudentHomeHeaderTime
{
    background-image: url('Images/Graphs-BG-repeat.jpg?v=20160512');
    background-repeat: repeat-x;
    height: 53px;
}
.StudentHeaderTimer
{
    /*width: 120px;*/
    float: left; /*text-align:center;*/
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 20px;
}
.StudentPieContentTimer
{
    width: 42px;
    height: 42px;
    float: left;
}
.StudentMainHeaderTimer
{
    padding-top: 12px;
    float: left;
    vertical-align: middle;
}
.StudentTimerLabel
{
    font-weight: bold;
    font-size: 8pt;
    font-family: Verdana;
}
.HeaderRowTitle
{
    background-image: url('Images/you-are-here-bg-repeat.jpg?v=20160512');
    background-repeat: repeat-x;
    height: 29px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 8pt;
    font-family: Verdana;
    line-height: 29px;
    color: #3772a8;
    padding-left: 19px;
}
.TitleExplanation
{
    color: #ff7200;
    font-weight: bold;
}
.HeaderTitle
{
    color: #1c578d;
}

/******END HEADER*******/

/******MENU******/

/*.MenuStudentInfo
{
    padding:7px;    
    padding-left:20px;  
    height:60px;
    background-color:#EAEFF5;
    min-height:60px;
    width:255px;
}*/

.MenuStudentInfo
{
    padding-top: 2px;
    padding-left: 5px;
    height: 40px;
    background-color: transparent;
    min-height: 40px;
    width: 255px;
    float: left;
}

/*Student Header  div*/

#studentName
{
    font-weight: bold;
    color: #1c578d;
    vertical-align: middle;
    padding-left: 10px;
    padding-top: 32px;
    float: left;
    width: 185px;
    white-space: normal;
}

#studentNameHeader
{
    font-weight: bold;
    color: White;
    vertical-align: middle;
    padding-left: 5px;
    padding-top: 2px;
    float: left; /*width:185px;*/
    white-space: normal;
}

#studentImage
{
    /*padding-top:64px;*/
    padding-right: 10px;
    float: left;
    padding-left: 20px;
}

/*******END MENU*******/


/*FOOTER*/

.btnStudentComplete
{
    padding-top: 7px;
    float: left;
}

#Studentwrapper
{
    /*background-image:url('Images/allocated-time-bg-repeat.jpg');     background-repeat:repeat-x; */ /*float:left;    */
    background-color: #bed6ee;
    font-family: Verdana;
    font-size: 8pt;
    color: #1c578d;
    height: 45px;
    border-top: 1px solid #86a4c4;
}
/*#wrapper div{float:left;}*/
.footer_btn_row
{
    /*background-image:url('Images/bg-behind-btns-complete-lesson-repeat.jpg');     background-repeat:repeat-x;*/ /*width:100%;*/ /*width: 291px;    */
    background-color: #2d4c6b;
    height: 100%; /*vertical-align:middle;*/
    float: right;
    padding-left: 5px;
    padding-right: 5px;
    width: 148px;
}
.footer_time_row_Student
{
    height: 45px;
    float: left; /*padding-left:316px;    */ /*min-width:400px;    */
    outline: none;
}



.timerValue
{
    color: #13e837; /*font-family:Verdana;     font-size:8pt;*/
    font-weight: bold;
}
/*END FOOTER*/

.btn
{
    color: #2d4c6b;
    border: 0px;
    height: 36px;
    background-image: url('Images/middle-repeat.jpg?v=20160512');
    background-repeat: repeat-x;
    cursor: pointer;
    background-color: transparent;
    width: 148px;
    font-size: 8pt;
    font-family: Verdana;
    font-weight: bold;
}

.footer_td_left_button
{
    background-image: url('Images/left.jpg?v=20160512');
    background-repeat: no-repeat;
    width: 4px;
    height: 23px;
}

.footer_td_right_button
{
    background-image: url('Images/right.jpg?v=20160512');
    background-repeat: no-repeat;
    width: 4px;
    height: 23px;
}

.LogoDivStyle
{
    height: 64px;
    text-align: left;
    vertical-align: middle;
    padding: 0px;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 294px;
}

.LogoStyle
{
    width: 294px;
    height: 64px;
}

.ExpDivStyle
{
    width: 76%;
    position: absolute;
    top: 0px;
    left: 300px;
    height: 64px;
}

.ExpDescDivStyle
{
    width: 80%;
}

.ZoomDivStyle
{
    width: 20%;
}


.LessonPaused
{
    position: absolute;
    top: 0px;
    left: 0px;
    filter: alpha(opacity=60);
    opacity: 0.6;
    width: 100%;
    height: 100%;
    vertical-align: middle;
    text-align: center;
    background-color: White;
    z-index: 100000000;
    font-size: 40px;
    visibility: hidden;
}

.StudentPopupClose
{
    border: 0;
    float: right;
    cursor: pointer;
    background-image: url('Images/Close.png?v=20160512');
    width: 16px;
    height: 16px;
    margin-top: 5px;
}
.StudentMessages_header {

    width: 100%;
    float: left;
    height: 26px;
}
.StudentMessagesText {
    float: left;
    margin-left: 65px;
    min-height: 90px;
    padding-top: 4px;
    width: 100%
}
.StudentMessages {
    display: none;
    z-index: 1000000;
    position: fixed;
    top: 30%;
    left: 20%; /* background-color:#d9eaf8;*/
    background: #55708b;
    border: 1px solid #2c4c6c;
    font-size: 9.5pt;
    font-family: Verdana;
    width: 90%;
    color: #1B4A90;
    -moz-box-shadow: 0 0 30px #55708B;
    -webkit-box-shadow: 0 0 30px #55708B;
    box-shadow: 0 0 30px #55708B;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.StudentTextMessages {
    /*font: bold 10pt Arial; color:#1c578d; text-align:center;*/
    background: #FFF;
    border-radius: 8px;
    padding: 10px;
    width: 98%;
    float: left;
    height: 100%;
}

.BlockScreen
{
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    top: 0;
    background-color: white;
    filter: alpha(opacity=60);
    opacity: 0.6;
    z-index: 100000;
    visibility: hidden;
}

.EnableBackSpace
{
    /*this class should be assigned to the controls that enable backspace*/
}

.uc_MC_PopPup_backGroundScreen
{
    z-index: 200000;
}

.uc_MC_PopPup_tbPopUpMessage
{
    background-color: White; /*#184874; */
    border: 1px solid #8bc0e5;
    font-size: 8pt;
    font-family: Verdana;
    font-weight: bold; /*border-radius: 8px;*/
}
.uc_MC_PopPup_labelPopPupMessage
{
    font: bold;
    color: #194564;
    background-color: Transparent;
    text-align: left;
    line-height: 15px;
}
.uc_MC_PopPup_tdHeader
{
    text-align: left;
    height: 50%;
}
.uc_MC_PopPup_tdSpacesBtwButtons
{
    width: 4px;
}

.uc_MC_PopPup_button
{
    background-color: #5a7f98;
    border: 1px solid #8bc0e5;
    color: White;
    width: 65px;
    height: 22px;
    font-weight: bold;
    text-decoration: none;
}
.uc_MC_PopPup_button:hover
{
    background-color: #5a7f98;
    border: 1px solid #8bc0e5;
    width: 65px;
    height: 22px;
    font-weight: bold;
    color: #8bc0e5;
}
.uc_MC_PopPup_button a:visited
{
    background-color: #5a7f98;
    border: 1px solid #8bc0e5;
    color: White;
    width: 65px;
    height: 22px;
    font-weight: bold;
}
/*#contentLoading
{
    position: absolute;
    z-index: 2;
    display: none;
    background-color: white;
}
.contentLoadingImage
{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}*/
#LastActivityCorrect {
    width:37%;
    height:100px;
    background-color:white;
    position:absolute; 
    margin:0 auto;
    top:45%;
    left:30%;
    float:left;
    margin-left:20px;
    visibility: hidden;
    font-family:Verdana;
    color:#0058b3;
    font-size:24px;
    font-weight:bold;
    z-index: 10000;
    border:1px solid #55708B;
    padding:20px 10px; 
    text-align:center;
}
.CorrectImg {
    margin-right:10px;    
}
#divMessageValidation {
    width:28%;
    height:65px;
    background-color:white;
    position:absolute; 
    margin:0 auto;
    top:45%;
    left:40%;
    float:left;
    margin-left:20px;
    z-index: 10000;
    border:2px solid #2d4c6b;
    padding:20px 5px; 
    text-align:center;
}
#divMessageMain {
     width:100%;
     height:50px; 
     margin-bottom:10px;
     /*top:3%;
      left:3%;
     position:relative;*/ 
}
#divMessageValidation img {
        width:40px;
        height:40px; 
        float:left;
        margin-left:5px;
        margin-right:15px;
}

#ParagraphMSG {
    font-family:Verdana;
    color:black;
    font-size:14px;
    line-height:12px;
    text-align:left;

}
#btnMSGYes {
width: 50px;
height: 20px;
font-size: 8pt;
font-family: Verdana;
font-weight: bold;
margin-right:10px;
cursor: pointer;

}
#btnMSGNo
 {
width: 50px;
height: 20px;
font-size: 8pt;
font-family: Verdana;
font-weight: bold;
cursor: pointer;

}