/* COMMON STYLES FOR ALL CODE LIBRARY EXAMPLES */

body {
	font: 15px/28px  "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif ;
	color:#484641;
    margin:0;
    padding:0;
}

header {
	background-color:#00274d;
    color:#fff;height:38px;display:block;
}

header a {
	color:#feffde;
    }
.dequeULogo a {float:left;margin-right:20px;padding:4px;display:inline-block;overflow:hidden;line-height:1em;height:29px;}  
.dequeULogo a:hover,.dequeULogo a:focus,.dequeULogo a:active {background-color:#365ebe;border:none;outline:none;}  
.dequeULogo img {border:none;outline:none;}
.branding {
	padding:4px 8px;
    float:left;
}    

.betaDisclaimer {
	background-color:#365ebe;
    padding:4px 8px;
    float:right;
}

main {clear:both;}

.dqu_example_container {
    margin: 0 auto;
    max-width:960px;
    padding: 0 1em;
    position:relative;
}
#dqu_example_source_container {
    padding-top: 2em;
}
#dqu_example_source_container li {
    padding: 0px 0px;
    margin: 0px 0px;
}
.summaryTag h2{
    font-size: 100%;
    background-color:#eee5e5;
    padding-left: 5px;
}
a:hover,a:focus, a:active {
	background-color:#fdf6e7;
    color:#00539B;
    outline:#467310 1px solid;
    text-decoration:none;
}
a:hover img, 
a:focus img, 
a:active img {
	background:none;
}
h1 {
	text-align:center;
}

.hidden {
    display: none;
    visibility: hidden;
}

.displayNone {
	display:none;
}

.show_block,
.displayBlock {
    display: block;
    visibility: visible;
}

.displayInline {
	display: inline;
    visibility: visible;
}

.fullwidth {
    width: 100%;
}

.bigquote {
    font-size: 1.6em;
    line-height: 1.7em;
}

.sans {
    font-family: "Times New Roman", Times, serif;
}

.clear {
    clear: both;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

.right {
    text-align: right;
}

.floatright {
    float: right;
    margin: 0 0 10px 10px;
}

.floatleft {
    float: left;
    margin: 0 10px 10px 0;
}

.alert-error,
.alert,
.error, 
.loginMessage .error {
    margin: 20px 40px;
    padding: 20px;
    border: 2px solid #990000;
    background: #fefee7;
    border-radius: 10px;
}

.screenreader,
.clip,
.visually-hidden,
.visuallyhidden,
.offscreen {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px 1px 1px 1px);
 	/* < -- IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}

.error {
    padding: 0;
    border: none;
    margin: 0 0 5px 0 !important;
}

.alert-polite {
    margin: 20px 40px;
    padding: 20px;
    border: 1px solid #990000;
    background: #fffff4;
    border-radius: 5px;
}

.alert-polite p:first-child {
    margin-top: 0;
}

.alert-polite p:last-child {
    margin-bottom: 0;
}

.alert-polite:focus {
    outline: none;
}

.alert-confirm {
    margin: 20px 40px;
    padding: 20px;
    border: 1px solid #ccc;
    background: #f8f9ff;
    border-radius: 5px;
}

.alert-success {
    margin: 20px 40px;
    padding: 20px;
    border: 1px solid #2f703f;
    background: #f1f9f2;
    border-radius: 5px;
}

.alert h2, 
.alert-error h2, 
.alert-polite h2, 
.alert-confirm h2, 
.alert-success h2,
.alert h3, 
.alert-error h3, 
.alert-polite h3, 
.alert-confirm h3, 
.alert-success h3 {
    margin: 0 !important;
    padding: 0 !important;
}

img.icon {
    display: inline !important;
    border: none !important;
}

.highlight {
    background-color: #FF6;
}

code,pre,code.block {
    font: 1em/1.7em Inconsolata, "Courier New", Courier, monspace;
}

pre {
	background-color:#eee;
    padding:10px;
    border-radius:10px;
    white-space: pre-wrap;       /* css-3 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
    }

pre code, code.block {
    display: block;
    padding: 10px;
    overflow: auto;
    border-radius: 5px;
    font-size: .9em;
}

.block {
    display: block !important;
}

.inline {
    display: inline !important;
}

.clearfix:before, .clearfix:after {
    content: "";
    display: block;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    zoom: 1;
}

table.data {border-collapse: collapse;}

table.data caption {font-weight:bold;}

table.data td, table.data th {border: 1px solid black;padding:3px}

input, button {
	/* outline:2px solid #fff; */
   /* outline-offset: 1.5px;
    border: 1px #333 solid !important;*/
}

/*
input:hover, input:focus, button:hover, input:focus { 
    border: 1px #333 solid !important;
    outline: 2px solid #467310 !important;
}
*/


input[type=text]:hover,
input[type=text]:focus,
input[type=password]:hover,
input[type=password]:focus,
textarea:hover,
textarea:focus {
	outline:2px solid #467310;
    background-color:#fdf6e7;
    border: 1px #333 solid !important;
      outline: 2px solid #467310 !important;
    outline-offset: 1.5px;
}

input[type=checkbox]:hover,
input[type=checkbox]:focus,
input[type=radio]:hover,
input[type=radio]:focus {
	background-color:#fdf6e7;
    outline:2px solid #467310    border: 1px #333 solid !important;
      outline: 2px solid #467310 !important;
    outline-offset: 1.5px;
}

select:hover, 
select:focus, 
select:active {
	background-color:#fdf6e7;
    outline:2px solid #467310    border: 1px #333 solid !important;
      outline: 2px solid #467310 !important;
    outline-offset: 1.5px;
}

select {
	font-size:95%;
}

button img {
    display:inline !important;
    border:none !important;
}
button img[height="16"] {
	margin-bottom:-3px !important;
}

button:focus,
button:active,
button:hover,
[role=button]:focus,
[role=button]:active,
[role=button]:hover {
	outline:#467310 solid 2px !important;
    cursor:pointer;
      outline: 2px solid #467310 !important;
    outline-offset: 1.5px;
}
button:active,
[role=button]:active {
    position:relative;
}

footer {
	margin:50px 0;
    text-align:center;
}

footer a {
    text-decoration: underline;
}

.deque-hierarchical-menu  button:focus, .deque-hierarchical-menu  button:hover, .deque-hierarchical-menu li a:focus, .deque-hierarchical-menu li a:hover{
    outline-offset: 0px!important;  
    border-width: 2px!important;
    outline: 1px solid #467310 !important;
}

.note {margin:40px 0 20px 0;padding:15px 20px;border-bottom:1px solid #c3c3c3;border:1px solid #b2b2b2;border-radius:5px;}
.note p:first-child {margin-top:0;padding-top:0;}
.note p:last-child {margin-bottom:0;padding-bottom:0;}
.note h2,.note h3, .note h4 {float:left;background:#fff;color:#5d5d5d !important;display:inline-block;min-height:27px;margin:-33px 0 0 10px !important;padding:3px 10px 3px 35px!important;border:1px solid #b2b2b2;border-radius:5px 5px 5px 5px;font-size:1em !important;background:url(/assets/images/template/courses2014/information24.png) no-repeat 5px 50% #fff;}

.detailsTag {
	margin: 10px 0;
}

.summaryTag {
	cursor: pointer;
	display:block;
    color: #254973;
    border: 1px solid #949494;
    border-radius: 5px;
    padding: 3px 6px 3px 25px;
}

.detailsTag.notSupported .summaryTag {
    background: #fff url("/assets/images/template/dequeUniversity/triangle-right-blue12.png") 6px center no-repeat !important;
}

.summaryTag::before {
    padding-right: 0px;
    display: inline;
}

.summaryTag h3::before,
.summaryTag h4::before,
.summaryTag h5::before {
	content: "Expand ";
}

.detailsTag.notSupported .summaryTag.expanded {
	background: #fff url("/assets/images/template/dequeUniversity/triangle-down-blue12.png") 6px center no-repeat !important;
}

details, summary {
	display: block;
}

.detailsTag.notSupported .summaryTag.expanded h3::before,
.detailsTag.notSupported .summaryTag.expanded h4::before,
.detailsTag.notSupported .summaryTag.expanded h5::before {
    content: "Collapse ";
}

.summaryTag:hover,
.summaryTag:focus,
.summaryTag:active,
.summaryTag[role=button]:hover,
.summaryTag[role=button]:focus,
.summaryTag[role=button]:active {
    border:none !important;
    
    outline: none !important;
    border: 1px solid #467310 !important;
    background-color: #fdf6e7 !important;
}
 
.summaryTag h2,
.summaryTag h3, 
.summaryTag h4, 
.summaryTag h5,
.summaryTag h6,
#content .example .summaryTag h2, 
#content .example .summaryTag h3,
#content .example .summaryTag h4, 
#content .example .summaryTag h5, 
#content .example .summaryTag h6 {
    margin:0 !important;
    padding:0 !important; 
    background: none;
    color: #225a9b;
    font-weight: normal;
    border: none !important;
    border-radius: none;
    display: inline;
    clear: none;
    height: auto !important;
}

/* ##################################################################### 
                          MOBILE - PHONE
###################################################################### */

@media (max-width: 800px) {
	.branding {
    	width:100%;
        box-sizing:border-box;
        width:100%;
        background-color:#00274d;
    }
	.betaDisclaimer {
        width:100%;
        box-sizing:border-box;
	}
    h1 {clear:both;}
    main {clear:both;}
    
}


/*.deque-table-sortable-group button, .deque-slider input, .deque-hierarchical-menu button {
    border: none!important;
    outline:none!important;
} 
*/