/*###################################*/
    /*main menu*/
        #mainMenu
        {
            margin-top:200px;
            height:350px;
            border:1px solid #888888;
            border-radius:4px;
            box-shadow: 5px 5px 3px #888888;
            background: white;
        }
        #mainMenu2
        {
            margin-top:10px;
            text-align: center;
            font-size: 25px;
            font-weight: bold;
            color:white;

        }
        #mainMenu3
        {
            padding-top: 40px;
            border:1px solid white;
            height:250px;
            border-radius:4px;
            background-color:rgb(34, 34, 34);
        }

        a.btn.mainMenu
        {
            padding:5px 5px 5px 5px;
            margin:0px;
            text-align: center;
            font-family: sans-serif;
            
        }
        #mainMenuButtons
        {
            padding-top: 20px;
            font-weight: bold;

        }
/*###################################*/
    /*Page layout*/
        body
        {
            font-family: sans-serif;
            
        }
        #webPageTitle 
        {
            height:70px;
            background-color:#3276b1;
            margin-top: 0px;
            margin-bottom: 0px;
            border-color:  #285e8e;
            border-radius: 2px;
        }
        /*header*/
            h1
            {    
                padding-top: 20px;
                font-size: 25px;
                color: white;
                text-align: center;
            }
            h3
            {
                margin-top: 0px;
                margin-bottom: 0px;
                font-size: 14px;
                color: white;
            }
        /*foodter*/
            #footer
            {
                height:90px;
                background-color:rgb(34, 34, 34);
                margin-top: 0px;
                margin-bottom: 0px;
                border-color:  #285e8e;
                border-radius: 2px;
            }
        /*loader*/
            .loader 
            {

                /*position: fixed;
                left: 0px;
                top: 0px;
                width: 100%;
                height: 100%;
                z-index: 9999;
                background: url('../images/loader.gif') 50% 50% no-repeat rgb(249,249,249);*/
            }
        
/*###################################*/
    /*nav bar*/
        .collapse.navbar-collapse
        {
            padding-left: 0px;
        }
        .navbar-form.navbar-left
        {
            padding-left: 0px;
        }
        /*bar shadow*/
            .navbar.navbar-inverse
            {
                box-shadow: 10px 10px 5px #888888;
            }


        /*buttons*/
            button.btn a:hover
            {
                text-decoration: none;
            }
            .btn
            {
                padding:5px 5px;
            }
        section
        {
            display:inline;
        }
/*###################################*/
    /*modals*/
        /*drop down lists*/
            /*color list*/
                h3 div.sp-replacer.sp-light
                {
                    margin-left: 15px;
                }
                .sp-replacer.sp-light
                {
                    background-color: #337ab7;
                    border-color: #2e6da4;
                    
                    border-radius: 3px;
                }
                /*down arrow*/
                    .sp-dd 
                    {
                        color:white;

                    }
            /*title font size drop down*/
                .numberLists
                {
                    background-color: #337ab7;
                    color: #fff;
                    border-color: #2e6da4;
                    border-radius: 3px;
                    cursor: pointer;
                }

        /*button bold italic underline*/
            a.btn
            {
                padding:2px 4px 2px 4px;
                margin-left:2px;
                font-family:Times New Roman, Times, serif;
            }
        /*dropdown lists*/
            select.numberLists
            {
                padding:5px 0px 5px 0px;
            }

        /*fill in blank boxes*/
            /*zoom percent*/
                #zoomLevel
                {
                    padding-top:7px;
                    padding-bottom:7px;
                    padding-right:5px;
                    padding-left:5px;

                    background-color: white;
                    border:1px #ccc;
                    border-radius: 3px;

                    box-shadow: inset 0 1px 1px grey;

                    color:black;
                }
            /*add title*/
                .form-control.input-sm
                {
                    background-color: white;
                    border:2px #337ab7;
                    border-radius: 3px;
                    width: 249px;
                    box-shadow: inset 0 2px 1px grey;
                    font-size: 14px;
                    font-family: sans-serif;
                }

            /*preview*/
                #previewText
                {
                    /*background-color: white;*/
                    margin-top: 10px;
                    padding-top: 5px;
                    color:black;
                    height:80px;
                    text-align:center;
                    border:1px solid white;
                    border-radius:5px;
                    box-shadow: inset 0 2px 1px grey;
                }

                [contentEditable=true]:empty:not(:focus):before
                {
                    content:attr(data-placeholder);
                    color: grey;

                }
                [contentEditable=true]
                {
                    background-color: #E4E9EB;
                }
                [contentEditable=true]:focus
                {
                    background-color: white;
                }

        /*checkboxes*/
            input.blueCheckBox
            {
                border: 2px #3276b1;
            }
    /**/
        .modal-content
        {
            background-color: #222222;
            color:white;
        }
/*###################################*/
    /*hive plot*/
        .link 
        {
          fill: none;
          stroke-width: 1.5px;
        }

        .axis, .node 
        {
          stroke: #000;
          stroke-width: 1.5px;
        }

/*###################################*/
    /*main menu*/
        body#index_body
        {
            background-image: url('../images/background.png');
            background-size:70% 100%;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-position: right;
        }








/*###################################*/
    /*loader*/

        /*outside div*/
        .loader 
            {
                background: #101010;
                background: radial-gradient(#222, #101010);
                bottom: 0;
                left: 0;
                overflow: hidden;
                position: fixed;
                right: 0;
                top: 0;
                z-index: 99999;
            }

        /*Rainbow HiC curved text*/
            h1 span
            {
                height:200px;
                left:51%;
                margin: auto;
                position: absolute;
                top: 45%;
                margin-right: -50%;
                width:20px;
                transform: translate(-50%, -50%);
                transform-origin:bottom center;
            }
            .char1 { transform: rotate(-50deg); }
            .char2 { transform: rotate(-40deg); }
            .char3 { transform: rotate(-30deg); }
            .char4 { transform: rotate(-20deg); }
            .char5 { transform: rotate(-10deg); }
            .char6 { transform: rotate(0deg); }
            .char7 { transform: rotate(10deg); }
            .char8 { transform: rotate(20deg); }
            .char9 { transform: rotate(30deg); }
            .char10 { transform: rotate(40deg); }
            .char11 { transform: rotate(50deg); }

        /*loading text with flashing dots*/
            .loadingText
            {
                display: inline-block;
                font-size: 25px;
                color: white;

                height:200px;
                left:50%;
                margin: auto;
                position: absolute;
                top: 75%;
                margin-right: -50%;
                width:20px;
                transform: translate(-50%, -50%);
                transform-origin:bottom center;
              
            }
            @keyframes blink 
            {
                0% 
                {
                    opacity: .2;
                }
                20% 
                {
                    opacity: 1;
                }
                100% 
                {
                  opacity: .2;
                }
            }
            p.loading
            {
                display: inline-block;
            }
            .loading span 
            {
                animation-name: blink;
       
                animation-duration: 1.4s;
                animation-iteration-count: infinite;
                animation-fill-mode: both;
            }

            .loading span:nth-child(2) 
            {
                animation-delay: .2s;
            }

            .loading span:nth-child(3) 
            {

                animation-delay: .4s;
            }


        /*rotating rainbow*/
            .loader-inner 
            {
                bottom: 0;
                height: 40px;
                left: 0;
                margin: auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 100px;
            }
            .loader-line-wrap 
            {
                animation: 
                    spin 8000ms cubic-bezier(.175, .885, .32, 1.275) infinite
                ;
                box-sizing: border-box;
                height: 70px;
                left: 0;
                overflow: hidden;
                position: absolute;
                top: 0;
                transform-origin: 50% 100%;
                width: 150px;
            }
            .loader-line 
            {
                border: 4px solid transparent; /* the 'strokes' of the arc */
                border-radius: 100%; /* for making the elements 'round' */
                box-sizing: border-box;
                height: 200px;
                left: 0;
                margin: 0 auto;
                position: absolute;
                right: 0;
                top: 0;
                width: 200px;
            }
            .loader-line-wrap:nth-child(1) { animation-delay: -100ms; }
            .loader-line-wrap:nth-child(2) { animation-delay: -300ms; }
            .loader-line-wrap:nth-child(3) { animation-delay: -400ms; }
            .loader-line-wrap:nth-child(4) { animation-delay: -500ms; }
            .loader-line-wrap:nth-child(5) { animation-delay: -600ms; }
            .loader-line-wrap:nth-child(6) { animation-delay: -700ms; }
            .loader-line-wrap:nth-child(7) { animation-delay: -800ms; }

            
            /*red*/
            .loader-line-wrap:nth-child(1) .loader-line 
            {
                border-color: rgb(251, 0, 0);
                height: 118px;
                width: 118px;
                top: 7px;
            }
            /*orange*/
            .loader-line-wrap:nth-child(2) .loader-line 
            {
                border-color: rgb(255,154,0);
                height: 104px;
                width: 104px;
                top: 14px;
            }


            /*yellow*/
            .loader-line-wrap:nth-child(3) .loader-line 
            {
                border-color: rgb(253,255,0);
                height: 90px;
                width: 90px;
                top: 21px;
            }

            /*green*/
            .loader-line-wrap:nth-child(4) .loader-line 
            { 
                border-color: rgb(0,255,17);
                height: 76px;
                width: 76px;
                top: 28px;
            }

            /*blue*/
            .loader-line-wrap:nth-child(5) .loader-line 
            {
                border-color: rgb(0, 191, 251);
                height: 62px;
                width: 62px;
                top: 35px;
            }

            /*Indigo*/
            .loader-line-wrap:nth-child(6) .loader-line 
            {
                border-color: rgb(0,30,255);
                height: 48px;
                width: 48px;
                top: 42px;
            }


            /*violet*/
            .loader-line-wrap:nth-child(7) .loader-line 
            {
                border-color: rgb(137,0,255);
                height: 34px;
                width: 34px;
                top: 49px;
            }


            @keyframes spin 
            {
                0%, 15% 
                {
                    transform: rotate(0);
                }
                100% 
                {
                    transform: rotate(360deg);
                }
            }