@charset "utf-8";
/* CSS Document */

*{
	-webkit-user-select: none;  /* Chrome all / Safari all */
	-moz-user-select: none;     /* Firefox all */
	-ms-user-select: none;      /* IE 10+ */
	user-select: none;          /* Likely future */  
}

/*	.row {
		background-color:rgba(255, 255, 0, 0.5);
	}
*/	
/* Custom classes to be moved to external doc */
body {
    background-color: lightgray;
    overflow: hidden;
}
div[class*=col-] {
    border: 0px solid red;
}
.hidden-xxs {
    display: ;
}

.hc-font {
}

.dev-footer{
	display: none;
	position: fixed;
	bottom: 0px;
	left: 0px;
	background-color: rgba(183,183,183,0.50);
	border: 1px rgba(115,115,115,1.00);
	padding: 5px;
	width: 100%;
}

#feedbacktext{
	font-size: 22px;
}

/* Vertically center Bootstrap v3-v3.3.5 modals - http://codepen.io/dimbslmh/full/mKfCc */
.modal {
    text-align: center;
    padding: 0!important;
}

.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
    }

.modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
}	

/**********************************************************
 Layout elements
**********************************************************/
.container {
}

#main-container {
    display: ;
    margin-top: 27px;
}

.cd-top-row {
    background-color:  #29ABE2;
    border: solid 2px #29ABE2;
    border-left-width: 5px;
    border-right-width: 5px;
    border-radius: 10px 10px 0px 0px;
    height: 60px;
}

.cd-top-row-inner {
    border-radius: 10px 10px 0px 0px;

    background: #29abe2;
    background: -moz-linear-gradient(top,  #29abe2 0%, #ffffff 5%, #29abe2 36%, #29abe2 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#29abe2), color-stop(5%,#ffffff), color-stop(36%,#29abe2), color-stop(100%,#29abe2));
    background: -webkit-linear-gradient(top,  #29abe2 0%,#ffffff 5%,#29abe2 36%,#29abe2 100%);
    background: -o-linear-gradient(top,  #29abe2 0%,#ffffff 5%,#29abe2 36%,#29abe2 100%);
    background: -ms-linear-gradient(top,  #29abe2 0%,#ffffff 5%,#29abe2 36%,#29abe2 100%);
    background: linear-gradient(to bottom,  #29abe2 0%,#ffffff 5%,#29abe2 36%,#29abe2 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#29abe2', endColorstr='#29abe2',GradientType=0 );

    height: 50px;
}

.cd-bottom-row {
    background-color:  #29ABE2;
    border: solid 10px #29ABE2;
    border-radius: 0px 0px 10px 10px;
}

.cd-bottom-row-inner {
    background: #1b1464;
    background: -moz-linear-gradient(top,  #1b1464 0%, #ffffff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1b1464), color-stop(100%,#ffffff));
    background: -webkit-linear-gradient(top,  #1b1464 0%,#ffffff 100%);
    background: -o-linear-gradient(top,  #1b1464 0%,#ffffff 100%);
    background: -ms-linear-gradient(top,  #1b1464 0%,#ffffff 100%);
    background: linear-gradient(to bottom,  #1b1464 0%,#ffffff 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1b1464', endColorstr='#ffffff',GradientType=0 );
}

.cd-bottom-row-inner > div {
}

.cd-left-column {
    padding: 0px;
}

.cd-left-column-inner {
}

.cd-right-column {
    padding-left: 0px;
    padding-right: 1px;
}

.drag-items-container {
    background-color: orange;
    background-image: url(../images/ui-elements/parts-bg.png);
    background-repeat: repeat;
    border: 10px solid rgba(225,0,255,1.00);
    border-radius: 10px;
    position: relative;
    left: 10px;
}

.cd-bottom-row-inner,
.cd-bottom-row-inner > div,
.cd-left-column-inner,
.drag-items-container {
    height: 534px;
}

/**********************************************************
UI elements
**********************************************************/
.modal-content {
    background-color: rgba(41,171,226,0.75);

    background: rgba(255,255,255,0.75);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.75)), color-stop(100%, rgba(41,171,226,0.75)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#29abe2', GradientType=1 );		

    border: 10px solid #29ABE2;
    border-radius: 500px;

    -webkit-box-shadow: 10px 10px 44px -2px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 44px -2px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 44px -2px rgba(0,0,0,0.75);		

    padding: 0px 80px;

    color: rgba(255,255,255,1.00);
    color: #2E3192;
    font-size: 1.1em;
    font-weight: bold;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;

    display: table-cell;
    vertical-align: middle;		
}

.modal-title {
    /*font-size: 1.75em;*/
}

#modal-question .modal-content * {
    /*font-size: 1.1em;*/
}

.btn-warning {
    text-shadow: 1px 1px 2px #000000;
    font-weight: bold;
}

#piu-logo {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10000;
}

#game-intro {
    background-color: #29ABE2;
    background-color: #bad7e3;
    background: rgba(255,255,255,0.75);
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(255,255,255,0.75)), color-stop(100%, rgba(41,171,226,0.75)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.75) 0%, rgba(41,171,226,0.75) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#29abe2', GradientType=1 );		
    
    border-right: 10px solid #29ABE2;
    
    color: #030095;
    font-size: 24px;
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff;
	
    height: 534px;
    width: 960px;
    position: absolute;
    padding: 50px;
    padding-top: 100px;
    z-index: 20;
}

.video-container {
    padding: 0px;
    /*background-color: rgba(255,0,4,0.49);*/
    text-align: center;
    z-index:10;
    position: absolute;
}

#intro-video {
    border-right: 0px solid #da14f1;

    position: absolute;
    top: 105px;
    left: 123px; 
    top: 10px;
    left: 7px;
    overflow: hidden;
    height: 516px;
}

#iv {
    
}

.video-intro {
    width: 950px;
    height: 534px;
}

#start-button {
    position: absolute;
    bottom: 50px;
    left: calc(50% - 36px);
}

#play-intro-overlay {
    position: absolute;
    top: 0px;
    left: 0px;
    opacity: 1;
    text-align: center;
    padding: 0px;
    
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

#play-intro-overlay span {
    position: absolute;
    top: calc(50% - 50px);
    left: calc(50% - 50px);
    font-size: 105px;
    color: #fff;
}

#game-panel {
    display: ;
    position: relative;
    height: 534px
}

#start-over-button {
    position: absolute;
    top: -70px;
    right: 0px;
    display: none;
}

#parts-text {
    position: absolute;
    top: -35px;
    left: 60px;
    display: none;
}

#city {
    position: absolute;
    top: 41px;
    left: 166px;
}

#town {
    position: absolute;
    top: 62px;
    left: 339px;
}

#farm {
    position: absolute;
    top: 81px;
    left: 467px;
}

#power-lines {
    position: absolute;
    top: 119px;
    left: 257px;
}

#pipes,
#pipes-2 {
    position: absolute;
    top: 227px;
    left: 173px;
    z-index: 20;
}

#steam-generator-target,
#containment-building-target,
#containment-building-2-target,
#containment-building-3-target {
    z-index: 15;
}

#score-time {
    position: absolute;
    bottom: 0px;
    width: 90%;
    left: 5%;
    display: none;
}

#score-bar {
    background-color: rgba(0,0,0,0.0);
    padding-left: 1px;
    padding-right: 1px;
    height: 18px;
    position: absolute;
    bottom: 15px;
    width: 70.5%;
    left: 11.5%;
    border-radius: 0px;
    -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.75);
    -moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.75);
    box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.75);
}

#score-bar-inner {
    background-color: rgba(225,0,255,1.00);
    height: 18px;
    max-width: 100%;
    border-radius: 4px;
    background: rgb(225,0,255);
    background: -moz-linear-gradient(top,  rgba(225,0,255,1) 0%, rgba(255,255,255,1) 6%, rgba(255,255,255,1) 6%, rgba(237,122,255,1) 50%, rgba(225,0,255,1) 66%, rgba(225,0,255,1) 100%);
    background: -webkit-linear-gradient(top,  rgba(225,0,255,1) 0%,rgba(255,255,255,1) 6%,rgba(255,255,255,1) 6%,rgba(237,122,255,1) 50%,rgba(225,0,255,1) 66%,rgba(225,0,255,1) 100%);
    background: linear-gradient(to bottom,  rgba(225,0,255,1) 0%,rgba(255,255,255,1) 6%,rgba(255,255,255,1) 6%,rgba(237,122,255,1) 50%,rgba(225,0,255,1) 66%,rgba(225,0,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e100ff', endColorstr='#e100ff',GradientType=0 );
}

#time-container {
    display: table-cell;
}

.time-box {
    background-color: #fff;
    border: 5px solid green;
    border-radius: 5px;
    display: inline;
    padding: 5px;
}

#counter {
    color: #29ABE2;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 3.5px;
    position: absolute;
    top: 492px;
    left: 608px;
}

#score_txt {
    color: #fff;
}

#modal-final-score {
    font-size: 16px;
    padding-top: 15px;
}

#modal-final-score h3 {
    color: #2E3192;
    font-size: 33px;
	font-weight: bold;
}

#modal-finish-time {
    color: rgba(0,155,22,1.00);
}

#modal-finish-score {
    color: rgba(255,0,255,1.00);
}

#pit-button {
    margin-top: 16px;
}

#dev-bar {
	position: fixed;
	bottom: 50px;
	left: 0px;
	background-color: rgba(41, 171, 226,0.75);
	border: 1px  rgba(27,147,197,1.00);
	color: #fff;
	padding: 5px;
	width: 100%;
}

#dev-bar > div:first-child {
    display: inline-block;
}

#dev-bar > div:nth-child(2) {
	display: inline-block;
	background-color: rgba(41, 171, 226,1.00);
	border: 1px  rgba(25,149,201,1.00);
	padding: 5px;
}


/**********************************************************
Target elements
**********************************************************/
#containment-building-target {
    position: absolute;
    top: 129px;
    left: 122px;
}

#cooling-tower-target {
    position: absolute;
    top: 239px;
    left: 532px;
}

#condenser-target {
    position: absolute;
    top: 289px;
    left: 379px;
}

#generator-target {
    position: absolute;
    top: 249px;
    left: 391px;
}

#preasureizer-target {
    position: absolute;
    top: 222px;
    left: 200px;
}

#preasure-vessel-target {
    position: absolute;
    top: 252px;
    left: 159px;
}

#control-rods-target {
    position: absolute;
    top: 257px;
    left: 166px;
}

#fuel-assemblies-target {
    position: absolute;
    top: 283px;
    left: 164px;
}

#steam-generator-target {
    position: absolute;
    top: 245px;
    left: 229px;
}

#turbine-target {
    position: absolute;
    top: 241px;
    left: 322px;
}

#transmission-tower-target {
    position: absolute;
    top: 143px;
    left: 507px;
}

/**********************************************************
Target Pulse
**********************************************************/

@keyframes pulse {
    0% {
     transform: scale(1, 1);
    }

    50% {
     transform: scale(1.5, 1.5);
    }

    100% {
    transform: scale(1, 1);
    }
}

.hilite-target {
    animation: pulse 1s linear infinite;
}

/**********************************************************
Draggable elements
**********************************************************/

.draggable:hover {
    cursor: -webkit-grab;
    cursor: -moz-grab;
}

#drag-item-1 {
    background-color: rgba(0,0,0,1.00);
    height: 50px;
    width: 75px;
    position: absolute;
    top: 20px;
    left: 20px;
}

#drag-item-2 {
    background-color: rgba(0,0,0,1.00);
    height: 50px;
    width: 75px;
    position: absolute;
    top: 20px;
    left: 125px;
}

#drag-item-3 {
    background-color: rgba(0,0,0,1.00);
    height: 50px;
    width: 75px;
    position: absolute;
    top: 90px;
    left: 20px;
}

#drag-item-4 {
    background-color: rgba(0,0,0,1.00);
    height: 50px;
    width: 75px;
    position: absolute;
    top: 90px;
    left: 125px;
}

#drag-item-5 {
    background-color: rgba(0,0,0,1.00);
    height: 50px;
    width: 75px;
    position: absolute;
    top: 160px;
    left: 20px;
}

#drag-item-6 {
    background-color: rgba(0,0,0,1.00);
    height: 50px;
    width: 75px;
    position: absolute;
    top: 160px;
    left: 125px;
}

/**********************************************************
full screen message
**********************************************************/
#elarge-window-message {
    display: none;
    background-color: rgba(0,0,0,1.00);
    color: rgba(255,255,255,1.00);
    font-size: 28px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10000;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    text-align: center;
}

/* Xtra-Xtra-Small Only */
@media (max-width: 320px) {
    .visible-xxs {
        display: ;
    }
    .visible-xs {
        display: none !important;
    }
}
@media (min-width: 321px) {
    .visible-xxs {
        display: none;
    }
}
/* Xtra-Small Only */
@media (max-width: 767px) {
    #main-container {
        margin-top: 2px;
    }
}
/* Up to Small */
@media (min-width: 768px) {
    #main-container {
        margin-top: 27px;
    }
}
/* Up to Medium */
@media (max-width: 991px) {

    #elarge-window-message {
        display: block;
    }
    #main-container {
        display: none;
    }

}
/* Small Only */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Medium Only */
@media (min-width: 992px) and (max-width: 1199px) {

        /* make modals oval shaped */
    .modal-content {
        width: 600px;
        height: 300px;
        -moz-border-radius: 300px / 150px;
        -webkit-border-radius: 300px / 150px;
        border-radius: 300px / 150px;		
    }
        /* make modals oval shaped 
    .modal-content {
        width: 800px;
        height: 400px;
        -moz-border-radius: 400px / 200px;
        -webkit-border-radius: 400px / 200px;
        border-radius: 400px / 200px;		
    }*/

}
@media (max-width: 1199px) {
}
/* Large Only */
@media (min-width: 1200px) {
    /**********************************************************
     Layout elements
    *********************************************************
    .cd-bottom-row-inner,
    .cd-bottom-row-inner > div,
    .cd-left-column-inner,
    .drag-items-container {
        height: 700px;
    }*/

    /**********************************************************
    UI elements
    **********************************************************/

    .modal-content,
    .modal-dialog {
        width: 900px !important;
    }

    /* make modals oval shaped */
    .modal-content {
        width: 900px;
        height: 450px;
        -moz-border-radius: 450px / 225px;
        -webkit-border-radius: 450px / 225px;
        border-radius: 450px / 225px;		
    }

    #score-bar {
/*			background-color: rgba(0,0,0,0);
        height: 21px;
        position: absolute;
        bottom: 19px;
*/			width: 70.5%;
/*			left: 11.5%;
        border-radius: 0px;
        -webkit-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.75);
        box-shadow: inset 1px 1px 10px 1px rgba(0,0,0,0.75);
*/		}
/*		
    #score-bar-inner {
        height: 21px;
    }
    #counter {
        color: #29ABE2;
        font-size: 20px;
        font-weight: bold;
        letter-spacing: 3.5px;
        position: absolute;
        top: 458px;
        left: 608px;
    }
*/		
/*		
    #city {
        position: absolute;
        top: Calc(41px * 1.25);
        left: Calc(166px * 1.25);
        width: Calc(174px * 1.25);
        height: Calc(94px * 1.25);
    }

    #town {
        position: absolute;
        top: Calc(62px * 1.25);
        left: Calc(339px * 1.25);
        width: Calc(125px * 1.25);
        height: Calc(68px * 1.25);
    }

    #farm {
        position: absolute;
        top: Calc(81px * 1.25);
        left: Calc(467px * 1.25);
        width: Calc(85px * 1.25);
        height: Calc(47px * 1.25);
    }

    #power-lines {
        position: absolute;
        top: Calc(119px * 1.25);
        left: Calc(257px * 1.25);
        width: Calc(306px * 1.25);
        height: Calc(150px * 1.25);
    }

    #pipes {
        position: absolute;
        top: Calc(227px * 1.25);
        left: Calc(173px * 1.25);
        width: Calc(390px * 1.25);
        height: Calc(147px * 1.25);
    }
*/		
    /**********************************************************
    Target elements
    *********************************************************
    #containment-building-target {
        position: absolute;
        top: Calc(129px * 1.25);
        left: Calc(122px * 1.25);
        width: Calc(179px * 1.25);
        height: Calc(239px * 1.25);
    }

    #cooling-tower-target {
        position: absolute;
        top: Calc(239px * 1.25);
        left: Calc(532px * 1.25);
        width: Calc(92px * 1.25);
        height: Calc(115px * 1.25);
    }

    #condenser-target {
        position: absolute;
        top: Calc(289px * 1.25);
        left: Calc(379px * 1.25);
        width: Calc(41px * 1.25);
        height: Calc(74px * 1.25);
    }

    #generator-target {
        position: absolute;
        top: Calc(249px * 1.25);
        left: Calc(391px * 1.25);
        width: Calc(73px * 1.25);
        height: Calc(31px * 1.25);
    }

    #preasureizer-target {
        position: absolute;
        top: Calc(222px * 1.25);
        left: Calc(200px * 1.25);
        width: Calc(14px * 1.25);
        height: Calc(46px * 1.25);
    }

    #preasure-vessel-target {
        position: absolute;
        top:  Calc(252px * 1.25);
        left:  Calc(159px * 1.25);
        width: Calc(30px * 1.25);
        height: Calc(77px * 1.25);
    }

    #control-rods-target {
        position: absolute;
        top: Calc(257px * 1.25);
        left: Calc(166px * 1.25);
        width: Calc(17px * 1.25);
        height: Calc(32px * 1.25);
    }

    #fuel-assemblies-target {
        position: absolute;
        top: Calc(283px * 1.25);
        left: Calc(164px * 1.25);
        width: Calc(20px * 1.25);
        height: Calc(40px * 1.25);
    }

    #steam-generator-target {
        position: absolute;
        top: Calc(245px * 1.25);
        left: Calc(229px * 1.25);
        width: Calc(38px * 1.25);
        height: Calc(91px * 1.25);
    }

    #turbine-target {
        position: absolute;
        top: Calc(241px * 1.25);
        left: Calc(322px * 1.25);
        width: Calc(69px * 1.25);
        height: Calc(49px * 1.25);
    }

    #transmission-tower-target {
        position: absolute;
        top: Calc(143px * 1.25);
        left: Calc(507px * 1.25);
        width: Calc(57px * 1.25);
        height: Calc(87px * 1.25);
    }
    */
    /**********************************************************
    Draggable elements
    **********************************************************/







}


#flip-to-landscape-message {
    display: none;
    background-color: rgba(0,0,0,1.00);
    color: rgba(255,255,255,1.00);
    font-size: 28px;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10000;
    height: 100%;
    width: 100%;
    vertical-align: middle;
    text-align: center;
}

@media only screen 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1) {

}

/* Portrait */
@media only screen 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #flip-to-landscape-message {
        display: block;
    }
    #main-container {
        display: none;
    }
}

/* Landscape */
@media only screen 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
    #flip-to-landscape-message {
        display: none;
    }
    #main-container {
        display: ;
    }
}

@media only screen 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 2) {

}

/* Portrait */
@media only screen 
  and (max-width: 970px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 2) {
    #elarge-window-message {
        display: none;
	}
	#flip-to-landscape-message {
        display: block;
    }
    #main-container {
        display: none;
    }
}

/* Landscape */
@media only screen 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  {
    #flip-to-landscape-message {
        display: none;
    }
    #main-container {
        display: ;
    }
}