/*
DO NOT EDIT THIS CSS!
- CREATE ANOTHER GUIDE SPECIFIC STYLESHEET FOR ADDITIONAL STYLES
*/

/*Defaults*/
.breadcrumb {display:none;height:0;padding:0;margin:0}
.dcg *, .dcg *:after, .dcg *:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box}
.dcg .group:before, .dcg .group:after {content: "";display: table} 
.dcg .group:after {clear: both}
.dcg .group {zoom: 1}
.dcg p, .dcg a {font-size: 14px;}

/*Gotham font*/
/*.dcg,
.dcg p {font-family: 'Gotham SSm A', 'Gotham SSm B', Arial, sans-serif; font-weight: 400; font-style: normal;}*/
.dcg h1,
.dcg h2 {text-shadow: none !important; font-family: 'Gotham A', 'Gotham B', Arial, sans-serif; font-weight: 400; font-style: normal; letter-spacing: -1px}

/*Page styles*/
.dcg {margin: 0px auto; padding: 10px 0 25px 0;}
.dcg .border {border: 1px solid #ccc;}
.dcg h1 {color: #161b7a; font-weight: 600; font-size: 2em;}
.dcg h2 {color: #161b7a; font-weight: 500; font-size: 1.7em; margin-top: 5px;}
.dcg h3 {font-size: 14px; margin-top: 5px;}
.dcg p.tsp a {color: #222;}
.dcg p {margin-bottom: 25px;}
.dcg p i, .dcg li i, .dcg a i {font-size: 80%;}
.dcg a.space {display: inline-block; margin-right: 10px; margin-bottom: 15px;}

/*Nav*/
.dcg nav {margin: 0;}
.dcg nav ul {padding: 10px; border: 1px solid #ccc; border-top: 0;}
.dcg nav ul.guide-content {border-top: 1px solid #ccc;}
.dcg nav ul li {margin-bottom: 0.35em}
.dcg nav ul li a {padding: 0; font-size: 13px; padding: 0; margin: 0;}
.dcg nav ul li a:hover {text-decoration: underline}
.dcg nav ul h3 {font-size: 14px; margin: 0 0 10px 0; margin-top: 0 !important;}
.dcg nav.active {display: block}
.dcg nav ul.nav-more {padding: 0; display: none}
.dcg nav ul.nav-more a {padding: 0.5rem 10px; margin: 0;}
.dcg nav ul.nav-more a h3 {margin-bottom: 0px !important; color: #000}
.dcg nav ul.nav-more a h3 i {font-size: 80%; float: right; margin-top: 3px; color: #06e}

/*Header*/
.dcg header {margin-bottom: 20px; padding: 20px 20px 0 20px; background: #f5f5f5}
.dcg .h_intro {float: left; width: 40%;padding: 0px 25px 4px 5px;}
.dcg .h_intro p:first-child {font-weight: 700; font-size: 16px; padding-top: 10px;}
.dcg .h_video, .dcg .h_image {float: left; width: 60%; margin-bottom: 20px;}
.dcg .h_image {border: 0px solid #aaaaaa;}
.dcg .h_image img {width: 100%;}
.dcg .video_cont {background: #aaaaaa; padding: 3px}
.dcg header p {font-size: 14px;}

/*Sections*/
.dcg .s_cont {margin-bottom: 0; padding: 20px; margin-top: 15px;}
.dcg .intro {overflow: hidden}
.dcg .img {float: right; width: 33.33%; padding: 0 0 15px 15px;}
.dcg .img img {width: 100%;}
.dcg img.full-width {width: 100%; margin: 10px 0;}
.dcg .split .copy,
.dcg .split .asset {float: left; width: 50%; margin-bottom: 16px}
.dcg .split .copy {padding-right: 20px;}
.dcg .split .asset img {width: 100%}
.dcg .halves {margin-left: -2%;}
.dcg .halves .half {float: left; width: 48%; margin-left: 2%; margin-bottom: 16px}
.dcg .nutshell {font-style: italic;}
/* Boxout within section */
.boxout { background: #f2f2f2; padding: 20px; margin-bottom: 20px; display: inline-block; }
.boxout .img { width: 45%; }
.boxout p { margin-bottom: 0px;  }
/* Right aligned image within expanded content */
.dcg .right { display: inline-block; clear: both; }
.dcg #control .group .img .control-panel  {
    width:100%;
}
/*Accordion*/
.dcg #collapsable-content a.toggleControler {display: block; width: 100%; color: #222; background: #f2f2f2; text-decoration: none; padding: 10px; margin: 10px 0; font-weight: bold; font-size: 14px;}
.dcg #collapsable-content a.toggleControler:before {content: "\f078"; font-family: 'DCG-Icons', Arial, sans-serif; color: #777; float: right; font-style: normal; margin-left: 12px;}
.dcg #collapsable-content a.toggleControler.active:before {content: "\f077"; font-family: 'DCG-Icons', Arial, sans-serif; color: #CCC; float: right; font-style: normal}
.dcg #collapsable-content .content-wrap {padding: 5px 0px 10px 0px;}

/*Video - DO NOT EDIT*/
.dcg .videoWrapper { position: relative; padding-bottom: 56.25%; /* 16:9 */ height: 0; overflow: hidden;}
.dcg .videoWrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow:hidden; }

/*Bullets*/
.dcg .s_cont ul li {font-size: 14px; line-height: 1.4em; margin-bottom: 8px;}
.dcg .s_cont ul.no-bullets {list-style-type: none; padding-left: 0}

/*Jargon*/
.dcg .jargon {-moz-column-count: 3;-moz-column-gap: 40px;-webkit-column-count: 3;-webkit-column-gap: 40px;column-count: 3;column-gap: 40px;-moz-column-rule: 1px solid #e8e8e8; -webkit-column-rule: 1px dotted #e8e8e8; column-rule: 1px dotted #e8e8e8;}
.dcg .jargon p {font-size: 13px}
.dcg .jargon p span {font-size: 14px; font-weight: 700}

/* Small Desktop */
@media only screen and (min-width: 0) and (max-width:1239px) {
	.dcg .h_intro, 
	.dcg .h_video,
	.dcg .h_image {width: 50%;}
}

/* Tablet */
@media only screen and (min-width: 0) and (max-width:1024px) {

	aside#fixed.col3 {
		position: static !important;
		left: 0 !important;
		top: 0 !important;
		margin-bottom: 1em !important;
	}

	.dcg h1 {font-size: 1.8em;}
	.dcg h2 {font-size: 1.5em;}

	.dcg nav ul.nav-more {display: block}
	.dcg nav ul.nav-more a {display: block}
	.dcg nav ul.nav-more.hide {display: none}

	.dcg #bg-nav span#open-contents {display: none}
	.dcg #bg-nav.show .nav-more.hide,
	.dcg #bg-nav.show span#open-contents {display: block}

	.dcg #bg-nav.show ul.nav-more.show {display: none}
	.dcg #bg-nav.hide ul.nav-more.hide {display: none}

	.dcg .jargon {-webkit-column-count: 2; -moz-column-count: 2; column-count: 2;}

}

/* Mobile */
@media handheld, only screen and (max-width: 599px) {

	.dcg p, .dcg a {font-size: 13px;}
	.dcg .s_cont ul li {font-size: 13px;}
	.dcg header p {font-size: 14px;}
	.dcg h1 {font-size: 1.6em;}
	.dcg h2 {font-size: 1.3em;}
	.dcg a.space {display: block; margin-bottom: 10px}

	.dcg #collapsable-content a.toggleControler {font-size: 13px}

	.dcg header {padding: 10px;}
	.dcg .s_cont {padding: 10px;}
	.dcg .split .copy,
	.dcg .split .asset {float: none; width: 100%;}
	.dcg .split .copy {padding-right: 0;}
	.dcg .halves {margin-left: 0;}
	.dcg .halves .half {float: none; width: 100%; margin-left: 0%;}

	.dcg .h_intro,
	.dcg .h_video {float: none; width: 100%;}
	.dcg .h_intro {padding: 0px 5px;}
	.dcg .h_intro p {margin-bottom: 5px;}
	.dcg .h_image,
	.dcg .h_video {width: 100%; margin-top: 10px; margin-bottom: 0;}

	.dcg .jargon {-webkit-column-count: 1; -moz-column-count: 1; column-count: 1;}

}