/* Common Teacher Website Styles */

#header { position: relative; }
#header #intro { position: absolute; }
#contents { position: relative; padding: 3px; }
#sidebar { position: relative; }

#sidebar li.private a { color: #bbb; }

div.edit { z-index:3000; position: absolute; top: 5px; right: 5px; height: 18px; }
div.edit img { cursor: pointer; background: transparent url(/images/ext3/panel/white-top-bottom.gif) repeat-x scroll 0pt -1px; border: 1px solid #99bbe8; padding: 3px; }

/* Reset Generic Elements */
b, strong { font-weight: bold !important;}
i, em { font-style: italic !important; }
.content ul, .content ul li { list-style: disc outside; }
.content ol, .content ol li { list-style: decimal outside; }
.content ul, .content ol { margin-left: 2.2em; }

/* Editor Classes */
#edit-header { background: #eee; height: 100%; font: 16px serif; }
#edit-contents { background-color: #fff; height: 100%; font: 16px serif; }
body.content { margin: 0 !important; padding: 0 !important; }

/* Designer Classes */
a img { border: 0; }

body.da { margin: 0 !important; padding: 0 !important; }

#da { background: #87b3bc url(/images/websites/da/bg-banner.png) repeat-x 0 30px; height: 218px; position: absolute; top: 0px; width: 100%; overflow: hidden; border-bottom: 2px solid #ccc; font: 13px/18px Lucida Grande, Calibri, Verdana, Helvetica, Arial, Sans-Serif; }
#da-inner { width: 940px; margin: 0 auto; position: relative; top: 60px; }
#da a, #da a:visited { color: #fff; text-decoration: none; outline: none; }
#da a:hover { text-decoration: underline; }

#da-branding { position: absolute; top: 0; left: 0; background: #333; width: 100%; height: 30px; color: #666; font: 13px/18px Lucida Grande, Calibri, Verdana, Helvetica, Arial, Sans-Serif;}
#da-branding-inner { width: 940px; margin: 0 auto; position: relative; height: 30px; }
#da-branding a { color: #fc0; font-size: 12px; }

#da-branding button { background: #ddd; border-color: #999 #666 #666 #999; border-style: solid; border-width: 1px; color: #333; font: bold 84% 'Trebuchet MS',Helvetica,sans-serif; margin-left: 5px;}

#da-nav { position: absolute; top: 30px; left: 0; background: #456069; width: 100%; }
#da-nav-inner { width: 940px; margin: 0 auto; position: relative; height: 30px; }
#da-nav ul { margin: 0; padding: 0; color: #98acb2; list-style: none; }
#da-nav ul li { float: left; font-size: 13px; margin: 0; padding: 0; line-height: 30px; }
#da-nav ul li a { display: block; float: left; line-height: 30px; text-decoration: underline; color: #98acb2; }
#da-nav ul li.active a { color: #fff; text-decoration: none; background: url(/images/websites/da/active-arrow.gif) no-repeat 50% bottom; }

#da-header-cat { text-align: right; display:none; }
#header-cat { margin-top: 5px; }

#preview { height: 100%; }

.step { display: none; color: #fff; }

#step-1 { display: block; text-align: left; }
#step-1 #intro { width: 390px; padding: 35px; line-height: 1.6; }
#step-1 #intro ul { font-size: 13px; padding-left: 30px; }
#step-1 #intro p { margin: 0 0 15px 0; padding: 0; font-size: 14px; }

#themes { list-style: none; margin: 0; padding: 0; position: absolute; top: 25px; left: 82px; width: 786px; }
#themes li { display: none; float: left; margin-right: 14px; }
#themes li.active { margin-top: -8px; padding-bottom: 5px; border-bottom: 3px solid #46616a; font-weight: bold; }
#themes li a { display: block; width: 143px; font-size: 12px; background-repeat: no-repeat; background-position: 0 0; padding-top: 102px; }
#theme-prev, #theme-next { position: absolute; top: 65px; }
#theme-prev { left: 35px; }
#theme-next { right: 35px; }
#theme-prev a, #theme-next a { display: block; height: 24px; width: 24px; overflow: hidden; text-indent: -9999px; }
#theme-prev a { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat 0 0; }
#theme-prev a:hover { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat 0 -50px; }
#theme-next a { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat -50px 0; }
#theme-next a:hover { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat -50px -50px; }
#choose-theme { display: none; }

#headers { list-style: none; margin: 0; padding: 0; position: absolute; top: 25px; left: 82px; width: 786px; }
#headers li { display: none; float: left; margin: 0 14px 14px 0; }
#headers li.active { margin-top: -8px; padding-bottom: 5px; border-bottom: 3px solid #46616a; font-weight: bold; }
#headers li a { display: block; width: 141px; font-size: 12px; background-repeat: no-repeat; background-position: 0 0; padding-top: 34px; }
#header-prev, #header-next { position: absolute; top: 65px; }
#header-prev { left: 35px; }
#header-next { right: 35px; }
#header-prev a, #header-next a { display: block; height: 24px; width: 24px; overflow: hidden; text-indent: -9999px; }
#header-prev a { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat 0 0; }
#header-prev a:hover { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat 0 -50px; }
#header-next a { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat -50px 0; }
#header-next a:hover { background: url(/images/websites/da/theme-nav-arrows.gif) no-repeat -50px -50px; }

body.fullscreen #da { height: 3500px; overflow: hidden; }
body.fullscreen #preview { display: none; }

body.fullscreen #themes { top: 50px; }
body.fullscreen #themes li { display: block; margin-bottom: 15px; }
body.fullscreen #theme-next, body.fullscreen #theme-prev { display: none !important; }
body.fullscreen #choose-theme { display: block; }
body.fullscreen #themes-all { display: none; }

body.fullscreen #headers { top: 50px; }
body.fullscreen #headers li { display: block; margin-bottom: 15px; }
body.fullscreen #header-next, body.fullscreen #header-prev { display: none !important; }
body.fullscreen #headers-all { display: none; }



.webinar-grid-wrapper {
    border:2px solid #EDEDED;
    background:#FFFFFF;
    padding: 10px;
    margin: 2px 2px 2px 2px;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;

    -moz-box-shadow:0 0 4px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.25);
    box-shadow:0 0 4px rgba(0,0,0,0.25);
}
.webinar-grid {
    min-height: 50px;
    overflow:hidden;
    clear:both;
    position:relative;

    background:#f3f3f3;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;

    padding: 10px;
}

.webinar-grid-webinar
{
    float: left;
    width: 240px;
    clear: none;
    border: 6px solid #FFFFFF;
    margin: 2px;

    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -khtml-border-radius:6px;
    border-radius: 6px;

    -moz-box-shadow:0 0 4px rgba(0,0,0,0.3);
    -webkit-box-shadow:0 0 4px rgba(0,0,0,0.25);
    box-shadow:0 0 4px rgba(0,0,0,0.25);
}


.webinar-grid td
{
    border: 0px solid;
    border-bottom: 1px solid #CCC;
    padding: 5px;
}

/* ********** BTN MINI ********* */
.btnMini {
	display: inline-block;
	padding: 2px 4px;
	color: #777 !important;
	text-decoration: none;
	font-weight: bold;
	font-size: 12px;
	font-family: Tahoma, Arial, sans-serif;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	text-shadow: 0 1px 1px rgba(255,255,255,0.9);
	position: relative;
	cursor: pointer;
	border:1px solid #ccc !important;
	background:#fff url("/images/icons/flowicons/btn-overlay.png") repeat-x !important;
}
.btnMini:hover, .btnMini:focus, .btnMini:active {
	outline:medium none;
	border:1px solid #329ECC !important;
	opacity:0.9;
	-khtml-opacity: .9;
	-moz-opacity: 0.9;
	-moz-box-shadow:0 0 5px rgba(82, 168, 236, 0.5);
	-webkit-box-shadow: 0 0 5px rgba(82, 168, 236, 0.5);
	box-shadow: 0 0 5px rgba(82, 168, 236, 0.5);
}

.btnMini-green {
	color: #fff !important;
	text-shadow: 0 1px 1px rgba(0,0,0,0.25);
	border:1px solid #749217 !important;
	background-color: #6AB620 !important;
}
.btnMini-green:hover, .btnMini-green:focus, .btnMini-green:active {
	-moz-box-shadow:0 0 5px rgba(116, 146, 23, 0.9);
	-webkit-box-shadow: 0 0 5px rgba(116, 146, 23, 0.9);
	box-shadow: 0 0 5px rgba(116, 146, 23, 0.9);
	border:1px solid #749217 !important;
}

.btnMini[disabled]{
	border: 1px solid #CCCCCC !important;
	color: #777777 !important;
	background-color: #CACACA !important;
}

.btn200 { width: 200px; }
.btn95 { width: 95px; }
.hidden { display: none; }

/* For accessibility: set the focus color so keyboard-only users can tell what is focused*/
   :focus {
       outline: 2px dotted #6495ed !important;
   }

.goog-te-gadget {
    display: inline-block;
}

.google_translate_element {
    padding-top: 5px;
}

/* Mobile Resolution Support */
@media only screen and (max-width: 600px) {
    #wrapper,
    #header,
    #container,
    #footer {
        width: 100% !important;
        max-width: 850px !important;
    }
    .master-container {
        display: flex !important;
        justify-content: center !important;
    }
    .master-container * {
        position: static !important;
        box-sizing: border-box !important;
    }
    #container {
        display: flex !important;
        flex-direction: column !important;
    }
    .header-container {
        width: 100% !important;
    }
    #wrapper {
        display: flex !important;
    }
    #contents {
        flex: 1 !important;
        width: unset !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    #header {
        margin-left: 0 !important;
        margin-right: 0 !important;
        background-position: center !important;
    }
    #wrapper {
        flex-direction: column !important;
    }
    #sidebar {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .title,
    ul[role="menu"],
    li[role="menuitem"],
    li[role="menuitem"] a {
        height: unset !important;
        width: 100% !important;
        text-indent: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    #sidebar li,
    .body-content {
        /* Standardize the padding */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .body-content img,
    .body-content video,
    .body-content figure {
        width: 100% !important;
        height: auto !important;
    }
    .body-content iframe {
        width: 100% !important;
        height: unset !important;
        aspect-ratio: 16 / 9 !important;
    }
    .clearBoth {
        display: none !important;
    }
    #footer {
        padding: 0 !important;
        margin: 0 !important;
    }
}