@charset "UTF-8";
/*General Page Styling*/
html {
font-size:1em;
}
body {
background-attachment:fixed;
background-repeat:repeat-y;
background-color: #1D2E49;
color: #fff;
font-family: 'Raleway', sans-serif;
}
.info, .about, .cccmars, .names, .guests, .info2 {
font-family: 'Merriweather', serif;
line-height:24px;
}
#container {
width:100%;
max-width:960px;
margin:20px auto;
}
header {
float:left;
background:rgba(29, 46, 73, 0.9);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#991D2E49, endColorstr=#991D2E49)";
width:100%;
margin-top:-20px;
padding-top:10px;
padding-bottom:20px;
}
nav {
width:100%;
max-width:840px;
margin:0 auto;
}
#vid {
float:left;
width:100%;
max-width:600px;
margin-bottom:20px;
}
#siteTitle {
width:100%;
}
#content {
background:rgba(29, 46, 73, 0.9);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#991D2E49, endColorstr=#991D2E49)";
padding:20px 20px 10px 20px;
float:left;
width:100%;
max-width:920px;
margin:20px auto 0;
}
#scenes {
background:rgba(29, 46, 73, 0.9);
-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorstr=#991D2E49, endColorstr=#991D2E49)";
padding:20px 10px;
float:left;
width:100%;
max-width:945px;
margin:20px auto;
}
#sideBar {
width:290px;
margin-top:5px;
float:right;
}

/*Links and Navigation*/
#mainNav a:link, a:visited, a:active {
color: #fff;
text-decoration:none;
font-weight:400;
font-size:1.3em;
}
#mainNav a:visited {
color: #fff;
}
#mainNav a:active {
color: #fff;
}
#mainNav a:hover {
color: #00717C;
font-weight:400;
}
p a:link, a:visited, a:active {
color: #00a0af;
text-decoration:none;
font-size:1.01em;
}
p a:hover {
color: #00717C;
}

/*Text styling*/
h1 {
font-weight:500;
margin-top:10px;
float:left;
width:650px;
padding-left:20px;
font-size:3.5em;
}
h2 {
float:right;
opacity:0.7;
margin-top:12px;
padding-right:20px;
width:420px;
font-size:1em;
font-style:italic;
}
h3 {
font-size: 1.8em;
margin-bottom:10px;
}
h4 {
color: #fff;
float:left;
font-size:2.5em;
margin-bottom:20px;
}
.info {
margin-bottom:10px;
font-size:1.1em;
}
.info2 {
margin-top:10px;
font-size:1.1em;
}
.about {
width:100%;
max-width:914px;
margin-bottom:10px;
float:left;
font-size:1.2em;
}
.cccmars {
padding-left:10px;
margin:10px auto;
width:100%;
max-width:890px;
float:left;
font-size:1.2em;
}
.guests {
float:left;
font-size:1.3em;
margin-left:auto;
margin-right:auto;
margin-bottom:20px;
max-width:915px;
}
.names {
color: #999;
}

/*List styling*/
#mainNav {
padding:10px 0;
float:left;
width:100%;
max-width:840px;
list-style:none;
}
#mainNav li {
margin-left:10px;
display:inline;
}
#pastEp {
padding-right:20px;
float:left;
margin-top:40px;
margin-left:30px;
text-align:center;
width:80px;
font-size:1.2em;
}
#pics {
float:left;
margin:10px auto;
list-style:none;
max-width:960px;
width:100%;
}
#pics li {
margin:5px 5px;
display:inline-block;
}

/*Images*/
.past {
height:70px;
width:120px;
}
img {
height:300px;
width:300px;
}
.arrow {
margin-top:50px;
height:30px;
width:30px;
}

/*Video*/
iframe {
height:300px;
width:600px;
}

/*Media Styling*/
@media only screen and (max-width : 1200px) {
h2 {
float:left;
padding-left:20px;
}
}
@media only screen and (max-width : 768px) {
#container {
width:100%;
max-width:710px;
}
#content {
width:100%;
max-width:660px;
}
#sideBar {
width:100%;
margin:0 auto;
float:none;
max-width:600px;
margin-bottom:10px;
}
#scenes {
width:100%;
max-width:680px;
}
#pics {
float:left;
margin-left:30px;
max-width:630px;
}
nav {
width:100%;
max-width:760px;
}
#mainNav {
width:100%;
margin-left:10px;
max-width:720px;
}
#mainNav a:link, a:visited, a:active {
font-weight:400;
font-size:1.1em;
}
#vid {
width:100%;
margin:0 auto;
float:none;
}
.about {
width:100%;
max-width:760px;
font-size:1.1em;
}
.cccmars {
width:100%;
padding:0;
max-width:760px;
font-size:1.1em;
}
.guests {
font-size:1.1em;
max-width:760px;
}
.info {
width:100%;
font-size:1em;
}
}
@media only screen and (max-width : 667px) {
#container {
width:100%;
max-width:600px;
margin:20px auto;
}
#content, #scenes{
width:100%;
max-width:560px;
}
#pics {
margin-left:0;
max-width:560px;
}
img {
height:265px;
width:265px;
}
#sideBar {
max-width:100%;
width:490px;
}
h1 {
font-size:3em;
}
iframe {
height:280px;
width:560px;
}
nav {
width:100%;
max-width:645px;
}
#mainNav {
float:none;
width:100%;
max-width:640px;
margin-left:0;
}
#mainNav li {
margin-left:5px;
}
}
@media only screen and (max-width : 640px) {
#container {
width:100%;
max-width:600px;
margin:20px auto;
}
#content {
width:100%;
max-width:560px;
}
#sideBar {
max-width:100%;
width:490px;
}
nav {
width:100%;
max-width:600px;
}
#mainNav {
float:none;
width:100%;
max-width:500px;
}
#mainNav li {
margin-left:5px;
}
#mainNav a:link, a:visited, a:active {
font-weight:400;
font-size:1.3em;
}
#pics {
max-width:520px;
}
#scenes {
width:100%;
max-width:560px;
}
h1 {
margin:10px auto;
float:none;
width:600px;
font-size:3em;
}
h2 {
margin:0 auto;
float:none;
}
h4 {
font-size:2em;
}
#vid {
width:100%;
max-width:500px;
margin:0 auto;
float:none;
}
iframe {
width:490px;
height:275px;
}
.about {
width:100%;
max-width:600px;
font-size:1em;
}
.cccmars {
width:100%;
max-width:600px;
font-size:1em;
}
.guests {
width:100%;
font-size:1em;
max-width:600px;
}
.info {
width:100%;
margin-bottom:10px;
font-size:1em;
}
img {
height:240px;
width:240px;
}
}
@media only screen and (max-width : 568px) {
#container {
width:100%;
max-width:480px;
}
#content {
width:100%;
max-width:440px;
}
#sideBar {
width:100%;
max-width:400px;
}
h1 {
margin:10px auto;
float:none;
width:440px;
font-size:2.4em;
}
h2 {
margin:0 auto;
float:none;
}
h4 {
font-size:1.8em;
}
iframe {
width:400px;
height:225px;
}
nav {
width:100%;
max-width:500px;
}
#mainNav {
width:100%;
max-width:500px;
}
#mainNav li {
display:inline-block;
margin-bottom:5px;
margin-left:5px;
}
#mainNav a:link, a:visited, a:active {
font-weight:400;
font-size:1.2em;
}
#scenes {
width:100%;
max-width:400px;
}
#vid {
width:100%;
max-width:400px;
}
.about {
width:100%;
max-width:440px;
font-size:1em;
}
.cccmars {
width:100%;
max-width:440px;
font-size:1em;
}
.guests {
width:100%;
font-size:1em;
max-width:440px;
}
#pics {
float:none;
margin:0 auto;
max-width:380px;
}
img {
height:175px;
width:175px;
}
.info {
width:100%;
margin-bottom:10px;
font-size:1em;
}
}
@media only screen and (max-width : 414px) {
#container {
width:100%;
max-width:360px;
}
#content {
width:100%;
max-width:320px;
}
#scenes {
padding: 20px 20px 10px;
width:100%;
max-width:320px;
}
#sideBar {
width:100%;
max-width:280px;
}
nav {
width:100%;
max-width:300px;
}
#mainNav {
width:100%;
}
#mainNav li {
margin-left:5px;
}
h1 {
margin:0 auto;
float:none;
width:310px;
font-size:1.7em;
margin-bottom:5px;
padding:0;
}
h2 {
margin:0 auto;
float:none;
width:318px;
font-size:.9em;
}
iframe {
width:320px;
height:178px;
}
img {
height:300px;
width:300px;
}
}
@media only screen and (max-width : 360px) {
#container {
width:100%;
max-width:320px;
}
#content {
width:100%;
max-width:280px;
}
#sideBar {
width:100%;
max-width:280px;
}
h1 {
margin-left:10px;
float:none;
width:300px;
font-size:1.6em;
}
h2 {
margin-left:20px;
float:none;
width:300px;
font-size:.8em;
}
h3 {
font-size:1.3em;
}
h4 {
font-size:1.4em;
}
.about {
width:100%;
max-width:280px;
font-size:.9em;
}
.info {
width:100%;
font-size:.9em;
}
nav {
width:100%;
max-width:300px;
}
#mainNav {
width:100%;
}
#mainNav li {
margin-left:5px;
}
#mainNav a:link, a:visited, a:active {
font-weight:400;
font-size:1.3em;
}
iframe {
width:280px;
height:160px;
}
#pics {
margin-left:10px;
max-width:280px;
}
#vid {
width:100%;
max-width:280px;
}
#scenes {
width:100%;
max-width:300px;
}
img {
height:125px;
width:125px;
}
#pastEp {
margin-left:5px;
padding-right:5px;
font-size:1em;
}
.cccmars {
width:100%;
max-width:280px;
font-size:.9em;
}
.guests {
width:100%;
max-width:280px;
font-size:.9em;
}
}
@media only screen and (max-width : 320px) {
#container {
width:100%;
max-width:320px;
}
#content {
width:100%;
max-width:280px;
}
#sideBar {
width:100%;
float:none;
max-width:280px;
}
h1 {
margin:10px auto;
float:none;
width:280px;
font-size:1.5em;
}
h2 {
margin:0 auto;
float:none;
width:240px;
font-size:.9em;
}
h4 {
font-size:2.1em;
}
nav {
width:100%;
max-width:269px;
}
#mainNav {
width:100%;
}
#mainNav li {
display:inline-block;
}
#mainNav a:link, a:visited, a:active {
font-weight:400;
font-size:1.1em;
}
#pastEp {
margin-left:5px;
padding-right:5px;
}
iframe {
width:280px;
height:160px;
}
}
/*extras*/
/*
Tri-C teal and variants
00a0af,00E6FB,38B1BC,4BECFB,00717C
color code for background opacity
rgba(0, 160, 175, 0.9)
*/