/* CSS crunched with Crunch - http://crunchapp.net/ */

html { background-color: #FFF; }

body{background: white url("/images/rainbow-ribbon-background-1393277149gAj.jpg") no-repeat center center fixed;color:#454545;margin:0;height:100%;font-size:100%;font-family:Helvetica,sans-serif; }

#instructions {font: 18px 'AmericanTypewriter', Cambria, Georgia; color: #282625; margin: 0 auto; width: 100%;line-height: 1.6;}
.paper {
    padding: 37px 55px 27px;
    position: relative;
    border: 1px solid #B5B5B5;
    background: white;
    background: -webkit-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    background: -moz-linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    background: linear-gradient(top, #DFE8EC 0%, white 8%) 0 57px;
    -webkit-background-size: 100% 30px;
    -moz-background-size: 100% 30px;
    -ms-background-size: 100% 30px;
    background-size: 100% 30px;
}
.paper::before {content:""; z-index:-1; margin:0 1px; width:706px; height:10px; position:absolute; bottom:-3px; left:0; background:white; border:1px solid #B5B5B5;}
.paper::after {content:''; position:absolute; width:0px; top:0; left:39px; bottom:0; border-left:1px solid #F8D3D3;}




#wrapper{width:1000px;min-height:100%;margin:0 auto 0 auto;padding:0;margin:-10;text-align:justify;}
.line{width:100%;height:5px;border-bottom:3px solid #000;margin-top:-15px}
img.centre{display:block;margin-left:auto;margin-right:auto}
img.thumbnail{width:140px;height:140px}
img.small{width:402px;height:327px}
img.medium{width:643px;height:523px}
iframe.centre{display:block;margin-left:auto;margin-right:auto;margin-bottom:10px}
iframe.small{width:402px;height:327px}
iframe.medium{width:643px;height:523px}
iframe.large{width:900px;height:650px}
.footer-wrapper{border-top:3px solid #000;float:left;width:100%;height:55px;background-image:url("../images/bg.jpg");background-repeat:repeat-x;text-align:center;margin-top:10px;padding-top:10px}
.centre{display:block;margin-left:auto;margin-right:auto}

.video_border{
	border: 5px solid black;
	border-radius: 15px;
}
.video_border_grey{
	border: 5px solid #D3D3D3;
	border-radius: 15px;
}
.readable_text{
    margin: 0 auto; 
    width:60%; 
    font-size:20px
}
.readable_text_16{
    margin: 0 auto; 
    width:60%; 
    font-size:16px
}
@media (max-width: 1920px) {
    .readable_text {
        width:70%;
        padding-left:20px;
        padding-right:20px;
    }
}

@media (max-width: 1440px) {
    .readable_text {
        width:80%;
        padding-left:20px;
        padding-right:20px;
    }
}
@media (max-width: 1240px) {
    .readable_text {
        width:100%;
        padding-left:20px;
        padding-right:20px;
    }
}


.half_text{
    
    font-size:1.4em;    
}

.navbar-custom {
    
    color:#0000FF;
    border-radius:0;
    background-image: none;
    background: #6db3f2; /* Old browsers */
    background: -moz-linear-gradient(top,  #6db3f2 0%, #54a3ee 37%, #3690f0 57%, #1e69de 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(37%,#54a3ee), color-stop(57%,#3690f0), color-stop(100%,#1e69de)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #6db3f2 0%,#54a3ee 37%,#3690f0 57%,#1e69de 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #6db3f2 0%,#54a3ee 37%,#3690f0 57%,#1e69de 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #6db3f2 0%,#54a3ee 37%,#3690f0 57%,#1e69de 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #6db3f2 0%,#54a3ee 37%,#3690f0 57%,#1e69de 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* IE6-9 */

    
}

.navbar-custom .navbar-nav > li > a {
    color:#000;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #000000;
    background-color:transparent;
}
.navbar-custom .navbar-brand {
    color:#FFF;
   
}

.panel-revision > .panel-heading {
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#00bfff), to(#00bFFf));
  background-image: -webkit-linear-gradient(top, #00bfff, 0%, #00bfff, 100%);
  background-image: -moz-linear-gradient(top, #000bfff 0%, #00bfff 100%);
  background-image: linear-gradient(to bottom, #000bfff 0%, #00bfff 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00bfff', endColorstr='#00bfff', GradientType=0);
}

.panel-task > .panel-heading {
  background-image: -webkit-gradient(linear, left 0%, left 100%, from(#ffa500), to(#ffcd28));
  background-image: -webkit-linear-gradient(top, #ffa500, 0%, #ffcd28, 100%);
  background-image: -moz-linear-gradient(top, #ffa500 0%, #ffcd28 100%);
  background-image: linear-gradient(to bottom, #ffa500 0%, #ffcd28 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffa500', endColorstr='#ffcd28', GradientType=0);
  color:blue;}

     .pythonHeader{
         font-family:"Courier New", Courier, monospace;
         background:#3770A1;
         margin-bottom:20px;
         color:yellow;
         padding:5px;
         border-radius: 6px;
     }
     .task{width:50%; }

.python {font-family:"Courier New", Courier, monospace;
         background:black;
         border:2px;
         color:yellow;
         padding:5px;
         border-radius: 6px;
         }
         
.codeview {font-family:"Courier New", Courier, monospace;
           background-color:black;
           border-radius: 10px;
           border: 2px solid; 
           border-color: yellow;
           padding: 20px;
           color:yellow;           
           }
           
.pythonview {font-family:"Courier New", Courier, monospace;
           background-color:white;
           border-radius: 10px;
           border: 2px solid; 
           border-color: aqua;
           padding: 20px;
           color:blue;           
           }  


.psuedocode {font-family:"Lucida Console", Monaco, monospace;
           background-color:white;
           border-radius: 10px;
           border: 2px solid; 
           border-color: red;
           padding: 20px;
           color:grey;           
           }  
.comment {font-family:"Courier New", Courier, monospace; 
	color:red;
	}
	
.tab { margin-left: 40px; }



.lightbox-open {
   overflow: hidden;
 }

 body.lightbox-open,
 .lightbox-open .navbar-fixed-top,
 .lightbox-open .navbar-fixed-bottom {
   margin-right: 15px;
 }

/* Fix for z-index for compatibility with Bootstrap 3.1+ */
/* added by @mattlibera */
 .lightbox {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
  z-index: 1040;
  z-index: 1041;
   display: none;
   overflow: auto;
   overflow-y: scroll;
 }

.lightbox .fade .lightbox-dialog {
   webkit-transform: translate(0, -25%);
      ms-transform: translate(0, -25%);
          transform: translate(0, -25%);
  ms-transform: translate(0, -25%);
  transform: translate(0, -25%);
   webkit-transition: -webkit-transform 0.3s ease-out;
     moz-transition: -moz-transform 0.3s ease-out;
       o-transition: -o-transform 0.3s ease-out;
          transition: transform 0.3s ease-out;
  moz-transition: -moz-transform 0.3s ease-out;
  o-transition: -o-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
 }

 .lightbox .in .lightbox-dialog {
   webkit-transform: translate(0, 0);
      ms-transform: translate(0, 0);
          transform: translate(0, 0);
  ms-transform: translate(0, 0);
  transform: translate(0, 0);
 }

 .lightbox .lightbox-dialog {
   z-index: 1050;
   width: auto;
   /*padding: 10px;*/

   margin-right: auto;
   margin-left: auto;
 }

 .lightbox .lightbox-dialog .lightbox-header {
   float: right;
 }

 .lightbox .lightbox-dialog .lightbox-header .close {
   margin-top: -2px;
 }

 .lightbox .lightbox-dialog .lightbox-content {
   position: relative;
   display: inline-block;
   padding: 10px;
   background-color: #ffffff;
   border: 1px solid #999999;
   border: 1px solid rgba(0, 0, 0, 0.2);
   border-radius: 6px;
   outline: none;
   webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
   background-clip: padding-box;
  /**/
  padding: 10px;
  display: inline-block;
 }

 .lightbox .lightbox-dialog .lightbox-content .lightbox-caption {
   position: absolute;
   right: 8px;}
   
   .modal {width:600px;}
    .thumbnail img {width:120px;}
    

.navbar-inverse { background-color: #000000}
.navbar-inverse .navbar-nav>.active>a:hover,.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { background-color: #999999}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { background-color: #0F16DB}
.dropdown-menu { background-color: #FFFFFF}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-color: #428BCA}
.navbar-inverse { background-image: none; }
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { background-image: none; }
.navbar-inverse { border-color: #080808}
.navbar-inverse .navbar-brand { color: #2130FF}
.navbar-inverse .navbar-brand:hover { color: #FFFFFF}
.navbar-inverse .navbar-nav>li>a { color: #999999}
.navbar-inverse .navbar-nav>li>a:hover, .navbar-inverse .navbar-nav>li>a:focus { color: #2130FF}
.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a, .navbar-inverse .navbar-nav>.open>a:hover, .navbar-inverse .navbar-nav>.open>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.active>a:hover, .navbar-inverse .navbar-nav>.active>a:focus { color: #FFFFFF}
.dropdown-menu>li>a { color: #333333}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus { color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-top-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-top-color: #FFFFFF}
.navbar-inverse .navbar-nav>.dropdown>a .caret { border-bottom-color: #999999}
.navbar-inverse .navbar-nav>.dropdown>a:hover .caret { border-bottom-color: #FFFFFF}


.video{border:9px solid black;} 

.vid_border{border: 5px solid red;}

.buncee_bac0 {background:#00BAC0; color:white;
}
.buncee_0range {background:#FDBE13; color:white;
}
.buncee_blue{background:#2D96F3; color:white;
}



.easy_task{background:#FE7296}
.medium_task{background:#FFCC3F}
.hard_task{background:#43CDD5}
.task_background{background:#EAEFF2}