

/*-------------------------------------------    
    Fonts     
-------------------------------------------*/



/*-------------------------------------------    
    Flag
	(Thanks Jeremy: http://adactio.com/journal/5429/)
-------------------------------------------*/
body:after { 
	content: 'mini'; 
	display: none; 
}



/*-------------------------------------------    
    Base     
-------------------------------------------*/
* { 
	margin: 0; 
	padding: 0; 
}

html { 
	font-size: 62.5%; /* for rems */
} 

/* Thanks, Paul Irish! https://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
html {
 	box-sizing: border-box;
}

*, *:before, *:after {
 	box-sizing: inherit;
}

body { 
	font: normal 62.5%/1.5 $mainFontStack;
	color: $textColor; 

	&.breveNewsBook-loaded {
		font-family: $wfSerifStack;
	}
}



/* block level */

h1, 
.h1 { 
	@include dm-u-text--xxl;
	margin: 0 0 0.5em; 
}

h2, 
.h2 { 
	@include dm-u-text--xl;
	margin: 0 0 1em; 
	line-height: 1.2;
}

h3, 
.h3 { 
	@include dm-u-text--l;
	margin: 0 0 1em; 
}

h4, 
h5, 
h6, 
.h4, 
.h5, 
.h6 { 
	@include dm-u-text--m;
	margin: 0 0 1em; 
}

.breveNewsBold-loaded {
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		@include dm-u-font--normal;

		// seasoning
		font-family: 'BreveNews-Bold';
	}
}

p, 
ul, 
dl, 
ol, 
table { 
	@include dm-u-text--s;
	margin: 0 0 1.5em; 
}

ul,
ol {
	margin-left: ($spacing * 3) + px;
}

form { 
	margin: 0 0 1.5em; 
}



/* inline */

label { 
	@include dm-u-text--s;
}

input, 
select, 
textarea {  

}

input::-webkit-input-placeholder, 
textarea::-webkit-input-placeholder { 

}

input.empty::-webkit-input-placeholder, 
textarea.empty::-webkit-input-placeholder { 
	color: red; 
}

input.empty:-moz-placeholder, 
textarea.empty:-moz-placeholder { 
	color: red; 
}

.error { 
	color: red; 
}

table { 
	border-collapse: collapse;
	width: 100%;
}
    
    th,
    td { 
    	padding: 0.25em 1em; 
    	border-top: 1px solid #aaa; 
    }

    td {
    	text-align: right;
    }


em,
dfn,
cite { 
	font-style: italic; 

	.breveNewsBookItalic-loaded & {
		@include dm-u-fontStyle--normal;

		// seasoning
		font-family: "BreveNews-BookItalic";
	}
}

strong { 
	font-weight: bold; 

	.breveNewsBold-loaded & {
		@include dm-u-font--normal;

		// seasoning
		font-family: "BreveNews-Bold";
	}
}

mark { 
	background: none; 
	font-style: normal; 
}

ins {
	text-decoration-color: green;
	text-decoration-style: dotted;
}

video { 
	width: 100%; 
	height: auto; 
	max-width: 100%;
}

a { 
	color: $textColor;
	text-decoration: none; 
	-webkit-transition	: 	box-shadow 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000), color 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
    -moz-transition		: 	box-shadow 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000), color 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
      -o-transition 	: 	box-shadow 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000), color 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
         transition 	: 	box-shadow 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000), color 270ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
    box-shadow: inset 0 -0.06em 0 $orange;
    box-shadow: inset 0 -0.07em 0 var(--articlePrimaryColor, $orange);
	
}

a:hover { 	
    //box-shadow: inset 0 -0.85em 0 var(--articlePrimaryColor, $orange);
    box-shadow: inset 0 -0.85em 0 var(--articlePrimaryColorHover, $orange);
    color: #000;
}

a:focus {
	background: #fff;
	outline: none;
	background: $orange;
	color: #fff;
	box-shadow: 8px 8px 24px rgba(0, 0, 0, 0.2);
}

img,
svg { 
	display: block; 
	margin: 0 10px 10px 0; 
	max-width: 100%; 
	height: auto;
}

a img { 
	border: none; 
}

i { 
	font-style: normal; 
}

b { 
	font-weight: normal; 
}

abbr, 
abbr[title], 
acronym { 
	border: none; 
	font-size: 75%; 
	letter-spacing: 0.2em; 
	text-transform: uppercase; 
	text-decoration: none;	
}

code,
var { 
	//font: 1.4rem/1 Consolas, 'Courier New', Courier, monospace; 
	font-family: 'Source Code Pro', Consolas, 'Courier New', Courier, monospace; 
	font-style: normal;
	color: $codeColor;
	font-size: 92%; 
}

sub, 
sup { 
	line-height: 0; 
}

::selection { 
	background: #ffe400;
	background: $orange; 
	color: #fff;
}

::-moz-selection { 
	background: #ffe400;
	background: $orange;
	color: #fff;
}