/* PAGE TOP */
#pageTopFixed{
    position: fixed;
    top: 0px;
    width: 85%;
    background-color: azure;
    height: 70px;
    padding-left:10%;
}
#pageTop {
    /*background:url(headerSliver.png) repeat-x;*/
    height: 60px;
    padding-left:0%;
}
#pageTop > #pageTopWrap {
    width: inherit;
    margin: 0px auto;
    height: inherit;
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 5%;
    background-color: #1F86C6;
}
#pageTop > #pageTopWrap > #pageTopLogo {
    float: left;
    height: inherit;
    width: 135px;  /* Double the size of height that is inherited */
}
#pageTop > #pageTopWrap > #pageTopRest {
    float: left;
    height: inherit;
    width: 75%;
    padding-left: 1%;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 {
    height: 40%;
    width: 100%;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div {
    margin-top: 0px;
    padding-left: 4px;
    text-align:right;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a {
    display: block;
    float: left;
    color: white;
    text-decoration: none;
    margin: 0px 0px;
    font-weight:bold;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu1 > div > a:hover {
    /*color: #C0E73D;*/
    background-color: red;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 {
    height: 40%;
    width: 100%;
    margin-top: 2px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div {
    margin-top: 2px;
    padding: 4px;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a {
    display: block;
    float: left;
    color:#BF6000;
    text-decoration: none;
    margin: 0px 0px;
    font-weight:bold;
}
#pageTop > #pageTopWrap > #pageTopRest > #menu2 > div > a:hover {
    color: #C0E73D;
}

/* Sub Menu */
#submenu {
    width:100%;
}
#submenu > div {
    margin-top: 2px;
    padding: 4px;
}
#submenu > div > a {
    display: block;
    float: left;
    color:#BF6000;
    text-decoration: none;
    margin: 0px 15px;
    font-weight:normal;
}
#submenu > div > a:hover {
    color: #C0E73D;
}

/* PAGE MIDDLE */
#pageMiddle{
    width: 1000px;
    margin: 0px auto;
    height: 1000px;
}
.pageMiddle
{
    width: 1000px;
    margin: 0px auto;
    height: 1000px;
}
/* PAGE BOTTOM */
#pageBottom{
    height: 200px;
    font-size: 12px;
    color: azure;
    text-align: center;
    width: 100%;
    margin-top: 60%;
    margin-bottom: 10%;
}

#pageBottomFixed{
    position: fixed;
    bottom: 0;
    width: 85%;
    background-color: azure;
    color: white;
    text-align: center;
    height: 90px;
    margin-top: 70%;
    margin-left: 10%;
}

/*  DIFFERENT FORMS */
#updateform
#signupform{
    margin-top:24px;
    padding-left: 10px;

}

#updateform
#signupform > div {
    margin-top: 12px;
}

#updateform
#signupform > input,select,option {
    width: 300px;
    padding: 1px;
    background: #F3F9DD;
    height:inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px
}

#signupbtn {
    font-size:18px;
    padding: 12px;
}
#updatebtn {
    font-size:18px;
    padding: 12px;
}
#terms {
    border:#CCC 1px solid;
    background: #F5F5F5;
    padding: 12px;
}

#legendform > input,select,option {
    width: 100%;
    padding: 1px;
    background: #F3F9DD;
    height:inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px
}

#legendbtn {
    font-size:18px;
    padding: 12px;
}


#loginform{
    margin-top:24px;
}
#loginform > div {
    margin-top: 12px;
}
#loginform > input {
    width: 75%;
    padding: 3px;
    background: #F3F9DD;
}
#loginbtn {
    font-size:15px;
    padding: 10px;
}

#signupbtn {
    font-size:15px;
    padding: 10px;
}
/* WORD STYLE */
#showwordform{
    margin-top:24px;
}
#showwordform > div {
    margin-top: 0px;
    padding: 0px;
    margin: 0px;
}
#showwordform > input,select {
    width: 200px;
    padding: 0px;
    background: #F3F9DD;
}
#showwordbtn {
    font-size:18px;
    padding: 12px;
    border-radius: 45px;
}
#showbtn {
    font-size:18px;
    padding: 12px;
    border-radius: 45px;
}
#btnclear {
    font-size:18px;
    padding: 12px;
}
#showallbtn {
    font-size:18px;
    padding: 12px;
}

#searchcriteriabtn {
    font-size:16px;
    padding: 12px;
}

#terms {
    border:#CCC 1px solid;
    background: #F5F5F5;
    padding: 12px;
}

#worddetailform{
    margin-top:10px;
    /*width: 500px;*/
}


#worddetailform > div {
    margin-top: 12px;
    /*width: 400px;*/
}
#worddetailform > input,select {
    width: 90%;
    padding: 1px;
    background: #F3F9DD;
}

#editwordbtn {
    font-size:18px;
    padding: 12px;
}

#relatewordbtn {
    font-size:18px;
    padding: 12px;
}

#quotewordform {
    margin-top:12px;
    /*width: 400px;*/
}
#quotewordform > div {
    margin-top:12px;
    /*width: 400px;*/
}
#quotewordform > input,select {
    width: 90%;
    height:100%;
    padding: 1px;
    background: #F3F9DD;
}


#relatewordform {
    margin-top:12px;
    /*width: 400px;*/
}
#relatewordform > div {
    margin-top:12px;
    /*width: 400px;*/
}
#relatewordform > input,select {
    width: 90%;
    height:100%;
    padding: 1px;
    background: #F3F9DD;
}

#simwordform {
    margin-top:24px;
    /*width: 400px;*/
}

#simwordform > div {
    margin-top:12px;
    /*width: 400px;*/
}
#simwordform > input,select {
    width: 90%;
    padding: 1px;
    background: #F3F9DD;
}

#varwordform {
    margin-top:12px;
    /*width: 400px;*/
}

#varwordform > div {
    margin-top:12px;
    /*width: 400px;*/
}
#varwordform > input,select {
    width: 90%;
    padding: 1px;
    background: #F3F9DD;
}

#relwordform {
    margin-top:12px;
    /*width: 400px;*/
}
#relwordform > div {
    /*margin-top:12px;	*/
    /*width: 400px;*/
}
#relwordform > input,select {
    width: 90%;
    padding: 1px;
    background: #F3F9DD;
}
#synwordform {
    margin-top:12px;
    color: blue;
    /*width: 400px;*/
}

#antwordform {
    margin-top:12px;
    color: blue;
    /*width: 400px;*/
}

#mostviewedform {
    margin-top:12px;
    /*width: 400px;*/
}

#mostrelatedform {
    margin-top:12px;
    /*width: 400px;*/
}

#mostrecentform {
    margin-top:12px;
    /*width: 400px;*/
}

#terms {
    border:#CCC 1px solid;
    background: #F5F5F5;
    padding: 12px;
}

#addwordform{
    margin-top:24px;
}
#addwordform > div {
    margin-top: 12px;
}

.addWordForm
{
    margin-top:24px;
    background: #F3F9DD;
    width: 90%;
    padding: 0px;
    text-indent: 3px;
}
#addmoreform{
    margin-top:24px;
}
#addmoreform > div {
    margin-top: 12px;
}


textarea{
    align-content:flex-start;
    width:100%;
    height: 90px;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    color: blue;
    font-size:16px;
    overflow-wrap: normal;
}

.addMoreForm
{
    margin-top:24px;
    background: #F3F9DD;
    width: 98%;
    padding: 0px;
    text-indent: 3px;
}

.wordEntry
{
    width:100%;
    margin: 0;
    height:20px;
    text-height:max-size;
}


.wordEntryLabel{
    width: 25%;
    padding: 0px;
    float:left;
    display:inline;
    background: #DBDBDB;
    height:inherit;
}

.wordSearchEntry{
    width: 60%;
    padding: 1px;
    float:right;
    display:inline;
    background: #DBDBDB;
    height:inherit;
}

.wordNameEntry{
    width: 60%;
    margin-left:2px;
    padding: 1px;
    float:right;
    display:inline;
    background: #FFFFFF;
    height:inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px
}

.wordTextEntry{
    align-content:flex-start;
    width: 60%;
    float:right;
    margin-left:2px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    background: #FFFFFF;
    height:inherit;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    overflow-wrap: normal;
}

.quoteTextArea{
    align-content:flex-start;
    width:100%;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    background: #FFFFFF;
    overflow-wrap: normal;
}

.wordProTextArea{
    align-content:flex-start;
    width:100%;
    height: 200;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    background: #FFFFFF;
    overflow-wrap: normal;
}

.testimonialTextArea{
    align-content:flex-start;
    width:100%;
    height: 300px !important;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:12px;
    background: #FFFFFF;
    overflow-wrap: normal;
}

.relateTextArea{
    align-content:flex-start;
    width:100%;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #FFFFFF;
    overflow-wrap: normal;
}

.jobTextArea{
    align-content:flex-start;
    width:100%;
    height: 600px;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #FFFFFF;
    overflow-wrap: normal;
}

.articleTextArea{
    align-content:flex-start;
    width:100%;
    height: 500px;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #FFFFFF;
    overflow-wrap: normal;
}

.statusTextArea{
    align-content:flex-start;
    width:250px;
    height: 150px;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #FFFFFF;
}

.profileTextArea{
    align-content:flex-start;
    width:90%;
    height: 100px;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #F3F9DD;
}

.wordOptionEntry{
    width: 65%;
    float: left;
    margin-left:2px;
    padding: 1px;
    align-items:flex-start;
    align-content:flex-start;
    background: #EDEDED;
    height:inherit;
}


.otherRelateForm {
    width: 100%;
    height: 500px;
    background: #F3F9FF;
    padding: 1px;
    text-indent: 2px;
    float: left;
}

/*==================*/

.courseRelationForm {
    width: 100%;
    height: 1050px;
    background: #F3F9FF;
    padding: 1px;
    text-indent: 2px;
}

.relatedmoduleForm
{
    width: 80%;
    height: 420px;
    padding: 0px;
}

.relatedmodulelist
{
    width: 100%;
    height: 380px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
}

.relatedmodulelistForm
{
    align-self:auto;
    vertical-align:top;
    padding-top:0px;
    width: 90%;
    height: inherit;
    background: #F3F9DD;
}

#relatedmodulelist > select {
    width: 100%;
}

.listofmodules
{
    width: 100%;
    height: 400px;
    padding-top: 10px;
    text-align: center;
    background: #F3F9FF;
}

#relatedmoduleform > input,select {
    width: 99%;
    height:100%;
    background: #F3F9DD;
}

#selectedmodule
{
    width: 99%;
    height: 99%;
}

#selectmodule
{
    width: 99%;
    height: 99%;
}

#relatemoduleform > input,select {
    width: 99%;
    height:100%;
    background: #F3F9DD;
}

.listmoduleForm {
    width: 100%;
    background: #F3F9FF;
    padding: 0px;
}

/*==================*/

.moduleRelationForm {
    width: 100%;
    height: 1050px;
    background: #F3F9FF;
    padding: 1px;
    text-indent: 2px;
}

.relatedlessonForm
{
    width: 80%;
    height: 420px;
    padding: 0px;
}

.relatedlessonlist
{
    width: 100%;
    height: 380px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
}

.relatedlessonlistForm
{
    align-self:auto;
    vertical-align:top;
    padding-top:0px;
    width: 90%;
    height: inherit;
    background: #F3F9DD;
}

#relatedlessonlist > select {
    width: 100%;
}

.listoflessons
{
    width: 100%;
    height: 400px;
    padding-top: 10px;
    text-align: center;
    background: #F3F9FF;
}

#relatedlessonform > input,select {
    width: 99%;
    height:100%;
    background: #F3F9DD;
}

#selectedlesson
{
    width: 99%;
    height: 99%;
}

#selectlesson
{
    width: 99%;
    height: 99%;
}

#relatelessonform > input,select {
    width: 99%;
    height:100%;
    background: #F3F9DD;
}

.listlessonForm {
    width: 100%;
    background: #F3F9FF;
    padding: 0px;
}

/*==============*/

.wordRelateForm {
    width: 100%;
    height: 1000px;
    background: #F3F9FF;
    padding: 1px;
    text-indent: 2px;
    float: left;
}

.listWordForm {
    width: 100%;
    background: #F3F9FF;
    padding: 0px;
    margin-left: 0px;
    text-indent: 5px;
}

.relWordForm
{
    width: 60%;
    padding: 0px;
    float:left;
}

.listOfWords
{
    width: 40%;
    padding: 0px;
    height: 400px;
    float: right;
    background: #F3F9FF;
}

.wordListQuote
{
    width: 50%;
    height: 500px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
}

.wordList
{
    width: 100%;
    height: 220px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
    background: #F3F9FF;
}

.catList
{
    width: 100%;
    height: 320px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
}

.quoteList
{
    width: 100%;
    height: 470px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
}

.relateList
{
    width: 100%;
    height: 370px;
    margin-top:inherit;
    padding-top:0px;
    text-align:center;
}

.wordlistquote
{
    align-self:auto;
    margin-top:0px;
    margin-left:10px;
    vertical-align:top;
    padding-top:0px;
    width: 70%;
    height: 100%;
    padding: 0px;
    background: #F3F9DD;
    float: left;
}

.wordlistform
{
    align-self:auto;
    margin-top:0px;
    margin-left:10px;
    vertical-align:top;
    padding-top:0px;
    width: 70%;
    height: 190px;
    padding: 0px;
    background: #F3F9DD;
    float: left;
}

.catlistform
{
    align-self:auto;
    margin-top:0px;
    margin-left:10px;
    vertical-align:top;
    padding-top:0px;
    width: 60%;
    height: 250px;
    padding: 0px;
    background: #F3F9DD;
    float: left;
}

.quotelistform
{
    align-self:auto;
    margin-top:0px;
    margin-left:10px;
    vertical-align:top;
    padding-top:0px;
    width: 70%;
    height: 420px;
    padding: 0px;
    background: #F3F9DD;
    float: left;
}

.relatelistform
{
    align-self:auto;
    margin-top:0px;
    margin-left:10px;
    vertical-align:top;
    padding-top:0px;
    width: 70%;
    height: 420px;
    padding: 0px;
    background: #F3F9DD;
    float: left;
}

.wordresultform
{
    align-self:auto;
    margin-top:0px;
    margin-left:10px;
    vertical-align:top;
    padding-top:0px;
    width: 100%;
    height: 400px;
    padding: 0px;
    background: #F3F9DD;
    float: left;
}


#quotewordform, #relatewordform
{
    width: 80%;
    height: 90%;
}

#simwordlist, #relwordlist, #synwordlist, #antwordlist, #varwordlist
{
    width:90%;
    height:90%;
    padding-top: 0px;
    margin-top: 0px;
    float: left;
}

#relatewordlist
{
    width:80%;
    height:80%;
    padding-top: 0px;
    margin-top: 0px;
    float: left;
    word-wrap: break-word;
}

#quotewordlist
{
    width:80%;
    height:80%;
    padding-top: 0px;
    margin-top: 0px;
    float: left;
}

#quotewordform
{
    width:100%;
    height:500px;
    padding-top: 0px;
    margin-top: 0px;
    float: left;
}

#relatewordform
{
    width:100%;
    height:500px;
    padding-top: 0px;
    margin-top: 0px;
    float: left;
}

.AddDelBtns
{
    width: 20%;
    font-size: 18px;
    margin-top: 10px;
    margin-left: 2px;
    padding-top: 15px;
    float: left;
    margin-right: 5px;
    display: inline;
}

.addListBtn {
    width: 90%;
    height: 40px;
    font-size:18px;
    margin-top: 100px;
    padding: 0px;
    float: right;
    border-radius: 45px;
}

.delListBtn {
    width: 90%;
    height: 40px;
    font-size:18px;
    margin-top: 10px;
    padding: 0px;
    float: right;
    border-radius: 45px;
}


.simWordList
{
    width: 150px;
    height: 170px;
    padding: 0px;
    background: #F3F9DD;
}

#selectword
{
    width: 90%;
    height: 90%;
}

#wordsearch
{
    width: 98%;
    height: 18px;
}

#addmoreform > input,select {
    width: 400px;
    padding: 3px;
    background: #F3F9DD;
}
#listwordform > input,select {
    width: 60%;
    padding: 0px;
    background: #F3F9DD;
}
#quotewordform > input,select {
    width: 60%;
    padding: 0px;
    background: #F3F9DD;
}
#relatewordform > input,select {
    width: 60%;
    padding: 0px;
    background: #F3F9DD;
}
#relatedwordform > input,select {
    width: 150px;
    padding: 3px;
    background: #F3F9DD;
}

#submitbtn,
#submiturlbtn,
#urlrelatebtn,
#submitrelate,
#clearbtn,
#clearurlbtn,
#reloadbtn,
#cancelbtn,
#donebtn,
#editrelation,
#editbtn {
    font-size:18px;
    float:none;
    margin-left:50px;
    align-items:center;
    padding: 12px;
    width: 30%;
    border-radius: 45px;
}


#morebtn {
    font-size:18px;
    padding: 12px;
}
#addRelateBtn {
    font-size:18px;
    padding: 22px;
}
#delRelateBtn {
    font-size:18px;
    padding: 22px;
}
#addSynonymBtn {
    font-size:18px;
    padding: 12px;
}
#delSynonymBtn {
    font-size:18px;
    padding: 12px;
}
#addAntonymBtn {
    font-size:18px;
    padding: 12px;
}
#delAntonymBtn {
    font-size:18px;
    padding: 12px;
}
#addSimilarBtn {
    font-size:18px;
    padding: 12px;
}
#delSimilarBtn {
    font-size:18px;
    padding: 12px;
}
#terms {
    border:#CCC 1px solid;
    background: #F5F5F5;
    padding: 12px;
}

.tableSearchOption
{
    border:"2";
    bordercolor:"#bcae91";
    cellpadding:"0";
    cellspacing:"0";
    width:300;
    font: 14px "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin-bottom:20px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
}

.tableSearchNoBorder
{
    border:"0";
    cellpadding:"0";
    cellspacing:"0";
    width:290;
    font: 14px "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin-bottom:20px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}

.tableWidth100NoBorder
{
    border:1px;
    cellpadding:"0";
    cellspacing:"0";
    width:100%;
    text-align:center;
    font: 14px "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin-bottom:10px;
    border-top-style: none;
    border-right-style: none;
    border-left-style: none;
    border-bottom-style: none;
}

/*
.selectOption
{
    width:176;
    size:1;
    font: 14px "Trebuchet MS",Arial,Helvetica,sans-serif;
}
*/

.tableSearchResultTop
{
    border:"2";
    bordercolor:"#bcae91";
    cellpadding:"0";
    cellspacing:"0";
    width:600;
    font: 14px "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin-bottom:10px;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    border-bottom-style: solid;
}

.tableSearchResult
{
    border:"1";
    bordercolor:"#bcae91";
    text-align:center;
    cellpadding:"0";
    cellspacing:"0";
    width:600;
    font: 14px "Trebuchet MS",Arial,Helvetica,sans-serif;
    margin-bottom:10px;
    border-top-style: thin;
    border-right-style: thin;
    border-left-style: thin;
    border-bottom-style: thin;
}

.tableSearchResult {
    width:100%;
    border-collapse:collapse;
}

.tableSearchResult td {
    padding:8px;
    border:#222 1px thin;
}

.tableSearchResult tr:nth-child(even) {
    background: #F0FFF0; /* #A4D1FF; */
}

.tableSearchResult tr:nth-child(odd) {
    background: #EAF4FF;
}

html{
    font-size:62.5%;
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    height:100%;
    width: 100%;
}

body{
    font-family:Avenir,"Helvetica Neue",Helvetica,Arial,sans-serif;
    font-size:14px;
    line-height:1.428571429;
    color:#333;
    background-color:#fff;
    min-height: 100%;
}


div#photo_showcase{
    float:right; background:url(style/photo_showcase_bg.jpg) no-repeat;
    width:136px;
    height:127px;
    margin:20px 30px 0px 0px;
    cursor:pointer;
}
div#photo_showcase > img {
    width:74px;
    height:74px;
    margin:37px 0px 0px 9px;
}

div.status_boxes{
    padding:4px;
    line-height:1.5em;
}

div.status_boxes > div{
    padding:2px;
    border:#999 1px solid;
    background: #F4FDDF;
}

div.status_boxes > div > b{
    font-size:12px;
}

div.status_boxes > button{
    padding:2px;
    font-size:12px;
}

textarea.replytext{
    width:98%;
    height:40px;
    padding:1%;
    border:#999 1px solid;
}

div.reply_boxes{
    padding:12px;
    /*
    border:#999 1px solid;
    background:#F5F5F5;
    */
}

div.reply_boxes > div > b{
    font-size:12px;
}

.commenttext{
    width:100%;
    height:60px;
    padding:2px;
    border:#999 1px solid;
    font-size:16px;
}

.commentreplytext{
    width:100%;
    height:60px;
    padding:2px;
    border:#999 1px solid;
    font-size:16px;
}


.commentreply_boxes{
    width:97%;
    padding-left:5px;
    border:#999 1px solid;
    background:#F5F5F5;
    font-size:12px;
}

.comment_boxes{
    width:100%;
    padding-left: 2px;
    border: #99C20C 1px solid;
    background: #FAFAFA; /*#C4C1C1; */ /* #F4FDDF;*/
    font-size: 12px;
}

.wCommentText{
    align-content:flex-start;
    width:100%;
    height: 60px;
    float:left;
    margin-left:2px;
    padding: 2px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #FFFFFF;
}


form#photo_form
{
    background:#F3FDD0; border:#AFD80E 1px solid; padding:20px;
}

div#galleries{ width:100%;}
div#galleries > div
{
    float:left; margin:20px; text-align:center; cursor:pointer;
}
div#galleries > div > div
{
    height:100px; overflow:hidden;
}
div#galleries > div > div > img
{
    width:150px; cursor:pointer;
}
div#photos
{
    display:none; border:#666 1px solid; padding:20px;
}
div#photos > div
{
    float:left; width:125px; height:80px; overflow:hidden; margin:20px;
}
div#photos > div > img
{
    width:125px; cursor:pointer;
}
div#picbox
{
    display:none; padding-top:36px;
}
div#picbox > img
{
    max-width:800px; display:block; margin:0px auto;
}
div#picbox > button
{
    display:block; float:right; font-size:36px; padding:3px 16px;
}



/* ==============   from mStyles ============= */


div.message_boxes:nth-child(even) {
    /*background: #EAF4FF; */
}
div.message_boxes:nth-child(odd) {
    /*background: #F0FFF0; */
}

div.reply_boxes:nth-child(even) {
    /*background: #F8F8FF; */
}
div.reply_boxes:nth-child(odd) {
    /*background: #F5F5DC; */
}

.imagescroll {
    width:100%;
    height: inherit;
    overflow-x:visible;
    overflow-style:auto;
    white-space: nowrap;
    margin:0px auto;
    background:#ffffff;
    overflow-y:hidden;
}
.imagescroll ul {
    margin-right:-999em;
    white-space:nowrap;
    list-style:none;
}
.imagescroll li {
    margin:5px;
    text-align:center;
    width: auto;
    height: inherit;
    display:inline-block;
}

.imagescroll li a {
    display: block;
    height: inherit;
    width: auto;
    background-position: center center;
    background-size: cover;
}


.imagescroll img {
    border:0;
    height: 100%;
    width: 100%;
    display:block;
    margin:0px auto;
}

.imagescroll span {
    padding:2px 0 0;
    display:block;
}


body {
    font-family: sans-serif;
    font-weight: 300;
}

a {
    color: #4183C4;
    font-weight: 300;
    text-decoration: none;
}

a:hover {
    color: #3d85c6;
    text-decoration: underline;
}

a.twitter-follow-button {
    display: block;
    height: 32px;
}

a#viewSource {
    display: block;
    margin: 1.3em 0 0 0;
    border-top: 1px solid #999;
    padding: 1em 0 0 0;
}

div#links a {
    display: block;
    line-height: 1.3em;
    margin: 0 0 1.5em 0;
}

h1 a {
    font-weight: 300;
    white-space: nowrap;
}

audio {
    max-width: 100%;
}


body {
    font-family: sans-serif;
    margin: 0;
    padding: 0em;
    word-break: break-word;
}


canvas {
    background-color: #ccc;
    max-width: 100%;
    width: 100%;
}

code {
    font-family: sans-serif;
    font-weight: 400;
}

div#container {
    margin: 0 auto 0 auto;
    max-width: 40em;
    padding: 1em 1.5em 1.3em 1.5em;
}

div#highlight {
    border: 1px solid #666;
    font-size: 1.2em;
    margin: 0 0 50px 0;
    padding: 0 1em 0 1em;
}

div#links {
    padding: 0.5em 0 0 0;
}

h1 {
    font-family: sans-serif;
    font-weight: 500;
    margin: 0 0 0.8em 0;
    padding: 0 0 0.2em 0;
}

h2 {
    font-size: 1em;
    font-weight: 500;
    line-height: 1.2em;
    margin: 0 0 0.8em 0;
}

h3 {
    font-size: 0.9em;
    font-weight: 100;
    margin: 20px 0 10px 0;
    padding: 10px 0 0 0;
}

html {
    overflow-y: scroll;
}

img {
    border: none;
    max-width: 100%;
    pointer-events: none;
}

input {
    font-family: sans-serif;
}

input[type=radio] {
    position: relative;
    top: -1px;
}

input[type=radio] {
    position: relative;
    top: -1px;
}

ol {
    padding: 0 0 0 20px;
}

p {
    color: #444;
    font-weight: 300;
    line-height: 1.6em;
}

p#data {
    border-top: 1px dotted #666;
    font-family: Courier New, monospace;
    line-height: 1.3em;
    max-height: 1000px;
    overflow-y: auto;
    padding: 1em 0 0 0;
}

p.borderBelow {
    border-bottom: 1px solid #eee;
    padding: 0 0 20px 0;
}

section p:last-of-type {
    margin: 0;
}

section {
    border-bottom: 1px solid #eee;
    margin: 0 0 30px 0;
    padding: 0 0 20px 0;
}

section:last-of-type {
    border-bottom: none;
    padding: 0 0 1em 0;
}

/*
select {
    margin: 0 1em 1em 0;
    position: relative;
    top: -1px;
}
*/

h1 span {
    white-space: nowrap;
}

strong {
    font-weight: 500;
}

ul {
    padding: 0 0 0 20px;
}

section p:last-of-type {
    margin: 0;
}

section {
    border-bottom: 1px solid #eee;
    margin: 0 0 30px 0;
    padding: 0 0 20px 0;
}

section:last-of-type {
    border-bottom: none;
    padding: 0 0 1em 0;
}

/*
select {
    margin: 0 1em 1em 0;
    position: relative;
    top: -1px;
}
*/

h1 span {
    white-space: nowrap;
}

strong {
    font-weight: 500;
}

video {
    background: #222;
    margin: 0 0 2px 0;
    width: 100%;
}
/*
div.select {
    margin: 0 0 1em 0;
}
*/

form#testimonial_form
{
    background:#F3FDD0;
    border:#AFD80E 1px solid;
    padding:5px;
}


form#job_application_form
{
    background:#F3FDD0;
    border:#AFD80E 1px solid;
    padding:20px;
}

form#photo_form
{
    background:#F3FDD0;
    border:#AFD80E 1px solid;
    padding:20px;
}

div#photogalleries{}
div#photogalleries > div
{
    float:left; margin:20px; text-align:center; cursor:pointer;
}
div#photogalleries > div > div
{
    height:100px; overflow:hidden;
}
div#photogalleries > div > div > img
{
    width:150px; cursor:pointer;
}
div#photos
{
    display:none; border:#666 1px solid; padding:20px;
}
div#photos > div
{
    float:left; width:125px; height:80px; overflow:hidden; margin:20px;
}
div#photos > div > img
{
    width:125px; cursor:pointer;
}
div#picbox
{
    display:none; padding-top:12px;
}
div#picbox > img
{
    width: 90%; max-width:800px; display:block; margin:0px auto;
}
div#picbox > button
{
    display:block; float:right; font-size:21px; padding:3px 16px;
}

/*  Video Box */


form#video_form, form#youtube_form
{
    background:#F3FDD0;
    border:#AFD80E 1px solid;
    padding:20px;
}
div#videogalleries{}
div#videogalleries > div
{
    float:left;
    margin:20px;
}
div#videogalleries > div > div
{
    height:160px;
    overflow:hidden;
}
div#videogalleries > div > div > video
{
    width:300px;
}
div#videogalleries > div > div > img
{
    width:150px; cursor:pointer;
}
div#videos
{
    display:none;
    border:#666 1px solid;
    padding:20px;
}
div#videos > div
{
    float:left;
    width:125px;
    height:80px;
    overflow:hidden;
    margin:20px;
}
div#videos > div > video
{
    width:125px;
    cursor:pointer;
}
div#videos > div > img
{
    width:125px; cursor:pointer;
}
div#vdobox
{
    display:none;
    padding-top:36px;
}
div#vdobox > video
{
    max-width:800px;
    display:block;
    margin:0px auto;
}
div#vdobox > img
{
    max-width:800px;
    display:block;
    margin:0px auto;
}
div#vdobox > button
{
    display:block;
    float:right;
    font-size:36px;
    padding:3px 16px;
}


/* ================ */

.profileTextArea .contactTextArea {
    align-content:flex-start;
    width:100%;
    height: 160px;
    float:left;
    margin-left:0px;
    padding: 1px;
    align-items:flex-start;
    display:inline;
    font-family: Arial, Helvetica, sans-serif;
    font-size:16px;
    background: #F3F9DD;
}


/* Word Search */


body{ font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;}


div#pagination_controls {font-size:21px;}
div#pagination_controls > a{ color:#06F; }
div#pagination_controls > a:visited{ color:#06F; }

div#page_info {font-size:21px; }
div#page_info > a{ color:#06F; }
div#page_info > a:visited{ color:#06F; }

/*  Panel */
.panel-content
{
    padding: 1em;
}

img.friendpics{border:#000 1px solid; width:60px; height:50px; margin:2px; padding:2px;}

img.profile_pic_box{border:#000 1px solid; height:50px; padding-left:3px;}

div#notesBox{float:left;
             width:100%;
             margin-right:5px;
             padding:10px;}

div#friendReqBox{float:left;
                 width:100%;
                 padding:10px;}

div.friendrequests{height:40px;
                   /*border-bottom:#CCC 1px solid; */
                   margin-bottom:8px;}

img.user_pic{border:#000 1px solid;
             float:left;
             width:40px;
             height:40px;
             margin-right:8px;
             padding:2px}

img.user_pic_reply{border:#000 1px solid;
                   float:left;
                   width:20px;
                   height:20px;
                   margin-right:4px;
                   padding:2px}

div.user_info{float:left;
              font-size:14px;}
div.user_info:nth-child(even) {
    /*background: #F0FFF0; */
    background: #FFFFFF;
}
div.user_info:nth-child(odd) {
    /*background: #EAF4FF;*/
    background: #FFFFFF;
}

div.user_notif:nth-child(even) {
    background: #F0FFF0;
}
div.user_notif:nth-child(odd) {
    background: #EAF4FF;
}

input[type=text] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}

input[type=text]:focus {
    width: 100%;
}

input[type=password] {
    width: 100%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 8px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px;
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}

input[type=password]:focus {
    width: 100%;
}

#forgotpassform
{
    margin-top:24px;
}
#forgotpassform > div
{
    margin-top: 12px;
}
#forgotpassform > input
{
    width: 75%;
    padding: 3px;
    background: #F3F9DD;
}
#forgotpassbtn
{
    font-size:15px;
    padding: 10px;
}


#changepassform
{
    margin-top:24px;
}
#changepassform > div
{
    margin-top: 12px;
}
#changepassform > input
{
    width: 75%;
    padding: 10px;
    background: #F3F9DD;
}
#changepassbtn
{
    font-size:15px;
    padding: 10px;
}

#user_form
{
    max-width:350px;
    min-width:120px;
    height:150px;
    opacity:.95;
    display:none;
    overflow:auto;
    position:absolute;
    left:85%;
    top:3%;
    margin-left:10px;
    font-family:sans-serif;
    padding:20px 10px;
    border:2px solid gray;
    border-radius: 8px;
    background-color:#eee;
}
#notice_form
{
    max-width:400px;
    min-width:150px;
    height:400px;
    opacity:.95;
    display:none;
    position:inherit;
    overflow:auto;
    position:absolute;
    left:85%;
    top:3%;
    margin-left:-202px;
    font-family:sans-serif;
    padding:10px 50px;
    border:2px solid gray;
    border-radius: 8px;
    background-color:#eee
}

.appinfo {
    float: left;
    width: 98%;
    height: inherit;
    margin: 1%;
    padding-top: 15px;
    background-color: #FFFFFF; /* #F0FFF0;*/
    text-align: center;
    font-size: 16px;
}

.youtube-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Media Files Displayed Tabs foe Articles, Lessons, Modules, Courses */
.tab-media {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab-media button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Style the tab */
.tab-media {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
.tab-media button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    font-size: 17px;
}

/* Change background color of buttons on hover */
.tab-media button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
.tab-media button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tab-media-content {
    display: none;
    padding-top: 5px;
    padding-bottom: 5px;
    -webkit-animation: fadeEffect 1s;
    animation: fadeEffect 1s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}

@keyframes fadeEffect {
    from {opacity: 0;}
    to {opacity: 1;}
}