/*
	Custom CSS for DemCast site
*/



/*  AJAX Test Stuff  */
#control {
	margin-bottom: 1em;
}

#display-div {
	padding: 1em;
	border: 1px solid #ddd;
	margin-bottom: 1em;
}

.ajax-return-item {
	padding: 1em;
	border: 1px solid #ddd;
}

/*  Button Stuff.  Yeah, I got a little carried away on the text shadow! ;)  */
.ajax-button {
	display: inline-block;
	border: 2px solid rgba(0,0,0,0.3);
	border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px;
	font-weight: bold;
	color: rgba(0,0,0,0.5);
	margin-right: 0.3em;
	margin-bottom: 0.3em;
	margin-left: 0.3em;
	padding-top: 0.2em;
	padding-right: 0.5em;
	padding-bottom: 0.2em;
	padding-left: 0.5em;
}
.ajax-button {
	cursor: pointer;
}
.ajax-button:hover {
	background-color: rgba(0,0,255,0.15);
	box-shadow: 0px 0px 7px rgba(0, 0, 255, 0.3);
	text-shadow: 
				0px 0px 7px rgba(255, 255, 255, 1),
				0px 0px 8px rgba(255, 255, 255, 1),
				0px 0px 9px rgba(255, 255, 255, 1),
				0px 0px 9px rgba(255, 255, 255, 1),
				0px 0px 10px rgba(255, 255, 255, 1),
				0px 0px 10px rgba(255, 255, 255, 1),
				0px 0px 15px rgba(255, 255, 255, 1),
				0px 0px 15px rgba(255, 255, 255, 1);
	border: 2px solid rgba(0,0,255,0.2);
}




/*
	Focus14 States Candidates Table
*/

/*  Table  */
#demcast-candidates-table {
	border-collapse: collapse;
	width: 90%;
}

/*  Mark Rows  */
#demcast-candidates-table tr:nth-child(even) {
	background-color: #f2f2f2;
}

/*  Table Cells  */
#demcast-candidates-table tr > td {
	border: 1px solid #ccc;
	padding: 0.3rem;
	white-space: nowrap;
}

/*  Table Head Items  */
#demcast-candidates-table th {
	text-align: left;
	padding: 0px;
	background-color: rgb(248, 248, 248);
	border: 1px solid rgb(248, 248, 248);
	color: #edc426;
}

/*  Table Head Item Containers  */
#demcast-candidates-table tr > th > div {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	transform: skew(-45deg,0deg);
	transform-origin: bottom left;
	height: 5.5em;
	background-color: #1d3089;
	border-left: 2px solid #fff;
	padding-left: 0.4em;
	border-bottom-right-radius: 12px;
	border-top-left-radius: 12px;
}

/*  Remove left white border from first element  */
#demcast-candidates-table tr > th:nth-child(1) > div {
	border: none;
}

/*  Table Head Item Content  */
#demcast-candidates-table tr > th > div > div {
	transform: skew(45deg,0deg) rotate(315deg) translateX(-0.5em);
	transform-origin: top left;
}


/*  News Pages  */

.demcast-news-container {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}

.demcast-news-item {
    display: flex;/*  Make this a Flexbox so we can put the button at the bottom.  */
  	flex-direction: column;
	margin-bottom: 1em;
	border: 1px solid #ccc;
	padding: 1.5em;
	#padding-bottom: 0.5em;
	box-shadow: 5px 5px 10px 0px #1d3089;
	border-radius: 5px;
}

.demcast-news-item-figure {
	background-size: cover;
	background-position: center;
	margin: 0;
	margin-bottom: 0.3em;
}

.demcast-news-item figure {
	margin: 0;
}

.demcast-news-item figure img {
	max-width: 100%;
	height: auto;
}

.demcast-news-content {
	margin-bottom: 0.5em;/*  Space below for button  */
}

.demcast-news-title {
	font-size: 1.1em;
	line-height: 1.3;
	font-weight: 500;
	color: #1d3089;
	margin-bottom: 0.7em;
}
.demcast-news-source {
	color: #777;
	font-size: 0.7em;
	font-weight: 500;
	margin-bottom: 0.5em;
}
.demcast-news-description {
	color: #444;
	font-size: 0.875em;
	font-weight: 300;
	line-height: 1.4;
}

/*  Tweet Button for News Items  */
a.demcast-news-button {
	padding: 0.1em 0.5em 0.05em 0.5em;
  	margin-top: auto;
	#margin-bottom: 0.5em;
	text-decoration: none;
	font-size: 0.9em;
	font-weight: bold;
	text-align: center;
	border-radius: 16px;
	border: 1px solid rgba(237,196,38,1);
}
a.demcast-news-button:link, a.demcast-news-button:visited {
	color: rgba(29,48,137,1);
	background-color: rgba(237,196,38,1);
	transition: color 0.75s, text-shadow 1s, background-color 0.5s;
}
a.demcast-news-button:active, a.demcast-news-button:hover {
	color: rgba(255,255,255,0.9);
	background-color: rgba(237,196,38,0.8);
	text-shadow: 0px 0px 2px rgba(0,0,0,0.3);
}


 /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
	.demcast-news-item {
		max-width: 100%;
	}
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
	.demcast-news-item {
		max-width: 50%;
	}
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
	.demcast-news-item {
		max-width: 26%;
	}
	
}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	.demcast-news-item {
		max-width: 30%;
	}
}