/* ---- default theme designed to look good on iPad in horizontal orientation ---- */
/* Define global case */
* { font-family: Georgia, 'Times New Roman', Serif; margin: 0; padding: 0; text-align: center; }
html, body { width: 100%; height: 100%; font-size: 100%; overflow: hidden; }
body { background-color: #cbc3ac; color: black; font-size: 12px; font-weight: normal; overflow-y: auto; -webkit-overflow-scrolling: touch; }
h1, h2, h3 { margin: 0 0 5px 0; }
ul { margin: 0 0 0 15px; text-align: left; }
li { margin-bottom: 5px; padding-left: 5px; list-style-position: outside; text-align: left; }
img { border: 0; }

/* Fix iOS controls */
button, input, select, textarea { font-family: inherit; font-size: 16px; }

/* Fix box model for all browsers */
button, input, select, textarea, div { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/* Force consistent textarea behavior */
textarea { vertical-align: top; overflow: auto; }

.house { background: #004990 url('//scstatehouse.gov/video/images/housepanorama.jpg') no-repeat center center; background-size: 100% auto; }
.senate { background: #004990 url('//scstatehouse.gov/video/images/senatepanorama.jpg') no-repeat center center; background-size: 100% auto; }
.shadow { text-shadow: 3px 3px black, -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black; }
.bar {
	position: relative;
	height: 180px;
	background: -moz-linear-gradient(rgba(0,73,144,0) 0%, rgba(0,73,144,0) 91%, rgba(0,73,144,1) 95%, rgba(0,73,144,1) 100%);
	background:	-webkit-linear-gradient(rgba(0,73,144,0) 0%, rgba(0,73,144,0) 91%, rgba(0,73,144,1) 95%, rgba(0,73,144,1) 100%);
	background:	-webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,73,144,0)), color-stop(0.91, rgba(0,73,144,0)), color-stop(0.95, rgba(0,73,144,1)), to(rgba(0,73,144,1)));
	background:	-o-linear-gradient(rgba(0,73,144,0) 0%, rgba(0,73,144,0) 91%, rgba(0,73,144,1) 95%, rgba(0,73,144,1) 100%);
	background:	linear-gradient(to bottom, rgba(0,73,144,0) 0%,rgba(0,73,144,0) 91%,rgba(0,73,144,1) 95%,rgba(0,73,144,1) 100%);
}

/* content layout elements */
div#header { border-bottom: 1px solid black; }
span#chamber { position: absolute; left: 10px; right: 10px; bottom: 5px; font-size: 26pt; color: white; }
div#content { position: relative; width: 100%; margin: 5px; }
div#group1 { width: 480px; }
div#group2 { position: absolute; top: 0; left: 480px; right: 10px; bottom: 0; margin-left: 5px; }
div#menu { padding: 3px 0 3px 0; }
select#type { width: 120px; height: 20px; }

/* media player window elements */
div.relative { position: relative; }
div.widescreen { height: 0; padding: 28.125% 0 28.125% 0; }
iframe#mediaspace { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; overflow: hidden; }
div#message { position: absolute; bottom: 20px; left: 0; right: 0; color: white; font-size: 18pt; }

/* quick links window elements */
div#links { height: 180px; padding: 10px 0 10px 0; background-color: #fafbf5; border: 1px solid black; border-radius: 0 0 5px 5px; }
div#links A, div#links A:link, div#links A:visited, div#links A:active, form#billsearch label { text-decoration: none; color: #26425f; }
div#links A:hover { text-decoration: underline; color: #36362a; }
div.center { position: relative; margin: 0 auto; }
div.linkscolumn { display: inline-block; width: 220px; vertical-align: top; text-align: left; margin: 5px 0 0 5px; }
form#billsearch { text-align: left; }
form#billsearch input { height: 23px; font-family: Courier,Helvetica,sans-serif,fixed; }
form#billsearch button { line-height: 15px; vertical-align: bottom; margin-bottom: 1px; padding: 2px; background-color: inherit; border: 1px solid gray; border-radius: 5px; }

/* data window elements */
div#datacontrols a, div#datacontrols a:link, div#datacontrols a:visited, div#datacontrols a:hover { text-decoration: none; }
div.control { float: left; width: 33.3%; height: 30px; }
div#databox { position: absolute; top: 30px; left: 0; right: 0; bottom: 0; text-align: left; background-color: white; border: 1px solid black; border-radius: 5px; overflow: hidden; }
div#archives { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: left; background-color: white; border: 1px solid black; overflow-y: scroll; -webkit-overflow-scrolling: touch; font-family: Arial,sans-serif; display: none; }
div#archivecontent { height: 100% }
iframe#linktarget { width: 100%; height: 100%; border: 0; overflow-y: scroll; -webkit-overflow-scrolling: touch; }

/* ---- any screen orientation ---- */
/* viewport under 480 pixel width - case: iPhone, etc */
/* hide website theme and display player image at max size */
@media only screen and (max-width: 479px)
{
	.house { background-image: url('') }
	.senate { background-image: url('') }
	div#header, div#links, #group2 { display: none; }
	div#content, div#group1 { width: 100%; margin: 0; }
	div#menu { visibility: hidden; }
	div#message { font-size: 2.6vw; }
}

/* ---- horizontal screen orientation ---- */
/* viewport under 960 pixel width - case: iPhone, etc */
/* hide website theme and display player image at max size */
@media only screen and (min-aspect-ratio: 16/10) and (max-width: 959px)
{
	.house { background-image: url('') }
	.senate { background-image: url('') }
	div#header, div#links, #group2 { display: none; }
	div#content, div#group1 { width: 100%; margin: 0; }
	div#menu { visibility: hidden; }
	div#message { font-size: 1.6vw; }
}

/* ---- force vertical page orientation ---- */
/* viewport with less than 960 pixel width - case: iPad, desktop, etc */
/* show website theme in a single column format with player image at max viewport width */
@media only screen and (max-width: 959px)
{
	.house { background-image: url('//scstatehouse.gov/video/images/housepanorama960.jpg') }
	.senate { background-image: url('//scstatehouse.gov/video/images/senatepanorama960.jpg') }
	div#content, div#group1, div#group2 { width: 100%; margin: 0; }
	div#group2 { position: relative; left: 0; height: 780px; }
}

/* ---- force horizontal page orientation ---- */
/* viewport with at least 1440 pixel width - case: desktop, etc */
/* show website theme in a two column format with player image at 960 width, and fill the remaining width with the databox */
@media only screen and (min-width: 1440px)
{
	div#group1 { width: 960px; }
	div#group2 { left: 960px; }
}