@import url(http://fonts.googleapis.com/css?family=Roboto+Slab:400,500,700);

body{font-family: 'Roboto Slab', serif;}
h1{font-size:45px; color:#166eb5; }
h2{color:#166eb5; font-size:35; margin:20px 0px 0px 0px; }
p{color:#464646; margin:15px 0px; line-height:30px;}
p, li, a, td, th{font-size:18px; line-height:20px;}
li{color:#464646;}
h2 span{color:#FF9700;}
h3{text-align:center;}
section{padding:10px;}
.block{margin:50px 0px;}
/*Header*/
header{
	background:url(../img/header-bg.png); background-size:100% auto;
    min-height: 240px;
}
nav > ul{float:right;}
.logo{z-index:0;}
.home header{min-height:auto; background: url(../img/bg.jpg);}
.home .logo{max-width:300px;}
.home footer{margin-top:0px;}
.home .tile{background: url(../img/paper.jpg); padding:10px; box-shadow: -1px -3px 18px 4px rgba(0,0,0,0.75); margin:20px 0px; min-height: 120px;}
.home .tile:hover{  box-shadow: -1px -3px 18px 11px rgba(0,0,0,0.75);}
.home .tile h2,  .home .tile{text-align: center; }
.home .header-caption h1{font-size: 60px;}
.home .tile h2 a{font-size: 30px;text-decoration: none;}
.home .tile p{ text-align: justify;padding: 20px;}
    .tile {
        transition:All 1s ease;
    }
    .tile:hover{
        transform: rotate(4deg) scale(1) skew(1deg) translate(10px);
    }


header.no-bg{background:transparent;}
.sign-up-full-bg{background:url(../img/header-bg.png); background-size:100% auto; background-attachment:fixed;}
.referer-full-bg{background:url(../img/bg-referer.png); background-size:100% auto; background-attachment:fixed;}
.sub-page {min-height:auto; padding-bottom:30px; background:url(../img/bg-sub.png);  background-size:100% auto;}
header p{line-height:30px;}
header nav {float:right; z-index: 100; position: relative; padding-right: 50px;}
header nav ul{list-style:none;}
header nav > ul > li{float: left;}
header nav > ul > li:hover > a{border-radius: 0px;  background: #60AFFE;}
header nav > ul > li:hover ul{display: block;}

header nav > ul > li > ul {margin-left: -40px; display: none;}
header nav > ul > li > ul{border-radius: 0px 0px 8px 8px; position: absolute; top: 32px;}
header nav > ul > li > ul a{border-radius: 0px; background: #60AFFE; width: 100%;}
header nav > ul > li > ul >li:last-child > a{border-radius: 0px 0px 8px 8px;}
header nav ul li a{font-weight:20px; margin:0px 7px; font-weight:500; text-transform:capitalize; border-radius:0px 0px 8px 8px; padding:7px 12px; color:#FFF !important; background: #FF9700; min-width:90px;
width: 90px;
display: block;
float: left;
text-align: center;}
.inner-html{margin-top:100px;}
.my-btn{text-transform:capitalize; border-radius:8px; padding:7px 12px; color:#FFF !important;}
.header-caption{margin-top:60px;}
.header-caption h1{color:#166eb5;  margin-bottom:30px; text-align: left; width:60%;float: right; }
.header-caption p{color:#166eb5; margin:5px;}
.header-caption .my-btn{padding:10px 45px; margin-top:50px; position:relative; top:100px;}
.sub-page .header-caption{margin-top:0px;}
.explanaition{display: none;}

/*Inputs*/
.example-btns > a{margin:15px 5px; display: block; float: left;}
.example-btns{overflow: hidden; display: table; margin: auto;}
.inputs > div{display: none;}
.inputs > div > table, .screenshot .question > table{border-radius: 5px; overflow: hidden; background: #e6e6e6;}
.screenshot .question{margin-bottom: 30px;}
.screenshot .question > table{display: table; margin:auto;}
.inputs > div > table td, .screenshot .question table td{padding:5px; border: 1px solid #FFF; text-align: :center; }
.inputs > div > table th, .screenshot .question table th{color:#FFF; padding:5px; border: 1px solid #FFF;}
.inputs > div > table input, .screenshot .question table input{width:100%; max-width:80px; height:35px;}
.add-field{float:right; padding:3px; background: #CC181E; color:#FFF;}
.add-field:hover, .add-field:focus{color:#FFF;}
.inputs > div > table .my-btn{display: block; margin: auto; width:200px; text-align: center;}
.demo-table{display:none;}

/*screenshot*/
.screenshot{width:750px;}
.screenshot .graph-label{width:700px; display: table; margin: auto;}
.screenshot .add-field{display: none;}
.screenshot #controls{display: none;}
.screenshot-graph{width:700px; display: table; margin: auto;}
.screenshot-graph .labels{text-align:right; background: #FFF; color:#000; line-height: 12px; margin-bottom: 10px; float: left;}
.screenshot .start-simulation{display: none;}
.screenshot{display: none; margin-top: 1000px;}
.screenshot .screenshot-message p span{display: none;}
.screenshot .screenshot-message p{text-align: center;}
.screenshot .quota{text-align: center; font-size: 15px;}

/*simulation*/
.simulation{border:2px solid #166EB5; border-radius: 10px; margin-top:50px; padding:1px; }
.chart{width:100%; overflow-x: scroll;}
#name-tag{
    font-family: "Indie Flower",cursive;
    color: #F00;
    text-align: center;
    background: #EEE;
    border: 1px solid red;
    border-radius: 5px;
    font-size: 25px;
    padding: 5px;
}
.step-control{
   float:left;
   position: relative;
   top:30px;
}
.step-control > a {
    padding: 8px;
    background: #4C5445;
    border-radius: 5px;
    color: #FFF;
    margin:0px 10px;
    float: left;
}

.simulation-box{display: none;}
.curr-time{text-align: center; width:70px; height:70px; float:left; border-radius:100px; margin-left: 20px;  margin-right: 10px; padding-top: 20px; border:5px solid #166EB5; font-size: 30px; font-family: "Indie Flower",cursive;}
.simulation{min-height:300px; display: none;}
.simulation h4{text-align: center;}
.simulation-table table{background:#EEE; width:100%;}
.screenshot-simulation-table table{background:#EEE; width:700px; display: table; margin:auto;}
.simulation-table table th, .screenshot-simulation-table table th{color:#FFF; padding:5px; border:#FFF 1px solid;}
.simulation-table table td, .screenshot-simulation-table table td{ padding:10px 5px; border:#FFF 1px solid;}
.graph-label .progress-bar{color:#000; background: #FFF; text-align: right; font-size: 15px;}
.graph-label .progress-bar span{position: relative; bottom: 5px;}
.graph{margin-bottom: 0px;}
.graph-label .progress-bar{box-shadow: none;}
.slider.slider-horizontal{width:100%; display: table; margin: auto; position: relative; top: -40px;}
.slider-selection, .slider-track {background: transparent !important; box-shadow: none; border:0px solid; }
.play{display: none;}
.print-result{padding:5px 8px; display: block; width: 100%; text-align: right;  font-weight: bold; float: right; clear: both; text-decoration: underline;}

/*Footer*/
footer{width:100%; margin-top:50px; background:#EEE; padding:15px 0px 5px 0px;}
footer p{color:#000;}
footer li a{color:#FFF;}
footer nav{display:table; margin:auto;}
footer  ul{list-style:none;}
footer  ul li{display:inline;}
footer  ul li:after{content:"|"; color:#FFF; padding:0px 12px;}
footer  ul li:last-child:after{content:""; color:#FFF;}
footer p{padding:0px; margin:0px;}

/*list-blue bullets*/
.custom-list{list-style-image: url('../img/extra/bullets.png');}


footer{
    color: #FF9700;
    padding-top: 0px;
    padding-bottom: 0px;
    border-top:3px solid #166EB5;
}
footer p{padding:5px 0px;}
footer h3{
    font-size: 22px;
    text-align: center;
}
footer img{width:95%; display:table; margin:auto;}
.fl-none{

    float: none;
    font-size: 12px;
    margin: 0px;
    padding: 0px;


}

.fl-none a{

    font-size: 12px;
    margin-bottom: 0px;

}
#details-info{

    font-size: 15px;
}
.legs{

    background:#000 url("../img/banner-carousel-dots-opaque.png") repeat scroll 0 0;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 0px;
    z-index: 20;
}
.ft-name{color: #166EB5; font-weight: bold;}


/*Rag*/
.rag-process-input{
    width: 100px;
    display: inline;
}
.process-list{
    margin-top:0px;
    padding-top: 0px;
}
.process-list span{
    padding:3px;
    background: #60AFFE ;
    color: #FFF;
    margin-bottom: 2px;
    font-size: 13px;
    display: inline-block;
    margin-right:5px;
}
.rag-resource-input{
    width: 100px;
    display: inline;
}
.input-table select{
    width:100%;
}
.resource-list{
    margin-top:0px;
    padding-top: 0px;
}
.resource-list span{
    padding:3px;
    background: #60AFFE ;
    color: #FFF;
    margin-bottom: 2px;
    font-size: 13px;
    display: inline-block;
    margin-right:5px;
}
.resource-list span input{color: #000;}
.resource-instance{width:30px;}
span.small{font-size:10px; color:red;}
.rag-inputs .custom-input{height: 500px; overflow-y: scroll;}
.rag-inputs .custom-input p{margin:0px;}
.rag-inputs .custom-input hr{margin: 5px 0px;}
#diagramContainer > div{height: 80px;
width: 80px;
border: 1px solid #00F;
float: left;
margin-left:100px;}