@charset "utf-8";

.cs-interactive, .cs-interactive-slim 
{
  margin-left:0%;
  margin-right:0%; 
  padding:10px;
  background-color:#f5f5f5;;
}

.cs-interactive, .cs-interactive-slim 
{
  border: .05em solid black;
  border-radius: .3em;
  padding:10px;
  margin-bottom:0.5em;
}

.cs-interactive .nav .nav-solution 
{
	display:none;
}

.cs-interactive .tab-hint, .cs-interactive-slim .tab-hint
{
	display:none;
}

.cs-interactive button, .cs-interactive-slim button
{
	margin-top: 10px;
	margin-bottom: 10px;
}

.cs-interactive ul, .cs-interactive-slim ul
{
  padding:0px !important;
}

.cs-interactive textarea, .cs-interactive-slim textarea
{
	color: black;
	font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
	white-space: pre;
	word-spacing: normal;
	word-break: normal;
	word-wrap: normal;
	line-height: 1.5;

	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;

	-webkit-hyphens: none;
	-moz-hyphens: none;
	-ms-hyphens: none;
	hyphens: none;

  
}

.cs-interactive div.tab-pane, .cs-interactive-slim div.tab-pane
{
	border-left: 10px solid #F0AD4E;
	box-shadow: -1px 0px 0px 0px #F0AD4E, 0px 0px 0px 1px #dfdfdf;
}

.cs-interactive .tab-content textarea, .cs-interactive-slim .tab-content textarea
{
  box-shadow: 0 9px 6px -6px grey;
  border-radius: .3em;
  border: .05em solid lightgray;
}

.cs-interactive .consoleText, .cs-interactive-slim .consoleText
{
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  padding: 1em;
  border: .05em solid black;
  background-color: #333;
  color: #FFFFFF;
  border-radius: .3em;
}

.cs-interactive-web
{
  display: flex; 
  flex-wrap: wrap;
}

.cs-interactive-web-source
{
  background-color:#FFF;
  color:#000;
  height:auto;
  border:1px solid black;
}

.cs-interactive-web-results
{
  background-color:#FFF;
  color:#000;
  height:auto;
  border:1px solid black;
}

.cs-interactive-web-results iframe
{
  width:100%;
  height:100%;
}

/* Mobile Styles */
@media only screen and (max-width: 400px) 
{
  .cs-interactive-web-source
  {
    width:100%;
    margin-bottom: 15px;
  }
  
  .cs-interactive-web-results
  {
    width:100%;
    margin-bottom: 15px;
    min-height: 150px;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 401px) and (max-width: 960px) 
{
  .cs-interactive-web-source
  {
    width:100%;
    margin-bottom: 15px;
  }
  
  .cs-interactive-web-results
  {
    width:100%;
    margin-bottom: 15px;
    min-height: 150px;
  }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) 
{
  .cs-interactive-web-source
  {
    width:49%;
    float:left;
    margin-right: 2%;
  }
  
  .cs-interactive-web-results
  {
    width:49%;
    float:left;
  }
}


.web-tab-group 
{
	width: 59%;
	float: left;
	margin-right: 2%;
}

.cs-interactive-starting-code
{
  border:1px solid black;
}

.cs-interactive-desired-results
{
  border:1px solid black;
}

input.cs_filename
{
  margin:10px;
  text-align:right;
}