a {
    text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  height: 100%; 
  max-height: 100%;
  font-family: 'Lora', serif;
}

.code{
  border: solid 1px #ccc;
  border-spacing: 0;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1px 3px;
  font-family:Courier;
}

#maincontent{
position: fixed;
top: 20px; 
left: 40px; /*Set left value to WidthOfFrameDiv*/
right: 0;
bottom: 0;
overflow: auto; 
background: #fff;
}

.innertube{
margin: 15px; /*Margins for inner DIV inside each DIV (to provide padding)*/
}

* html body{ /*IE6 hack*/
padding: 0 0 0 230px; /*Set value to (0 0 0 WidthOfFrameDiv)*/
}

* html #maincontent{ /*IE6 hack*/
height: 100%; 
width: 100%; 
}

.dohighlight {
    background-color: #FFFF88;
    width: 610px;
    -moz-border-radius: -5px;
    -webkit-border-radius: -5px;
    border-radius: -5px;
    text-indent: 5px;
    margin-left:-5px;
  }
  
#enumFrame {
    background-color: #f8f8fa;
    border: solid 1px #ccc;
    border-spacing: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    max-width:640px;
    padding: 10px 30px;
    word-spacing: 10px;
}

#colorFrame {
    background-color: #f8f8fa;
    border: solid 1px #ccc;
    border-spacing: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    max-width:640px;
    padding: 10px 30px;
}

#heading {
    background-color: #eee;
    display: inline-block;
    margin-top:5px;
    border-radius: 5px;
    padding:5px;
    font-weight: bold;
    width:640px;
}

#highlight {
    background-color: #eff;
    display: inline-block;
    border-radius: 5px;
    padding:5px;
    font-weight: bold;
    width:640px;
    text-align:center;
}

#solution-header a:link { color: #FFFFFF; }
#solution-header a:visited { color: #FFFFFF; }
#solution-header a:hover { color: #FFFFFF; }
#solution-header a:active { color: #FFFFFF; }
	
#solution-header {
    background-color: #6666ff;
    position:absolute;
    bottom:0px;
    display: inline-block;
    margin:-5px;
    width:650px;
    color:#FFFFFF;
    font-weight: bold;
    text-align:center;
    text-decoration: underline;
}
#solution {
    background-color: #ddddff;
    display: inline-block;
    padding:5px;
    width:640px;
}
#exercise-header {
    font-size: 150%;
    background-color: #4444DD;
    display: inline-block;
    margin:-5px;
    width:200px;
    color:#FFFFFF;
    font-weight: bold;
    text-align:center;text-decoration: none;
}
#exercise {
    background-color: #AAAADD;
    display: inline-block;
    padding:5px;
    width:640px;
}

#hidden-footer {
    background-color: #4444DD;
    display: inline-block;
    width:630px;
    color:#FFFFFF;
    font-style: italic;
    margin-left: -5px;
    text-indent: 0px;
    text-align:center;text-decoration: none;
    border-radius: 5px;
}
#hidden {
    background-color: #FFFFFF;
    display: inline-block;
    width:630px;
    margin: 5px;
    text-indent: 5px;
    border-radius: 5px;
    border: 1px solid #551155;
}

#hidden a:link { color: #FFFFFF; }
#hidden a:visited { color: #FFFFFF; }
#hidden a:hover { color: #FFFFFF; }
#hidden a:active { color: #FFFFFF; }

dt {
    background-color: #eee;
    display: inline-block;
    border-radius: 5px;
    padding:5px;
    font-weight: bold;
    width:640px;
}
dd {
    margin-top:20px;
    margin-bottom:20px;
}
pre {
	margin-top: 0em;
	margin-bottom: 0em;
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 1em;
	padding-right: 1em;
}

h2 {
	color:black;
	text-decoration: none;
}

div{
	margin:0;
	padding:0;	
	position:relative; padding-right:0em; border:0;
}

div .newcommandbutton {
	position:absolute; right:-14px; top:-8px; color:#FFFFFF; text-align:center;text-decoration: none;
	display: inline-block;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin-left: 5px;
    margin-right: 5px;
    padding:3px 6px;
    text-decoration: none;
    background-color: #AA22AA;
    border: 1px solid #551155;
    font-weight: bold;
}


div .editLink {
    font-size: 100%;
	position:absolute; right:8px; top:3px; color:#FFFFFF; text-align:center;text-decoration: none;
	display: inline-block;
	
    box-shadow: 2px 2px 5px #444;
    margin-left: 5px;
    margin-right: 5px;
    padding:3px 6px;
    text-decoration: none;
    background-color: #2222AA;
    border: 1px solid #111155;
    font-weight: bold;
}

div .copyLink {
    font-size: 100%;
	position:absolute; right:8px; top:3px; color:#FFFFFF; text-align:center;text-decoration: none;
	display: inline-block;
	
    box-shadow: 2px 2px 5px #444;
    margin-left: 5px;
    margin-right: 5px;
    padding:3px 6px;
    text-decoration: none;
    background-color: #AAAA00;
    border: 1px solid #555500;
    font-weight: bold;
}
table {
    background-color: #f8f8fa;
    border: solid 1px #ccc;
    border-spacing: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

table th {
    font-weight: bold;
    background-color: #fff6b0;
    padding: 0.3em;
}


td {
    padding: 0.4em;
}

th, td {
    /*border-right: solid 1px #ccc;*/
}

tr.odd {
    background-color: #e8e8e8;
}

table {
/*    box-shadow: 10px 10px 5px #888888; */
}

#enumFrame {
  font-family: monospace; 
    /*box-shadow: 0 0 5px #888888;    */
}
.newcommandcodeInsert {

    font-size: 125%;
    border: 1px solid #cccccc;
    background-color: #ffddff;
    border-radius: 5px;
    margin: 15px;
    padding:5px;
    font-family: monospace;
    min-height: 30px;
    font-weight: bold;
    /*max-width:800px;*/
    /*box-shadow:         inset 0 0 10px #000000;*/
}
.codeInsert {
    border: 1px solid #cccccc;
    background-color: white;
    border-radius: 5px;
    margin: 15px;
    padding:5px;
    font-family: monospace;
    min-height: 30px;
    /*max-width:800px;*/
    /*box-shadow:         inset 0 0 10px #000000;*/
}

.solutioncodeInsert {
    margin: 5px;
    padding:5px;
    margin-top:10px;
    margin-bottom:25px;
    font-family: monospace;
    min-height: 30px;
    width:620px;
    /*max-width:800px;*/
    /*box-shadow:         inset 0 0 10px #000000;*/
}

/* Header - need to undo some of the table properties because I couldn't
 * figure out how to lay out the title with only CSS :(
 */
table#header {
    background-color: #f4f4f4;
    border: none;
    border-bottom: solid 1px #ddd;
    margin-bottom: 0.5em;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
}

table#header td {
    border: none;
}


.funcdec {    
    font-weight: bold;
    font-size: 150%;
  font-family: monospace; 
}

.moduleButtonactive {
    display: inline-block;
    background-color: #FFFFFF;
    margin-left: -20px;
    margin-top: 5px;
    margin-bottom: 1px;
    text-indent: 10px;
    padding:0px 5px;
    text-decoration: none;
    color: black;
    width: 230px;
    font-weight: bold;
}

.moduleButton {
    display: inline-block;
    background-color: #EEEEEE;
    margin-left: -20px;
    margin-top: 5px;
    margin-bottom: 1px;
    text-indent: 10px;
    padding:0px 5px;
    text-decoration: none;
    color: black;
    width: 230px;
    font-weight: bold;
}

.submoduleButton {
    display: inline-block;
    padding:3px 5px;
    margin-left: -20px;
    margin-bottom: 0px;
    text-decoration: none;
    color: black;
    width: 230px;
    text-indent:25px;
}

.submoduleButtonactive {
    display: inline-block;
    background-color: #FFFFFF;
    padding:3px 5px;
    margin-left: -20px;
    margin-bottom: 0px;
    text-decoration: none;
    color: black;
    width: 230px;
    text-indent:25px;    
    font-weight: bold;
}

.moduleButton:hover{
    background-color: #FFF;
}
.submoduleButton:hover{
    background-color: #FFF;
}
.moduleSelected {
    display: inline-block;;
    margin-left: 5px;
    margin-right: 5px;
    padding:3px 3px;
    text-decoration: none;
    background-color: #ccc;
    border: 1px solid #000;
    border-radius: 5px;
    font-weight: bold;
    width: 170px;
}

.navBar {
}

.titleText{
    
}

.docLine {
    padding-top: 3px;
}

.moduleDescription{
    background-color: #f4f4f4;
    margin-bottom: 10px;
    padding:5px;
    display: inline-block;
    border-radius: 5px;
}


@keyframes donkRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.bottomDonk{
    animation-name: donkRotate;
    animation-duration: 2s;
    animation-timing-function:linear;
    animation-iteration-count: infinite;
    animation-delay:0;
    animation-play-state: paused;  
}
.bottomDonk:hover{
    animation-play-state: running;  
}

.tutoriallink {
  color: blue;
  text-decoration: none;;
}
.tutorialBodyOuter {
    width:100%;
}
.tutorialBody {
    width:640px;
    margin: 0 auto;
}
.tutorialCodeInsert {
    width:600px;
    
}



.Col_BLACK {
  background: #000;
  color: #fff;
}

.Col_GREY {
  background: #9D9D9D;
  color: #000;
}

.Col_GRAY {
  background: #9D9D9D;
  color: #000;
}

.Col_WHITE {
    border: 1px solid black;
  background: #fff;
  color: #000;
}

  .Col_RED {
    color: #fff;
    background: #BE2633;
  }
  .Col_PINK {
    content: " ";
    color: #fff;
    background: #E06F8B;
  }
  .Col_DARKBROWN {
    content: " ";
    color: #fff;
    background: #493C2B;
    border: 1px solid black;
  }
  .Col_BROWN {
    content: " ";
    color: #fff;
    background: #A46422;
  }
  .Col_ORANGE {
    content: " ";
    color: #fff;
    background: #EB8931;
  }
  .Col_YELLOW {
    content: " ";
    color: #000;
    background: #F7E26B;
  }
  .Col_DARKGREEN {
    content: " ";
    color: #fff;
    background: #2F484E;
    border: 1px solid black;
  }
  .Col_GREEN {
    content: " ";
    background: #44891A;
    color:white;
  }
  .Col_LIGHTGREEN {
    content: " ";
    background: #A3CE27;
  }
  .Col_NIGHTBLUE {
    content: " ";
    background: #1B2632;
    color:white;
  }
  .Col_DARKBLUE {
    content: " ";
    background: #005784;
    color:white;
  }
  .Col_BLUE {
    content: " ";
    background: #31A2F2;
  }
  .Col_LIGHTBLUE {
    content: " ";
    background: #B2DCEF;
  }
  .Col_MAGENTA {
    content: " ";
    background: #FF00FF;
    color:white;
  }
  
  .Col_TRANSPARENT {
    content: " ";
    background: transparent;
    border: 1px solid black;
  }

  .colbubble{
    border-radius: 5px;
    padding:3px;
    padding-left: 15px;
    padding-right: 15px;
    margin-left: 0;
    margin-right: 0;
    line-height: 30px;
  }

  h1 {
    white-space: normal;
  }

  .docLine {
    width:500px;
  }
  
.next {
  width:48%;
  float:right;
  text-align:center;
  display: inline-block;;
    background-color: white;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 1px;
    padding:3px 5px;
    text-decoration: none;
    border: 1px solid #444;
    border-radius: 5px;
    color: black;
    font-weight: bold;
}

.prev {
  width:22%;
  float:left;
  text-align:center;
  display: inline-block;;
    background-color: white;
    margin-left: 5px;
    margin-right: 5px;
    margin-top: 5px;
    margin-bottom: 1px;
    padding:3px 5px;
    text-decoration: none;
    border: 1px solid #444;
    border-radius: 5px;
    color: black;
    width: 120px;
    font-weight: bold;
}