/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain) */
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, strong, sub, 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 { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
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: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/* End RESET */



/* FONT Declarations ---------*/
.dc-wrapper {
	font-family: 'Cuprum', sans-serif;
	font-weight: 400;
}

.dc-txt__b,
.dc-txt__strong {
	font-weight: 700;
}

.dc-txt__em,
.dc-txt__i {
	font-style: italic;
}

.dc-btn,
.dc-config__valid-error,
.dc-header__title,
.dc-history__th,
.dc-input__valid-error,
.dc-panel__title,
.dc-panel__subtitle,
.dc-results__th {
	font-family: 'Signika', sans-serif;
	font-weight: 600;
}



/*Color Scheme Index ----------
----HIGHLIGHT GREEN:    #BADA55
    background-color    [ .dc-btn:active, ::selection, .dc-header, .dc-footer,
                          .dc-results__th, .dc-history__th, .dc-history__tr--odd,
                          .dc-roll-input__set ];
    border-color        [ .dc-txt__link:hover ];
    box-shadow          [ .dc-panel__input:focus ];
    color               [ .dc-txt__link:hover ];
----
    WARNING/ERROR RED:  #F55
    box-shadow          [ :invalid ];
    color               [ :invalid, .dc-config_valid-error, 
                          .dc-input_valid-error ];
----
    BLACK:              #000
    border-color        [ .dc-header, .dc-panel, .dc-roll-input__btn--minus, .dc-roll-input__btn--plus ];
----
    DARK GREY:          #333
    border-color        [ .dc-txt__link, .dc-txt__link:active ];
    color               [ .dc-wrapper, .dc-btn, .dc-footer__link, .dc-panel__input, .dc-txt__link, .dc-txt__link:active ];
----
    MIDDLE-DARK GREY:   #666
    border-color        [ .dc-header__title, .dc-panel__subtitle, .dc-panel__title,
    			  .accordion__bar:hover ];
----
    MIDDLE GREY:        #888
    background-color    [ .dc-roll-input__btn--minus:active, .dc-roll-input__btn--plus:active, 
                          .accordion__bar:hover::after ];
    border-color        [ .dc-btn, .dc-header__title, .dc-panel__subtitle, .dc-panel__title, .dc-panel__input,
                          .dc-history__table, .dc-history__tbody, .dc-history__td,
                          .dc-history__th, .dc-history__thead, .dc-history__tr,
                          .dc-results__table, .dc-results__tbody, .dc-results__td,
                          .dc-results__th, .dc-results__thead, .dc-results__tr,
                          .accordion__bar::after ];
    color               [ .accordion__bar:active::after ];
----
    MIDDLE-LIGHT GREY:  #AAA
    border-color        [ .dc-header__title, .dc-panel__subtitle, .dc-panel__title ];
----
    LIGHT GREY:         #CCC
    background-color    [ .accordion--closed ];
----
    VERY LIGHT GREY:    #D8D8D8
    background-color    [ .accordion__bar:hover ];
----
    WHITE:              #FFF
    background-color    [ .accordion__bar:active::after, 
                          .dc-roll-input__btn--minus, .dc-roll-input__btn--plus ];
    border-color        [ .dc-footer__link:hover ]
    color               [ .accordion__bar:hover::after, .dc-footer__link:hover
                          .dc-roll-input__btn--minus:active, .dc-roll-input__btn--plus:active ];
-------------------------------*/





/***General Styling***/
.dc-wrapper { 
	color: #333;
}

.dc-btn {
	background: none;
	border-color: #888;
	color: #333;
	font-size: 0.85em;
	margin: 0.25em 0.25em 0.25em 0em;
	padding: 0.3em;
}
.dc-btn:hover {
	cursor: pointer;
}
.dc-btn:active, .dc-btn:focus {
	background-color: #BADA55;
}

/*PANEL blocks*/
.dc-panel {
	border: solid 1px #000;
	padding: 1em;
}

.dc-panel__input {
	border: inset 1px #888;
	color: #333;
}
.dc-panel__input:focus {
	outline: none; /*clear the blue glow*/
	box-shadow: 0 0 3px 2px #BADA55;
}

/*number input spinner hiding*/
.dc-panel__input[type=number] {
	-moz-appearance: textfield;
}
.dc-panel__input::-webkit-inner-spin-button { 
	-webkit-appearance: none;
}
.dc-panel__input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
}

.dc-panel__litem {
	margin: 0 0 0.25em;
}

.dc-panel__p {
	text-indent: 1em;
	line-height: 1.4em;
	margin: 0 0.5em 0.5em;
}

.dc-panel__ol {
	list-style-type: decimal;
	margin: 0 1em 0.5em 3em;
}

.dc-panel__title {
	border-top: 3px solid #AAA;
	border-bottom: 3px solid #666;
	font-size: 1.4em;
	letter-spacing: 0.1em;
	line-height: 1.4em;
	margin-bottom: 0.5em;
	padding: 0 0.5em;
}

.dc-panel__subtitle {
	border-top: 2px solid #AAA;
	border-bottom: 2px solid #666;
	font-size: 1.2em;
	line-height: 1.3em;
	margin-bottom: 0.5em;
	padding: 0 0.5em 0 1.25em;
}

/*LINKS, within text*/
.dc-txt__link {
	border-bottom: dotted 1px #333;
	color: #333;
	text-decoration: none;
}
.dc-txt__link:hover, .dc-txt__link:focus {
	border-bottom: dashed 1px #BADA55;
	color: #BADA55;
}
.dc-txt__link:active {
	border-bottom: solid 1px #333;
	color: #333;
}



/***DC_CONFIG Block***/
.dc-config__form {
	margin: 1em 0.5em;
}

.dc-config__litem {
	clear: both;
	margin: 0 0 0.25em;
}

.dc-config__output-mod {
	display: inline-block;
	float: right;
}

.dc-config__ul {
	margin: 0 1em 0.5em;
	max-width: 20em;
}

.dc-config__valid-error {
	color: #F55;
	text-indent: 1em;
	line-height: 1.4em;
	margin: 0 0.5em 0.5em;
}

.dc-config-input--num {
	width: 3em;
}



/***DC-FOOTER Block***/
.dc-footer {
	background-color: #BADA55;
	border: solid 1px #000;
	padding: 1em;
	text-align: right;
}

.dc-footer__link {
	color: #333;
	border-bottom: dotted 1px #333;
	text-decoration: none;
}

.dc-footer__link:hover, .dc-footer__link:focus {
	color: #FFF;
	border-bottom: dashed 1px #FFF;
}



/***DC-HEADER Block***/
.dc-header {
	background-color: #BADA55;
	border: solid 1px #000;
	padding: 1em;
}

.dc-header__title {
	border-top: 5px solid #AAA;
	border-bottom: 5px solid #666;
	font-size: 1.7em;
	line-height: 1em;
	padding: 0.1em 0;
}



/***TABLES Blocks***/
.dc-history__table, dc-history__tbody, .dc-history__td, .dc-history__th, .dc-history__thead, .dc-history__tr,
.dc-results__table, .dc-results__td, .dc-results__th, .dc-results__tr {
	border: solid 2px #888888;
}
.dc-history__td, .dc-results__td {
	border-style: dotted;
}
.dc-history__td, .dc-history__th, .dc-history__tr,
.dc-results__td, .dc-results__th, .dc-results__tr {
	border-width: 1px;
}

.dc-history__td, .dc-history__th,
.dc-results__td, .dc-results__th {
	min-width: 4em;
	padding: 0.25em;
}

.dc-history__th,
.dc-results__th {
	background-color: #BADA55;
}

.dc-history__tr--odd {
	background-color: #BADA55;
}

.dc-results__th {
	border-width: 1px 2px;
	border-style: solid;
	text-align: right;
}



/***ROLL-INPUT blocks***/
.dc-roll-input__btn--minus, .dc-roll-input__btn--plus {
	background-color: #FFF;
	border: solid 1px #000;
	display: inline-block;
	font-size: 20px;
	height: 19px;
	line-height: 13px;
	margin: 0;
	padding: 0;
	position: absolute;
	right: 2px;
	text-align: center;
	width: 19px;
}
.dc-roll-input__btn--minus {
	bottom: 5px;
}
.dc-roll-input__btn--plus {
	bottom: 26px;
}
.dc-roll-input__btn--minus:hover, .dc-roll-input__btn--plus:hover {
	cursor: pointer;
}
.dc-roll-input__btn--minus:active, .dc-roll-input__btn--plus:active {
	background-color: #888;
	color: #FFF;
}

.dc-roll-input__btn--roll {
	bottom: -20px;
	height: 50px;
	left: 7px;
	position: relative;
	width: 50px;
}

.dc-roll-input__input {
	display: inline-block;
	font-size: 1.4em;
	height: 36px;
	padding: 1px;
	text-align: right;
	width: 48px;
}

.dc-roll-input__lbl {
	display: block;
	font-size: 1.1em;
	margin-bottom: 5px;
	text-align: center;
}

.dc-roll-input__set {
	background-color: #BADA55;
	float: left;
	font-size: 100%;
	padding: 5px;
	position: relative;
	width: 70px;
}

.dc-roll-input__valid-error {
	color: #F55;
	text-indent: 1em;
	line-height: 1.4em;
	margin: 0 0.5em 0.5em;
}



/***ACCORDION***/
.accordion__bar {
	cursor: pointer;
}
.accordion__bar::after {
	border-color: #888;
	border-style: solid;
	border-width: 0 2px;
	content: "~";
	float: right;
	height: 1em;
	line-height: 1em;
	margin: 4px 0;
	padding: 0 0.25em;
	text-align: center;
	width: 0.5em;
}
.accordion__bar:hover {
	background-color: #D8D8D8;
	border-color: #666;
}

.accordion__bar:hover::after {
	background-color: #888;
	color: #FFF;
}
.accordion__bar:active::after {
	background-color: #FFF;
	color: #888;
}

.accordion__bar--closed {
	margin-bottom: 0;
}
.accordion__bar--closed::after {
	content: "+";
}

.accordion--closed {
	background-color: #CCC;
	box-shadow: 0px 0px 3px inset;
	overflow: hidden;
}



/***HELPER Classes, Pseudos***/
.clear-both {
	clear: both;
}

.hidden {
	display: none;
}

.scroll-x {
	overflow-x: scroll;
}

:invalid {
	box-shadow: 0 0 3px 1px #F55 inset;
	color: #F55;
}

::selection {
	background-color: #BADA55;
}





/***Media Queries -----------------***/
/*PENDING*/

@media screen and (min-width: 21em) {

}

@media screen and (min-width: 32em) {

}

@media screen and (min-width: 44em) {

}

@media screen and (min-width: 64em) {

}