* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    color:#000000;
    margin:0px;
    font-size:100%;
}
#ads {
    background-color: #ffffff;
    height: 104px;
    width:100%;
    margin-top:0px;
    min-width:903px;
}
.container {
    background-color:#E7E9EB;
    width:100%;
    overflow:auto;
    position:absolute;
    top:100px;
    bottom:0;
    height:auto;
    min-height:250px;
    min-width:550px;
}
.textareacontainer, .iframecontainer {
    float:left;
    height:100%;
    width:50%;
}
.textarea, .iframe {
    height:100%;
    width:100%;
    padding:10px 15px;
}
.textarea {
    padding-right:7px;
}
.iframe {
    padding-left:7px;
}
.headerText {
    width:auto;
    float:left;
    font-family:verdana;
    font-size:1em;
    line-height:2;
}
.seeResult,.stacked {
    float:right;
    font-size:15px;
    background-color:#555555;
    color:#ffffff;
    border:1px solid #555555;
    padding:0 15px;
    line-height:1.45;
    width:auto;
	cursor:pointer;  
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);  
}
.seeResult:hover,.stacked:hover {
    background-color:#ffffff;
    color:#000000;
}
.seeResult:active,.stacked:active {
    background-color:#F1F1F1;
}
.textareawrapper {
    width:100%;
    height:92%;
    background-color: #ffffff;
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
.iframewrapper {
    width:100%;
    height:92%;
    -webkit-overflow-scrolling: touch;
    background-color: #ffffff;
    box-shadow:0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}
#textareaCode {
    background-color: #ffffff;
    font-family: consolas,"courier new",monospace;
    font-size:15px;
    height:100%;
    width:100%;
    padding:8px;
    resize: none;
    border:none;
}
#iframeResult, #iframeSource {
    background-color: #ffffff;
    height:100%;
    width:100%;  
}
.footerText {
	position:absolute;
	bottom:0;
	font-family:verdana;
	font-size:0.8em;
	width:100%;
	padding-right:15px;
	text-align:right;
    height:20px;
    overflow:hidden;
}
.footerText a {
	color:#000000;
}
.footerText a:hover {
	text-decoration:none;
}
#tryitLeaderboard {
    overflow:hidden;
    text-align:center;
    margin-top:5px;
}
.stackcontainer img,.stackcontainer input {
    float:right;
}
@media screen and (max-width: 768px) {
    .container {
	    top:100px;    
    }
    .footerText {
	    display:none;
    }
}
@media screen and (max-width: 728px) {
    #tryitLeaderboard {
        margin-top:0;
    }
    .container {
	    top:60px;
    }
}
@media screen and (max-width: 467px) {
    .container {
	    top:50px;
    }
}
@media only screen and (max-device-width: 768px) {
    .stackcontainer {
        display:none;
    }
    #textareaCode {
        padding:5px;
    }
    .iframewrapper {
        overflow: auto;
    }
    .container {
	    min-width:320px;
    }
    .textarea, .iframe {
        height:97%;
    }
    @media screen and (orientation:portrait) {
        .textareacontainer, .iframecontainer {
            height:50%;
            float:none;
            width:98%;
        }
        .textarea, .iframe {
            height:97%;
            padding:15px;            
        }
    }
}
@media screen and (max-height: 800px) {
    .footerText {
	    display:none;
    }
}