/* CSS Document */


html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,s,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;margin:0;padding:0}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-spacing:0}
a { cursor: pointer; text-decoration: none; color: inherit; -webkit-transition: color 0.3s ease; -moz-transition: color 0.3s ease; -ms-transition: color 0.3s ease; -o-transition: color 0.3s ease; transition: color 0.3s ease; }
body { padding-top: 50px; padding-left: 5px;  font-family: 'Open Sans', sans-serif; font-size: 14px; font-weight: 400;  color: black;}
body { background-color: white; }
body input[type=button], body input[type=submit] { cursor: pointer; height: 40px; font-size: 16px; font-weight: 800;  padding: 0px 10px 0px 10px; border-radius: 4px; }
body tr { height: 30px; }
body th { padding: 5px 3px 4px 3px; } 
body td { vertical-align: middle; text-align: center; padding: 2px 2px 2px 2px; }
body img { width: 16px; height: 16px; cursor: pointer;} 
body input[type=text], body select { height: 24px; }

/* General */
.C_BodyNoMenu { padding-top: 13px; }
.ShowWorking { position:absolute; left:400px; top:350px; border-radius: 8px; }
.ShowWorkingCursor { position:absolute; left:200px; top:200px; border-radius: 8px; }
.C_AjaxLoaderIMGSmall { width: 100px; height: auto; } 
.C_AjaxLoaderIMG { width: 400px; height: auto; } 
.ShowValidating { position: fixed; left: 300px; top: 100px; text-align: left; border:1px solid black; border-radius: 8px; }
.C_Validation { font-size: 32px; font-weight: 400; background-color: rgb(120,120,120); vertical-align: middle; }
.C_ValidationIMG { width: 32px; height: 32px; }
.C_Hide { display: none; }
.C_Clear { clear: both }
.C_IDLink { color: navy; }
.C_TextNormal { font-weight: 400; }
.C_TextBold { font-weight: 800; }
.C_TextSmall {font-size: 12px; font-weight: 400; }
.C_TextBig {font-size: 14px; font-weight: 400; }
.C_TextBigBold {font-size: 14px; font-weight: 800; }
.C_TextItalic { font-style: italic; }
.C_TextLeft { text-align: left; }
.C_TextCenter { text-align: center; }
.C_TextRight { text-align: right; }
.C_TextJustify { text-align: justify; }
.C_TextUnderline { text-decoration: underline; }
.C_FontSize10 { font-size: 10px; }
.C_FontSize12 { font-size: 12px; }
.C_FontSize14 { font-size: 14px; }
.C_FontSize16 { font-size: 16px; }
.C_FontSize22 { font-size: 22px; }
.C_FontSize24 { font-size: 24px; }
.C_VerticalMiddle { vertical-align: middle; }
.C_VerticalTop { vertical-align: top; }
.C_Pointer { cursor: pointer; }
.C_PaddingFrame0 { padding: 0px 0px 0px 0px; }
.C_PaddingFrame2 { padding: 2px 2px 2px 2px; }
.C_PaddingFrame5 { padding: 5px 5px 0px 5px; }
.C_LogToggle { text-decoration: underline; }
.C_QM { vertical-align: middle; text-align: center; padding: 2px 2px 2px 2px; }
#QM_Image { cursor: help; }
.C_FormError { text-align: left; }
.C_FormNotFoundText { font-size: 24px; }
.C_ListTextNum { text-align: right; padding-right: 30px; white-space: nowrap; }
.C_TextAreaFont { font-family: 'Open Sans', sans-serif; font-size: 12px; } /*font: normal 8pt Arial CE; */
.C_LogFont { font:normal 8pt Arial CE }
.C_SendEmailTable td { text-align: left; }
.C_ListTable td { text-align: left; }

/* Colors - Template dependent*/
.C_TextColorBlue { color: blue; }
.C_TextColorGreen { color: green; }
.C_TextColorGrey { color: grey; }
.C_TextColorRed { color: red; }
.C_TextColorAmber { color: orange; }
.C_TextColorBlack { color: black; }
.C_TextColorWhite { color: white; }
.C_TextColorYellow { color: yellow; }
.C_Filter_BGD { background: lavender; }
.C_ListHeader_BGD { background: silver; }
.C_ListHeaderLink { color: navy; }
.C_ListLine1_BGD { background: lightgoldenrodyellow; }
.C_ListLine2_BGD { background: khaki; }

/* Main Page */
.C_MenuDiv { position: absolute; left: 0px; top: 30px; width: 200px; height: 100%; border: 1px solid grey; background: lavender; z-index: 1; }
.C_MainPageDiv { position: absolute; left: 200px; top: 30px; width: 100%; height: 100%; border-top: 0px solid grey; background: white; z-index: 1; }
.C_SoSakkTitle { font-size: 18px; color: navy; margin-top: -6px; }

/* Menu */
.C_MenuTable { width: 100% }
.C_MenuTable td { background: linear-gradient(to bottom, #f8f8f8 0%,#e2e7e8 100%); cursor: pointer; }
.C_MenuTable td:hover { background: linear-gradient(to bottom, #f8f8f8 50%,#e2e7e8 80%); font-weight: 800; }
.C_MenuTable td.C_MenuSelected { background: linear-gradient(to bottom, #9999ff 0%,#e2e7e8 100%); }
.C_Menu_HR_TR { height: 6px; padding: 0px 5px 0px 5px; }
.C_Menu_HR_TD { height: 6px; padding: 0px 5px 0px 5px; }
.C_Menu_HR { border: 4px solid grey; padding: 0px 5px 0px 5px; }

/* Login */
.C_LoginForm  { position: absolute; right: 2px; top: 2px; border:5px solid grey; z-index: 1001; }
.C_InputLength { width: 150px }
.C_ForgotPWDPadding { padding: 0px 5px 2px 0px;}
.C_LogoutPadding { padding: 0px 5px 0px 5px;}
#LoginFormTR { height: 22px; }
#Login { height: 30px; font-size: 12px; font-weight: 400;  padding: 0px 10px 0px 10px; }
.C_RegTable td { text-align: left; }
.C_RegTable input[type=text], .C_RegTable input[type=password] { width: 240px }
.C_MainLoginTR { height: 24px; }
.C_RegFirstCol { width: 170px; }
.C_imgUpload { background-image: url(../images/upload1.jpg); width: 40px; height: 40px; background-position:  0px 0px; background-repeat: no-repeat; background-size: 100% 100%; }
.C_RegPofPicIMG { width: 50px; height: auto; }

/* Main */
.C_TopMenu { position:fixed; left:0px; top:0px; width:100%; height:33px; background-color: lightgrey; z-index: 1000;}
.C_TopMenu td { vertical-align: middle; text-align: left;}
.C_TopMenuTable { }
.C_TopMenuButton { font-size: 12px; font-weight: 800; color: black; background-color: rgb(201,211,212); border-radius: 8px;}
.C_FormSaveButton { background-color: green; color: white; border-radius: 8px;}
.C_TopMenuIMG { width: 24px; height: 24px; }
.C_TopMenuTitle { font-size: 18px; color: black; padding-left: 20px; }
.C_TopMenuHelp { padding-left: 20px; }
.C_TopMenuCompanyName { font-size: 14px; color: navy; font-style: italic; padding-left: 50px; }
.C_MainLoginForm  { position: absolute; right: 2px; top: 0px; border:5px solid grey; background: lavender; padding: 0px 5px 0px 5px;  z-index: 2000;}
.C_MainMenuTable { border-spacing: 50px; border: 0px solid #9BD1AB; }
.C_MainMenuItem_BGD { background: lightgreen; }
.C_MainMenuItem { width: 160px; height: 120px; font-size: 24px; text-align: center; vertical-align: middle; }
.C_SakkPic1 { position:absolute; left:200px; top:50px;width: 500px; height: auto; }
.C_SakkPic2 { position:absolute; left:200px; top:400px;width: 500px; height: auto; }


/* jquery ui dialog */
.wt .ui-widget-overlay { opacity: 0.5; background: #000; }
.wt .ui-widget-content { background: #E4E8E9; padding: 0; border-radius: 6px; border: 1px solid #B6C2C3; }
.wt .ui-widget-header { border: 0; border-bottom: 1px solid #B6C2C3; border-radius: 6px 6px 0 0;
    background: #f8f8f8; 
    background: -moz-linear-gradient(top,  #f8f8f8 0%, #e2e7e8 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#e2e7e8));
    background: -webkit-linear-gradient(top,  #f8f8f8 0%,#e2e7e8 100%);
    background: -o-linear-gradient(top,  #f8f8f8 0%,#e2e7e8 100%);
    background: -ms-linear-gradient(top,  #f8f8f8 0%,#e2e7e8 100%);
    background: linear-gradient(to bottom,  #f8f8f8 0%,#e2e7e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#e2e7e8',GradientType=0 );
}
.wt .ui-dialog-content { text-align: center; padding-top: 40px; color: #515859; line-height: 24px; font-size: 16px; }
.wt .ui-dialog-title { text-align: center; color: #515859; font-size: 16px; color: #3D91F4; margin: 10px 0 !important; }
.wt .ui-widget-header .ui-state-default { background: transparent; }
.C_WTDialog_Table { width: 100%; }
.wt .ui-widget-content a {border: 0px none; color: navy; cursor: pointer; }

.C_HRLine { width: 100%; }
.C_SystemFooter { width: 100%; margin-bottom: 2px; background-color: lightgrey; }
.C_SystemFooter tr { height: 20px; }
.C_SystemFooter td { text-align: left; vertical-align: middle; }
.C_SystemFooterTable { }
.C_SystemFooterTable tr { height: 20px; }
.C_SystemFooterTable td { font-size: 14px; font-style: italic; text-align: center; vertical-align: middle; color: black; padding: 0px 10px 2px 10px; }
.C_SystemFooterTable td:hover { color: rgb(120,120,120); }
.C_SystemFooterBottom { height: 20px; position: fixed; bottom:0%; width:100%; left: 0px; z-index: 100;}

/* Quiz */
.C_SomaBtn { background: lightgreen; width: 160px; height: 40px; font-size: 16px; }
.C_ResultIcon { width: 100px; height: auto; }
.C_HintIcon { width: 50px; height: auto; }
.C_Board_Mini { width: 120px; }
.C_Board_S { width: 300px; }
.C_Board_M { width: 400px; max-width: 400px; }
.C_Board_L { width: 500px; }
.C_Board_XL { width: 600px; }
.C_Board_XXL { width: 700px; }
.C_Board_XXXL { width: 800px; }
.C_VolumeIcon { width: 30px; height: auto; vertical-align: middle; }
.C_QuizID { font-size: 24px; }
.C_SKMainTable .C_ResultIconTD  { width: 200px; }
.C_SKPrevNextTable { width: 100% }
.C_SKTitleTable { width: 100%; }
.C_BoardTD { padding: 3px 3px 3px 3px; }
.C_FenP { padding: 3px 0px 0px 0px }
.C_CommentBox { border: 1px solid grey; }
.C_OKGetNext_P { padding: 20px 0px 0px 0px }
.C_OKGetNext { font-weight: 600; ; border: 3px solid navy; }
/*.C_SKMainTable td {  border: 1px solid grey; }    */
.C_SKMainTable {  border: 3px solid grey; padding: 3px 3px 3px 8px}
.C_SKTD_Border1 { border-left: 1px solid black; border-top: 1px solid black; border-right: 1px solid black; }
.C_SKTD_Border2 { border-left: 1px solid black; border-bottom: 1px solid black; border-right: 1px solid black; }
.C_SKTitleTD { padding: 5px 5px 0px 0px; }
.C_OptionBtns { padding: 10px 0px 5px 0px; }
.C_PrevBtnTD { padding: 0px 0px 0px 5px; }
.C_QuizMoves { font-size: 10px; text-align: left; }
.C_Tags_TD { border: 1px solid grey; }
.C_AwardIMG { width: 150px; height: auto; }
.C_AwardPopUp { position:absolute; left:120px; top:180px; border-radius: 8px; }
.C_AwardPopUpIMG { height: 300px; width: auto; }


/* Game */
.C_Game_Board_Pos { position:absolute; left:50px; top:90px; }
.C_NewGame_Btn { position:absolute; left:50px; top:10px; }
.C_GameTitle { position:absolute; left:50px; top:10px; font-size: 16px; }
.C_GameTitle2 { position:absolute; left:50px; top:30px; font-size: 16px; }
.C_GameTitle3 { position:absolute; left:50px; top:50px; font-size: 16px; }
.C_GameTitle4 { position:absolute; left:50px; top:70px; font-size: 16px; }
.GamePartnerLinkShow { font-style: italic; font-weight: 800; color: navy; }

.C_SKGameTable { border: 3px solid grey; padding: 3px 3px 3px 8px; }
.C_SKGameTable td { border: 1px solid grey; }
.C_InviteLink { padding: 5px 0px 5px 0px; }
.C_SetUP_TimeLimit { padding: 10px 10px 10px 10px; }
.C_SKGamePlayer1Table { width: 100% }
.C_GameInfo { min-width: 150px; }
.C_PlayerDefBgd { background: lightgrey; }
.C_PlayerBgd { background: lightblue; }
.C_MovesShow { max-width: 300px }
body input[type=button].C_PlayButtons { height: 30px; font-weight: 400; font-size: 12px;}
.C_PlayButtonsP { padding: 5px 0px 5px 0px; } 
.C_TitleStatusTD { min-width: 380px }
.C_Test { }
.C_ToolsSelect { width: 200px; height: 150px; }
.C_ToolsSelectShow { width: 300px; height: 150px; }

/* Chat */
.C_ChatNoteDiv  { position: absolute; right: 0px; top: 200px; border:5px solid grey; background: wheat; padding: 5px 5px 5px 5px; z-index: 101;} 
.C_ChatDiv  { width: 400px; height: 400px; position: absolute; right: 0px; top: 200px; border:5px solid grey; background: wheat; padding: 0px 0px 0px 0px; z-index: 101;} 
.C_CloseChatDiv  { position: absolute; right: -5px; top: -35px; z-index: 102;}
.C_CloseChatIMG  { width: 30px; height: auto; }
.C_ChatUserSearchDiv { position: absolute; left: 2px; top: 2px; width: 150px; height: 35px; background: white; overflow-x:hidden ; overflow-y: hidden;  z-index: 1001;} 
.C_ChatUsersDiv { position: absolute; left: 2px; top: 37px; width: 150px; height: 365px; background: white; overflow-x:auto ; overflow-y: auto;  z-index: 1000;} 
.C_ChatMsgListDiv { position: absolute; left: 150px; top: 2px; width: 250px; height: 320px; background: wheat; overflow-x:auto ; overflow-y: auto; padding: 0px 0px 0px 0px;} 
.C_ChatMsgSendDiv { position: absolute; left: 150px; top: 320px; width: 250px; height: 80px; background: lightgray; overflow-x:hidden ; overflow-y: hidden;} 
.C_ChatUserName { width: 140px; }
.C_imgSearch { background-image: url(../images/search2.png); width: 30px; height: 30px; background-position:  0px 0px; background-repeat: no-repeat; background-size: 100% 100%; }
.C_ChatUsersTable { width: 100% }
.C_ChatUsersTable td { background: linear-gradient(to bottom, #f8f8f8 0%,#e2e7e8 100%); cursor: pointer; }
.C_ChatUsersTable td:hover { background: linear-gradient(to bottom, #f8f8f8 50%,#e2e7e8 80%); font-weight: 800; }
.C_ChatUsersTable td.C_SelectedChatUser { background: linear-gradient(to bottom, #9999ff 0%,#e2e7e8 100%); border-bottom: 1px solid black;  border-left: 1px solid black;  border-top: 1px solid black; }
.C_ChatUsersTable td.C_NotSelectedChatUser { border: 0px solid black; }
.C_ChatPartnerTypingTR { height: 15px; font-size: 10px; font-style: italic; }
.C_ChatMsgInputTable { width: 100%; padding: 5px 5px 5px 5px; }
.C_ChatMsgInput { width: 100% }
.C_ChatMsgInputArea { width: 100%; height: 50px; font-family: 'Open Sans', sans-serif; font-size: 12px;}
.C_ChatMsgInputAreaTD { padding: 2px 4px 0px 0px; }
.C_ChatMsgListTable { width: 100% }
.C_ChatMsgListLineTD { text-align: left; padding: 2px 2px 8px 5px; vertical-align: middle; border: 0px solid black;}
.C_ChatMsgListLine { display:inline-block; min-height: 20px; background-color: rgb(201,211,212); border-radius: 8px; vertical-align: middle; padding: 5px 5px 0px 5px; }
.C_ChatOwnMsg { padding-left: 30px; }
.C_ChatMsgListLineOwn { background-color: rgb(200,200,200); }
.C_InviteIMG { width: 30px; height: auto; }

.highlight-white {
  -webkit-box-shadow: inset 0 0 3px 3px yellow;
  -moz-box-shadow: inset 0 0 3px 3px yellow;
  box-shadow: inset 0 0 3px 3px yellow;  
}
.highlight-black {
  -webkit-box-shadow: inset 0 0 3px 3px blue;
  -moz-box-shadow: inset 0 0 3px 3px blue;
  box-shadow: inset 0 0 3px 3px blue;  
}