/* ---- default theme designed to look good on iPad in horizontal orientation ---- */
/* Define global case */
* { font-family: arial, helvetica, sans-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; }

/* content layout elements */
div#banner { position: relative; height: 100px; background: url('//scstatehouse.gov/video/images/bannerarchive.jpg') no-repeat center center; background-size: 100% auto; border-bottom: 1px solid black; }
div#bannerinfo { position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: url('//scstatehouse.gov/video/images/sclegislature.png') no-repeat bottom center; }
div#meetingstatus { text-align: center; padding: 5px 0 5px 0; border-bottom: 1px solid gray; background-color: #222222; font-weight: bold; font-size: 11px; color: #eeeeee; }
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.bar { text-align: center; background-color: #8f7f68; color: black; padding-top: 0px; margin: 5px 0 5px 0; border-top: 1px solid black; border-bottom: 1px solid black; }

/* 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 { padding: 10px 0 10px 0; background-color: darkgray; border: 1px solid black; }
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; }
div#billsearch { font-size: 12px; text-align: center; margin: 0 0 0 0; padding: 2px 0 2px 0; background-color: darkgray; border: 1px solid black; border-top: 0; border-radius: 0 0 5px 5px; }
form#billsearch { text-align: center; }
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; }
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)
{
	div#banner, div#links, #group2, div#billsearch, div.bar { display: none; }
	div#content, div#group1 { width: 100%; margin: 0; }
	div#message { font-size: 2.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)
{
	div.content, div#group1, div#group2 { width: 100%; margin: 0; }
	div#group2 { position: relative; left: 0; height: 780px; }
	div#bannerinfo { background-size: 100% auto; }
}

/* ---- 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; }
}