html {
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004); }

body {
  overflow-x: hidden;
  /* For side menu */
  font-family: "Lato", arial, sans-serif;
  color: #222222;
  background-color: black;
  margin: 0; }

p {
  line-height: 1.3rem; }

strong {
  font-weight: bold; }

em {
  font-style: italic; }

h1, h2, h3, h4, h5, h6 {
  font-family: "Open Sans", sans-serif;
  font-variant: small-caps;
  line-height: .9em;
  font-weight: 800;
  margin: 0 0 1rem 0; }

h1 {
  font-size: 2.5rem;
  text-indent: 0; }

h2 {
  text-indent: 0;
  font-size: 1.8rem; }

h3, h4 {
  text-indent: 0;
  font-size: 1.1rem; }

a:link {
  color: #88AAEB; }

a:visited {
  color: #7C90B6; }

a:hover {
  color: #D90E0E; }

a:active {
  color: #FD3737; }

/* 3 COLUMN LAYOUT -----------------------------------------------------
*/
#container {
  margin: 0 auto 0 auto;
  position: relative; }

#maincontent,
#upcomingshows,
#recentblog {
  display: inline-block;
  vertical-align: top; }

@media only screen and (maC2D7FFx-width: 1000px) {
  #upcomingshows {
    display: none; } }

#recentblog {
  border-left: white thin solid;
  margin-left: 2rem;
  padding-left: 3rem !important; }
  @media only screen and (max-width: 1400px) {
    #recentblog {
      display: none; } }

#maincontent {
  padding-right: 1rem; }
  @media only screen and (max-width: 1000px) {
    #maincontent {
      padding-right: 0; } }

article {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: .8rem 1.2rem;
  background: white;
  overflow: hidden;
  border: #AEC5F2 2px solid; }
  @media only screen and (min-width: 1000px) {
    article {
      width: 60vw;
      max-width: 48rem; } }

#recentblog h3,
#upcomingshows h3 {
  font-variant: small-caps;
  text-align: center;
  font-size: 1.8em;
  color: white;
  text-shadow: -1px -1px 0 #AEC5F2, 1px -1px 0 #AEC5F2, -1px 1px 0 #AEC5F2, 1px 1px 0 #AEC5F2;
  letter-spacing: 0.02em; }

#upcomingshows,
#recentblog {
  width: 12rem;
  padding: 0 1rem;
  position: relative;
  font-size: 1.1em; }
  @media only screen and (max-width: 640px) {
    #upcomingshows,
    #recentblog {
      display: none; } }

#upcomingshows ul,
#upcomingshows ol,
#recentblog ol {
  padding: 0; }

#upcomingshows li,
#recentblog li {
  position: relative;
  list-style: none;
  margin: 0 0 1.6em 0;
  clear: both; }

#upcomingshows li strong,
#recentblog li strong {
  font-family: "Open Sans", sans-serif;
  font-size: 1.1em;
  font-style: italic;
  text-shadow: -1px -1px 0 #AEC5F2, 1px -1px 0 #AEC5F2, -1px 1px 0 #AEC5F2, 1px 1px 0 #AEC5F2;
  letter-spacing: 0.05em; }

#upcomingshows a,
#recentblog a {
  text-decoration: none; }

#upcomingshows a:link,
#upcomingshows a:visited,
#recentblog a:link,
#recentblog a:visited {
  color: #ffffff; }

#upcomingshows a:active,
#upcomingshows a:hover,
#recentblog a:active,
#recentblog a:hover {
  color: #FD3737; }

#upcomingshows a:active strong,
#upcomingshows a:hover strong,
#recentblog a:active strong,
#recentblog a:hover strong {
  color: #ffffff;
  text-shadow: -1px -1px 0 #ED3C3C, 1px -1px 0 #ED3C3C, -1px 1px 0 #ED3C3C, 1px 1px 0 #ED3C3C; }

/* HEADER --------------------------------------------------------------
*/
header {
  position: relative;
  overflow: hidden; }

#logo {
  display: inline-block;
  vertical-align: top;
  position: relative;
  /* Necessary to make child A be absolute in terms of this Div and not be absolute relative to page.*/
  height: 8rem;
  width: 8rem; }

/*	Making the <a> tag in the logo expand to fill the whole div
        makes the whole image clickable.*/
#logo a {
  position: absolute;
  height: inherit;
  width: 100%;
  top: 0;
  left: 0;
  text-decoration: none; }

#smileykun {
  display: inline-block;
  height: 8rem;
  width: 8rem;
  background: url(tcsweblogo.svg) no-repeat top left;
  background-size: contain; }

#logo-text {
  display: inline-block;
  height: 8rem;
  width: 8rem;
  color: white;
  font-family: "Luckiest Guy", sans-serif;
  font-size: 2.4rem;
  margin-top: .8rem;
  font-variant: small-caps;
  text-shadow: -1px -1px 0 #AEC5F2, 1px -1px 0 #AEC5F2, -1px 1px 0 #AEC5F2, 1px 1px 0 #AEC5F2;
  letter-spacing: 0.05em;
  line-height: 90%; }

#logo-text:hover {
  text-shadow: -1px -1px 0 #ED3C3C, 1px -1px 0 #ED3C3C, -1px 1px 0 #ED3C3C, 1px 1px 0 #ED3C3C; }

#copro-large {
  position: relative;
  margin-top: .5rem;
  display: inline-block;
  background: white;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  float: right;
  height: 6rem;
  width: 18rem;
  border: #AEC5F2 2px solid;
  font-family: "Open Sans", sans-serif;
  font-variant: small-caps;
  font-size: 1.4rem;
  color: #ED3C3C;
  text-align: center;
  font-weight: bold;
  padding-top: .5rem;
  line-height: 1.2em; }
  @media only screen and (max-width: 640px) {
    #copro-large {
      display: none; } }

#copro-large:hover {
  border-color: #ED3C3C; }

#copro-large a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

#copro-large a span {
  display: none; }

#copro-small {
  text-align: right;
  padding-right: 1.6rem;
  display: inline-block;
  background: white;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  float: right;
  height: 1.6rem;
  width: 12rem; }
  @media only screen and (min-width: 640px) {
    #copro-small {
      display: none; } }

/*	--------------------------------------------------------------------
 * LOGIN
*/
#login {
  display: inline; }

/*	end LOGIN */
/*	-----------------------------------------------------------------  */
#user-options {
  width: 240px;
  margin: 0px 0px 6px 0px;
  padding: 51px 0px 0px 0px; }

header nav {
  font-family: "Open Sans", sans-serif;
  font-variant: small-caps;
  position: relative;
  margin: 1rem .6rem 1.6rem .6rem;
  height: 1.6rem; }
  @media only screen and (max-width: 640px) {
    header nav {
      margin: 0 0 1.2rem 0; } }

header nav h3 {
  display: none; }

header nav ul {
  height: 100%;
  display: flex;
  align-items: stretch;
  /* Default */
  justify-content: space-between;
  width: 100%;
  padding: 0;
  margin: 0; }
  @media only screen and (max-width: 640px) {
    header nav ul {
      display: none; } }

header nav li {
  display: block;
  flex: 0 1 auto;
  /* Default */
  list-style-image: none;
  text-align: center;
  margin: 0;
  padding: 0;
  font-size: 1.6rem;
  line-height: 1.6rem;
  letter-spacing: 0.05em; }

nav li a:link,
nav li a:visited {
  border: 0px;
  bottom: 0px;
  color: #ffffff;
  text-decoration: none;
  text-shadow: -1px -1px 0 #AEC5F2, 1px -1px 0 #AEC5F2, -1px 1px 0 #AEC5F2, 1px 1px 0 #AEC5F2; }

nav li a:hover,
nav li a:active {
  text-shadow: -1px -1px 0 #ED3C3C, 1px -1px 0 #ED3C3C, -1px 1px 0 #ED3C3C, 1px 1px 0 #ED3C3C; }

#nav-toggler {
  display: none; }
  @media only screen and (max-width: 640px) {
    #nav-toggler {
      display: block; } }

#nav-toggler a {
  color: white;
  text-decoration: none;
  font-size: 1.6rem; }

.upcoming-show {
  border: red thin solid;
  margin: 0px 360px 16px 24px; }

.red-border {
  border: red thin solid;
  background: #f6f6f6;
  margin: 0px 360px 16px 24px; }

.upcoming-show p {
  margin: 0 12px 8px 12px;
  padding: 0; }

.upcoming-show h3 {
  font-variant: small-caps;
  margin: .3em;
  padding: 0; }

.show-list {
  border: red thin solid;
  background: #f6f6f6;
  margin: 0px 360px 24px 24px;
  padding: 8px 16px 12px 8px;
  min-height: 64px; }

.show-list img {
  border: red thin solid;
  float: left;
  margin: 0 12px 0 0;
  padding: 0; }

.show-list p {
  margin: 0;
  padding: 0; }

.show-list h2 {
  text-indent: 0;
  margin: 5px 0 8px 0;
  padding: 0; }

/*	PROFILES -------------------------------------------------------------------
*/
.profile {
  min-height: 152px;
  border-top: red thin dashed;
  margin: 12px 24px 0 24px;
  padding: 0; }

.profile img {
  border: red thin solid;
  float: left;
  margin: 1em;
  padding: 0; }

.profile p {
  margin: .5em 60px 0 0;
  padding: 0; }

.profile h2 {
  text-indent: 0; }

/*	-----------------------------------------------------------------  */
/*	IMAGE DIVS
        Wrapper around images that provides the white space for captions.
*/
.image-portrait-div {
  float: right;
  margin: 0px 10px 15px 15px;
  min-height: 370px;
  width: 240px;
  font-size: .85em; }

/*	Because Articlass does not allow for text to be "naked", without
        <p> tags, we have to reset the <p> tags automatically created in
        this <div>.*/
.image-portrait-div p, .image-landscape-div p {
  margin: 0px;
  text-indent: 0px;
  line-height: 1em; }

.image-portrait-span {
  display: block;
  margin: 5px 10px 20px 20px; }

.image-landscape-div {
  float: right;
  margin: 0px 10px 15px 15px;
  min-height: 290px;
  width: 320px;
  font-size: .85em; }

.image-landscape-span {
  display: block;
  padding: 5px 10px 20px 20px; }

/*	end IMAGE DIVS */
/*	-----------------------------------------------------------------  */
footer {
  font-weight: bold;
  color: #ffffff;
  height: 2em;
  margin: 1em 0 0 0; }

footer a:link,
footer a:visited {
  color: #ffffff; }

footer a:hover,
footer a:active {
  color: #F10000; }

.user_division {
  display: none; }

.logged_in_as {
  float: left;
  margin-right: 1em;
  padding: 0px 0px 0px 0px; }

.register-link {
  height: 100%; }

.logout-link {
  height: 100%; }

/*	end FOOTER */
/*	-----------------------------------------------------------------  */
form input {
  margin: 0;
  display: block; }

form textarea {
  width: 100%;
  min-height: 16rem;
  margin: 0;
  display: block; }

form select {
  margin: 0;
  display: block; }

/* end FORMS */
/*	-----------------------------------------------------------------  */
/*	POSITIONS
        Divs to float things left or right
*/
.right {
  float: right;
  margin: 0 2rem 2rem 2rem; }

.left {
  float: left; }

.center-contain {
  width: 100%;
  text-align: center; }

.center {
  margin: 2rem auto 2rem auto; }

/*	SHOW ANNOUNCEMENT PAGES ----------------------------------------------------
*/
.signup-container {
  width: 600px;
  margin: 0 auto; }

.show-announcement-form form,
.newsletter-signup form {
  background: transparent;
  border: none;
  width: 90%;
  margin: 0 40px 0 40px;
  padding: 0px; }

.twitter-input-border {
  margin: 24px;
  border: #9AE4E8 thin solid; }

.facebook-input-border {
  margin: 24px;
  border: #3b5998 thin solid; }

.newsletter-input-border {
  margin: 24px;
  border: grey thin dashed; }

.newsletter-input-border h6 {
  display: table;
  margin: -8px 0 0 12px;
  font-weight: bold;
  background: white;
  padding: 0 6px 0 6px; }

#twitter_text {
  height: 30px; }

#facebook_text {
  height: 60px; }

.twitter-signup {
  position: relative;
  height: 200px;
  width: 290px;
  float: left;
  margin: 0 16px 0 0;
  border: thin solid #04ACEB;
  -webkit-border-radius: 12px;
  border-radius: 12px; }

.twitter-signup h2 {
  font-size: 30px;
  font-weight: bolder;
  margin: 16px 0 16px 24px;
  color: #04ACEB; }

.twitter-signup a {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0; }

.twitter-signup a span {
  display: block;
  text-indent: 0;
  font-weight: bolder;
  margin: 56px 0 0 24px;
  color: #04ACEB; }

.twitter-signup a:link {
  color: #04ACEB; }

.twitter-signup a:visited {
  color: #04ACEB; }

.twitter-signup a:hover {
  color: #04ACEB; }

.twitter-signup a:active {
  color: #04ACEB; }

.facebook-signup {
  position: relative;
  float: left;
  height: 200px;
  width: 290px;
  margin: 0 0 24px 0;
  border: thin solid #3B5998;
  -webkit-border-radius: 12px;
  border-radius: 12px; }

.facebook-signup h2 {
  font-size: 30px;
  font-weight: bolder;
  margin: 16px 0 16px 24px;
  color: #3B5998; }

.facebook-signup a span {
  display: block;
  text-indent: 0;
  font-weight: bolder;
  margin: 56px 0 0 24px;
  color: #3B5998; }

.facebook-signup a {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0; }

.facebook-signup a:link {
  color: #3B5998; }

.facebook-signup a:visited {
  color: #3B5998; }

.facebook-signup a:hover {
  color: #3B5998; }

.facebook-signup a:active {
  color: #3B5998; }

.newsletter-signup {
  clear: both;
  width: 600px;
  background: #ffffff;
  -webkit-border-radius: 12px;
  border-radius: 12px;
  margin: 0;
  border: grey thin dashed; }

.newsletter-signup h2 {
  font-size: 30px;
  font-weight: bolder;
  margin: 16px 0 16px 24px; }

.announcement-promo {
  border: red thin solid;
  background: #f6f6f6;
  margin: 0px 360px 16px 24px; }

.announcement-promo img {
  display: inline; }

/* CALENDAR --------------------------------------------------------------------
*/
#calendar {
  border: red thin solid;
  width: 600px;
  margin: 0 auto;
  clear: none; }

/* STANDUP GUIDELINES ----------------------------------------------------------
*/
.standup-rule h2 {
  text-indent: 0; }

.standup-rule h3 {
  text-indent: 0; }

.side-toc {
  border: red dashed thin;
  -webkit-border-radius: 12px 0px 12px 12px;
  border-radius: 12px 0px 12px 12px;
  float: right;
  margin: 12px 24px 24px 24px;
  min-height: 370px;
  width: 320px; }

.side-toc p {
  font-size: .78em;
  margin: .5em 1.5em .75em 2em;
  text-indent: 0;
  line-height: 1.5em;
  padding: 0; }

/* -----------------------------------------------------------------------------
Sliding responsive design menus
Source:
http://callmenick.com/post/slide-and-push-menus-with-css3-transitions
*/
#wrapper {
  max-width: 85rem;
  position: relative;
  min-width: calc(320px - 4rem);
  padding: 1rem 2rem 0 2rem;
  z-index: 10;
  top: 0;
  left: 0;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s; }
  @media only screen and (max-width: 480px) {
    #wrapper {
      padding: 1rem 1rem 0 1rem; } }

section {
  margin-bottom: 30px; }

section h1 {
  margin-bottom: 10px; }

section p {
  margin-bottom: 30px; }

section p:last-child {
  margin-bottom: 0; }

section:last-child {
  margin-bottom: 0; }

section.toggle {
  text-align: center; }

.mask {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 15;
  width: 100%;
  height: 100%;
  background: rgba(125, 125, 125, 0.4); }

nav.menu {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  position: fixed;
  z-index: 20;
  border-right: .2em solid red;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
  background: black; }

nav.menu ul {
  font-weight: bold;
  font-variant: small-caps;
  list-style-type: none;
  padding: 0; }

nav.menu a {
  color: white;
  text-decoration: none; }

nav.menu li a:hover {
  text-decoration: underline; }

.close-menu {
  float: right;
  margin: .5em .5em 0 0;
  color: white; }

.close-menu:hover {
  color: red; }

.close-menu:focus {
  outline: none; }

nav.push-menu-left {
  top: 0;
  width: 10em;
  height: 100%; }

nav.push-menu-left ul {
  margin-top: 4em; }

nav.push-menu-left li {
  font-size: 1.2em;
  display: block;
  text-align: left;
  padding: .5em 1.8em;
  border-bottom: thin solid grey; }

nav.push-menu-left li:first-child {
  border-top: none; }

nav.push-menu-left li:last-child {
  border-bottom: none; }

nav.push-menu-left a {
  display: block; }

nav.push-menu-left {
  left: -10em; }

body.pml-open nav.push-menu-left {
  left: 0; }

body.pml-open #wrapper {
  left: 10em; }

/* End of sliding responsive design menus
----------------------------------------------------------------------------- */