/*
    Main Commit3x CSS file, (c) 6-25-15 Brandon Crosby.

    Contents.

    1. Main
    1.1 Main Page Images
    1.5 Diagonal silly divs
    1.9 Startup Splash Screen
    1.91 No Internets
    1.92 Logging Out
    2. General Forms and General Use
    11. Commit
    12. Vote
    13. Rank
    14. VIP




    Font License:
    http://www.dafont.com/universal-serif.font

*/

/*
    
    1. Main
       
    
    Main DIVing is:

    divBody
    |    mobileIntroSubDivs (e.g. VIP intro)
    |    subDivs (e.g. VIP)
    |    |    detailDivs (e.g. Buy Votes)

*/
html, body, #svg, #form1, #divBody {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    top: 0;
    left: 0;
    position: absolute;
}


body {
    zoom: 1;
    -moz-transform: scale(1);
}

#divBody {
    z-index: 2;
    margin-top: 50px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24px;
    padding: 10px 15px;
}

.subDivs {
    z-index: 2;
    overflow: scroll;
}

.mobileIntroSubDivs {
    z-index: 2;
    overflow: hidden;
}

.detailDivs {
    display:none;
}


.NahOnSel {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: default;
}

/* 
    
    1.1 Main Page Images

*/
#headingImage {
    position: absolute;
    width: 225px;
    height: 225px;
    top: 0px;
    display: none;
}

#navigationImage {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    margin-top: 3px;
    display: none;
}

/* 

    1.5 Diagonal silly divs
    
    Diagonal Padding */
.sillySillyDiv {width:40px;height:1px;display:inline-block;}
.SillyDiv {
    pointer-events: none;
    background: url('None.png'); /* Put RED etc. to make so one can troubleshoot the little dodgies 

        background-color:red;
    */
    
    margin:0px;
}

.SillyDiv2 {
    background: url('None.png');
}




/* General  */



/* Full_Screen */
.Full_Screen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow:scroll;
}

#VIPreportCONTINUE {
    margin:10px;
}


.PIN { /* in Purchases and Commit CSS files */
    font-family:"Lucida Console", Monaco, monospace;font-size:larger;color:#686868;
}



/*

    Styling commands for AJAX
    http://www.gradient-animator.com/

    */

 .smallButton,  .longButton  {
    font-size: smaller;
    font-weight: bold;
    background-color:lightgray;
    border-radius: 3px;   
    border: none;
    
    background: -webkit-linear-gradient(0deg, lightgray, 	#909090);
    background: -o-linear-gradient(0deg, lightgray, #909090);
    background: -moz-linear-gradient(0deg, lightgray, #909090);
    background: linear-gradient(0deg, lightgray, #909090);
}
.smallButton:hover, .longButton:hover, input[type=button]:hover {
    background-color:gray;
}

.longButton {width:150px;}

@-webkit-keyframes inputButtonWorkingAJAXKeyFrames {
    0%{background-position:91% 0%}
    50%{background-position:10% 100%}
    100%{background-position:91% 0%}
}
@-moz-keyframes inputButtonWorkingAJAXKeyFrames {
    0%{background-position:91% 0%}
    50%{background-position:10% 100%}
    100%{background-position:91% 0%}
}
@-o-keyframes inputButtonWorkingAJAXKeyFrames {
    0%{background-position:91% 0%}
    50%{background-position:10% 100%}
    100%{background-position:91% 0%}
}
@keyframes inputButtonWorkingAJAXKeyFrames {
    0%{background-position:91% 0%}
    50%{background-position:10% 100%}
    100%{background-position:91% 0%}
}

.inputButtonWorkingAJAX {
    background-color:lightgreen;
  
    background: -webkit-linear-gradient(233deg, #82ff94, #818183);
    background: -o-linear-gradient(233deg, #82ff94, #818183);
    background: -moz-linear-gradient(233deg, #82ff94, #818183);
    background: linear-gradient(233deg, #82ff94, #818183);
    background-size: 400% 400%;
   
    -webkit-animation: inputButtonWorkingAJAXKeyFrames 3s ease infinite;
    -moz-animation: inputButtonWorkingAJAXKeyFrames 3s ease infinite;
    -o-animation: inputButtonWorkingAJAXKeyFrames 3s ease infinite;
    animation: inputButtonWorkingAJAXKeyFrames 3s ease infinite;
} 


.inputButtonFailAJAX {
    background-color:lightpink; 
  
    background: -webkit-linear-gradient(233deg, lightpink, #FF183E);
    background: -o-linear-gradient(233deg, lightpink, #FF183E);
    background: -moz-linear-gradient(233deg, lightpink, #FF183E);
    background: linear-gradient(233deg, lightpink, #FF183E);
   
} 



/* 1.9 Startup Splash Screen */
#startup_div {
    background: #CCCC33;
    height: 100%;
}

#startup_div1 {
    font-size: xx-large;
    font-weight: 700;
    width: 100%;
    text-align: center;
    font-family:impact_ttf, Arial, sans-serif;
}

#startup_div2 {
    width: 100%;
    text-align: center;
}

#svg, #divBody {
    display: none;
}


/* 1.91 No Internets */
#BC_divInternets {
    display:none;
    width:100%;height:100%;background-color:#CCCC33;text-align:center;
}
#BC_Internets_divTitle {
    width:100%;height:80px;color:black;font-size:30px;text-align:center;background-color:yellow;
}
#BC_Internets_divText {
    width:100%;height:80px;color:black;font-size:20px;text-align:center;
}
/* 1.92 Logging Out */
#BC_divLogouts {
    display:none;
    width:100%;height:100%;background-color:#CCCC33;text-align:center;
}
#BC_Logouts_divTitle {
    width:100%;height:80px;color:black;font-size:30px;text-align:center;background-color:yellow;
}
#BC_Logouts_divBody {
    width:100%;height:80px;color:black;font-size:20px;text-align:center;
}



/* 

    2. General Forms and General Use

*/
input {
    font-size: 24px;
}

.headSpan {
    font-weight: bold;
}

.errorSpan {
    font-weight: bold;
    color: red;
}


.userEntryVerifications {
    font-weight: bold;
}

.lockedInput {
    background-color: lightgray;
    border-color: gray;
}

.validatedInput {
    background-color: lightgreen;
}

.shortInput {
    width:100px;
}
.keep_together {
    display:inline-block; /* avoid word wrapping line */
}

.cls {
    clear:both;
}
/*     
    
    11. Commit
    
     */
#COMMIT_Welcome_spnUserName,#COMMIT_MobileIntro_spnUserName {
    color:#BF127B;font-weight:bolder;
}
.COMMIT_Profile_fieldDescription {
    width: 250px;
    display: inline-block;
}
.COMMIT_Profile_fieldText {
    width: 300px;
}

.fineSpan {
    color:green;display:none;
}

/* 
    Specific Styling for individual cases COMMIT tab
*/
#COMMIT_EnterName_txtPIN,#COMMIT_Alter2_txtPIN {
    width: 40px;
}

#COMMIT_NewMember_City, #VIP_CITY, #VOTE_CITY, #RANK_City,#COMMIT_Alter2_txtCity {
    width: 200px;
}





/*   

    12. Vote
    
    */
.ballotList li {
    border: 3px solid #F1A110;
    margin: 4px;
    background: #FEECCD;
    border-radius: 8px;
}

.ballotList {
    list-style-image: url('Person.png');
    list-style-position: inside;
}

.divBallotList {
    overflow:auto;
    display:inline;
}
.divBallotList div {
    border: 3px solid #F1A110;
    margin: 4px;
    width:250px;
    background: #FEECCD;
    border-radius: 8px;
    display:inline-block;
    padding:5px;
}

.Ballot_AutoCompleteEntry {
    background-color:lightblue !important;
}

.Ballot_PreviouslyVotedForEntry {
    background-color:lightgreen !important;
}

#Vote_VerifyWho_divAlteringVote {
    background-color:#ff8282;
    margin-left:20px;
}
#Vote_VerifyWho_spnAlteringVote {
}

#Vote_Thanks_spnThanksURL{
    color:#c0c0c0;font-size:smaller;
}

/*     

    13. Rank

    */

#Loading_Wait_Image { /* http://spiffygif.com/ red 50x50 */
    position: absolute;
    top: 150px;
    left: 100px;
    clip: rect(0px 50px 50px 0px); /* CLIP needed to make future JS changes work in WebKit... */
}

#RANK_RPC_divLegend,#RANK_RPC_divLegend2{
    position:absolute;
}

#RANK_RPC_divZoomCover {
    position:absolute;opacity:.2;background-color:grey;
}

#Rank_Chart_Location_Indication {
    border-left: 3px solid red;
    height: 100px;
    color: red;
    position: absolute;
    margin-top: 10px;
    margin-left: 40px;
    padding-left: 5px;
}

#Rankings_ReportTextDiv_LEFT {
    border-left: 3px solid red;
}

#Rankings_ReportTextDiv2 {
    border-bottom: 3px solid red;
    height: 20px;
    border-right: 3px solid red;
    margin-top: -15px;
    margin-bottom: 10px;
}


#RANK_RPC_divAfterChart {
    position:absolute;
}


#chart_canvas_images {
    display: none;
}

#RANK_RPC_divChartCanvas {

    position: absolute;
    border-bottom:3px solid #808080;
}
#RANK_RPC_divChartCanvas>div {
    float:left;
}
#RANK_RPC_divChartCanvas>div:nth-child(5n+0),#RANK_VAP_divPlot div:nth-child(5n+0) {background-color:rgb(141,211,199);}
#RANK_RPC_divChartCanvas>div:nth-child(5n+1),#RANK_VAP_divPlot div:nth-child(5n+1) {background-color:rgb(255,255,179);}
#RANK_RPC_divChartCanvas>div:nth-child(5n+2),#RANK_VAP_divPlot div:nth-child(5n+2) {background-color:rgb(190,186,218);}
#RANK_RPC_divChartCanvas>div:nth-child(5n+3),#RANK_VAP_divPlot div:nth-child(5n+3) {background-color:rgb(251,128,114);}
#RANK_RPC_divChartCanvas>div:nth-child(5n+4),#RANK_VAP_divPlot div:nth-child(5n+4) {background-color:rgb(128,177,211);}
#RANK_RPC_divChartCanvas>div:hover {opacity:.7;}
#RANK_RPC_divChartCanvas>div>img:hover {opacity:.7;}
#RANK_RPC_divChartCanvas img {
    pointer-events: none;
}
#RANK_Chart_btnFindPerson {position:absolute;white-space: normal;}
#RANK_Chart_divChartCanvas div:hover {
    background-color: #83c79c !important;
    z-index: 1;
}
#RANK_Chart_divBottom,#RANK_Chart_divFoundPerson,#RANK_Chart_divHoverPerson {
    position: absolute;width:100%;
}

#RANK_Chart_divLegend {
    position: absolute;
    left: 150px;
    top: 150px;
    width: 200px;
    height: 70px;
    text-align: center;
    background-color: #83c79c;
}

#Page_Rank_VertAxis {
    float: left;
    width: 50px;
    height: 300px;
}

.Page_Rank_VertNames {
    font-size: 20px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);

    -webkit-transform-origin: left top;
    -moz-transform-origin:   left top;
    -ms-transform-origin:     left top;
    -o-transform-origin:     left top;
    transform-origin:     left top;

    vertical-align:bottom;
    text-align:center;
    font-weight:bold;

    height:20px;

    position:absolute;
}


#Page_Rank_VertAxis2 {
    transform: rotate(90deg);
}

#RANK_divChart {
    overflow:hidden;
}

#RANK_FindPerson_divSuggestion {
    margin-left:10px;
    display:block;
}
#RANK_FindPerson_divSuggestion div {
    border:1px solid #862C65;
    display:inline-block;
    margin:5px;padding:3px;
    background-color:#DDB0CC;
    border-radius: 3px;
}
#RANK_FindPerson_divSuggestion div:hover {
    text-decoration:underline;
    background-color:#A85589;
}

.spnTopVoteWinner {
    font-size:larger;font-weight:bold;color:darkgreen;
}




/* other section head */
.NarrowTextEntryField {
    width: 100px;
}

input[type="button"] {
    display: inline;
}

/*
    
     Special Charts 


*/


/* Special Chart: Votes */
/* Votes (horz. area plot) */
#RANK_VAP_divRedLine {
    display:none;position:absolute;
    height:150px;border-left:1.5px solid red;pointer-events:none;
    font-size:12px;
    color: #CC0000;padding-left:5px;
    z-index:999;font-weight:bold;
}
#RANK_VAP_divPlot {
    width:100%;height:80px;position:absolute;
}
#RANK_VAP_divPlot div {height:100%;float:left; }
#RANK_VAP_divPlot div:hover {opacity:0.7;}
#RANK_VAP_divHeadingAxis,#RANK_VAP_divQuittingAxis,.ChartAxi {
    font-size:10px;
    color: #202020;position: absolute;
}
#RANK_VAP_spnShownV2,#RANK_VAP_spnShown2{
    display:inline-block;float:right;
}

/* Rankings (Awesome, etc.) */
.Rank_Chart_Head {
    width:140px;float:left; height:50px;text-align:right;line-height:50px;padding-right:5px;
}
.Rank_Chart_Body {
    float:left;background-color:rgb(190, 131, 199);padding:10px;margin-bottom:5px;
}
.Rank_Chart_Row,#RANK_Chart_Rankings_divRankKey  {
    position:absolute;display:block;
}
#RANK_Chart_Rankings_imgRankKey {
    width:17px;height:30px;float:none!important;margin-bottom:-5px;
}
.Rank_Chart_Body img, .Rank_Chart_Body div {
    width:17px;height:30px;float:left;
}
.Rank_Chart_Pop_Text {
    color:#1949A0;font-weight:bold;
}




#RANK_RPC_divChartCanvas {
    position:absolute;
}

/* Special Chart: SVG Image Network Chart shows votes in SVG */
#RANK_Chart_Circle_svgCircle {
    position:absolute;
}

#RANK_Chart_Circle_divLegend {
    display:none;
}

#rankdiv,#RANK_divChart,#RANK_Chart_divCircle,#RANK_VAP_divRedLine{overflow: hidden;}

/* 

    14. VIP

*/

#VIP_divShowIntel div div {
    display:inline;

}


#VIP_divShowIntel div div:hover {
    background-color:#857CB0;
    text-decoration:underline;
}

@font-face {
    font-family: impact_ttf;
    src: url(impact1.ttf);
} 

#VIP_Pick_divIntelBought {
    overflow-y:auto;
}

#VIP_BuyIntel_divSuggestion {
    margin-left:10px;
    display:block;
}
#VIP_BuyIntel_divSuggestion div {
    border:1px solid #2D4671;
    display:inline-block;
    margin:5px;padding:3px;
    background-color:#A6B4CB;
    border-radius: 3px;
}
#VIP_BuyIntel_divSuggestion div:hover {
    text-decoration:underline;
    background-color:#D4DCE8;
}

#VIP_viewIntel {
    background-color: grey;
}

#VIP_ViewIntel_divMore {
    overflow: scroll;
}

#VIP_ViewIntel_tblHeadtable, #VIP_ViewIntel_tblIntel {
    border: none;
    table-layout: fixed;
    width: 100%;
}

    #VIP_ViewIntel_tblHeadtable th, #VIP_ViewIntel_tblIntel td {
        overflow: hidden;text-align:left;
        width: 30%;
    }

    #VIP_ViewIntel_tblIntel tr:nth-child(even) {
        background-color: #D4DCE8;
    }

    #VIP_ViewIntel_tblIntel tr:nth-child(odd) {
        background-color: #A6B4CB;
    }

#Page_VIP_buyIntel_reportsList li {
    /*float:left;
   // clear:left; */
    display: inline;
}
#VIP_Pick_divIntelBought li:hover{
    text-decoration:underline;
}
#VIP_pick ul {
    margin-top: 0;
}

#x_amount2 {
    width: 60px;
}


#VIP_ConfirmBuyIntel_Who{
    background-color:#A6B4CB;padding:5px;
}
#VIP_ConfirmBuyIntel_btnVOTESPLACED,#VIP_ConfirmBuyIntel_btnVOTESWON {
    
}
#VIP_ConfirmBuyIntel_VotesUsed,#VIP_ConfirmBuyIntel_VotesLeft,#VIP_ConfirmBuyIntel_VotesWon{
    width:50px;display:inline-block;text-align:center;background-color:#A6B4CB;margin:2px;
}
.VIP_VotesHeads{
    width:170px;display:inline-block;margin:2px;
}

#VIP_ViewIntel_spnHead {
    background-color:#1448A7;font-size:24px;width:100%;display:block;
}