html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}}

#SudoClue_Menu {
  font-family: Yantramanav, serif;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 300px;
  margin: auto;
}

#SudoClue_Menu div {
    text-align: center;
}

#SudoClue_Menu label > input{ /* HIDE RADIO/CHECK */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

#SudoClue_Menu label > input + p {
  text-align: center;
  border: 2px solid black;
  padding: 5px;
  color: black;
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 10px;
}

#SudoClue_Menu label > input + p:hover {
  cursor:pointer;
  background: grey;
}
#SudoClue_Menu label > input + img{
  cursor:pointer;
  border:2px solid transparent;
}

#SudoClue_Menu label > input:checked + img {
    border:2px solid black;
}

#SudoClue_Menu label > input:disabled + p { /* (RADIO CHECKED) IMAGE STYLES */
  background: grey;
  cursor: not-allowed;
}

#Puzzle_Type_Buttons {
    margin-top: 10px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#Controls {
    display: flex;
    font-family: Yantramanav, serif;
    flex-direction: row;
    justify-content: center;
    width: 300px;
    height: 150px;
    margin: auto;
}

.icon {
    height: 50px;
}

.small_icon {
    padding-top: 5px;
    height: 40px;
}

#Client_Login_div,
#Register_Account_div,
#Class_div,
#Purchase,
#Info,
#Welcome_Screen,
#Warning_Screen,
#Winning_Screen,
#Menu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    font-family: Yantramanav, serif;
    width: 300px;
    margin: auto;
}



#Client_Login_div,
#Register_Account_div,
#Player_Data,
#Class_div {
  font-size: 20px;
  text-align: center;
}

#Puzzle_Stats_Div,
#Single_Clue_div,
#Clues {
  font-family: Yantramanav, serif;
}

#StopWatch,
#Single_Clue_div {
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 300px;
  margin: auto;
}
#Single_Clue_div div {
  width: 240px;
  text-align: center;
  margin: auto;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
#Single_Clue_div img {
  width: 32px;
  height: 85.3px;
}

#Purchase,
#Info,
#Welcome_Screen,
#Menu div {
    text-align: center;
}

#Controls section {
    width: 50%;
    height: 100%;
    margin: auto;
}

#Loading_Gif_Screen,
#Checking_Answers_Screen div,
#Buttons div,
#Numbers div,
#Grid div {
    display: flex;
    justify-content: center;
}

#Checking_Answers_Screen {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

#Puzzle_Stats_Div div {
  text-align: center;
}

#Puzzle_Stats_Div,
#Clues {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin: auto;
}

#Clues_heading {
    display: flex;
    flex-direction: row;
    padding-left: 10px;
    padding-right: 10px;
}

#Best_Times_Div {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

#Best_Times_Div,
#Clues label {
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

#Class_div h1,
#Purchase h1,
#Info h1,
#Warning_Screen h1,
#Winning_Screen h1 {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 40px;
    font-weight: 700;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

#Clues label {
    text-align: center;
}

#Grid {
    height: 300px;
    width: 300px;
    padding: 0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
    margin-bottom: 10px;
    font-family: Yantramanav, serif;
}

#Numbers label,
#Grid label {
    width:33.33%;
}
#Buttons label {
    width: 50%;
}

#ButtonRow2,
#ButtonRow1 {
    height: 50%;
    width: 100%;
}

#NumRow1, #NumRow2, #NumRow3, #NumRow4,
#Row1, #Row2, #Row3, #Row4 {
    height: 33.33%;
    width: 100%;
}

#Numbers p {
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    cursor:pointer;
}

#StopWatch p,
#Grid p {
    height: 100%;
    width: 100%;
    text-align: center;
    font-weight: bold;
    cursor:pointer;
}


#Buttons img {
    height: 100%;
    cursor: pointer;
    width: 100%;
}

#Client_Login_div label > input,
#Register_Account_div label > input,
#Class_div label > input,
#Single_Clue_div label > input,
#Purchase label > input,
#Info label > input,
#Welcome_Screen label > input,
#Warning_Screen label > input,
#Winning_Screen label > input,
#Banner label > input,
#Menu label > input,
#Grid label > input,
#Buttons label > input,
#Numbers label > input,
#Clues label > input{ /* HIDE RADIO/CHECK */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

#Buttons label > input + img,
#Numbers label > input + p,
#Grid label > input + p{
    box-shadow: inset 0 0 2px black;
}

#Puzzle_Stats_Button_Label img {
  width: 54px;
  height: 54px;
  border-top: 4px solid black;
  border-right: 4px solid black;
}

.add-button {
  cursor:pointer;
  border:2px solid black;
  margin: 10px;
  font-size: 30px;
  background: white;
}


#Client_Login_div label > input + p,
#Register_Account_div label > input + p,
#Class_div label > input + p,
#Purchase label > input + p,
#Info label > input + p,
#Welcome_Screen label > input + p,
#Menu label > input + p {
    cursor:pointer;
    border:2px solid black;
    margin: 10px;
    font-size: 30px;
}

#Winning_Screen .right {
  text-align: right;
}

#Winning_Screen p {
    text-align: center;
}

.correct {
    background: lightgreen;
}

.incorrect {
    background: red;
}

#Code_Entry_div {
  font-size: 20px;
}

#Code_Entry_div label > input + p {
  cursor: pointer;
  border:2px solid black;
  width: 200px;
  justify-content:center;
  margin: auto;
  margin-top: 10px;
}

#Banner label > input + img {
  cursor:pointer;
}

#Single_Clue_div label > input + img,
#Banner label > input + p,
#Warning_Screen label > input + img,
#Winning_Screen label > input + img,
#Banner label > input + h1,
#Menu label > input + img,
#Clues label > input + p,
#Clues label > input + img{
  cursor:pointer;
  border:2px solid transparent;
}

#Puzzle_Type_Buttons {
    margin-top: 10px;
}

#Puzzle_Type_Buttons label {
    margin-left: 20px;
    margin-right: 20px;
}

#Numbers label > input:checked + p{ /* (RADIO CHECKED) IMAGE STYLES */
  background: yellow;
}
#Clues label > input:checked + p{ /* (RADIO CHECKED) IMAGE STYLES */
  text-decoration: line-through;
}
#Grid label > input:checked + p {
    background: yellow;
}
#Difficulty_Buttons label > input:checked + p,
#Buttons label > input:checked + img {
    background: yellow;
}

#Menu label > input:checked + img {
    border:2px solid black;
}

#Menu label > input:disabled + p,
#Numbers label > input:disabled + p{ /* (RADIO CHECKED) IMAGE STYLES */
  background: grey;
  cursor: not-allowed;
}


#Grid .four.draft,
#Grid .three.draft{
    font-size: 10px;
}

#Grid .three{
    font-size: 85px;
}

#Grid .four{
    font-size: 60px;
}

#Numbers .three {
    font-size: 40px;
}

#Numbers .four {
    font-size: 30px;
}

.hide {
    position: absolute;
    top: -9999px;
    right: -9999px;
    display: none !important;
}

#Banner_Text {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

@media (max-width: 1000px) {
    .hide_on_mobile {
        position: absolute;
        top: -9999px;
        right: -9999px;
        display:none;
    }
    #Banner.header h1 {
        font-family: oswald,serif;
        font-weight: 500;
        font-size: 40px;
        color: white;
        text-align: center;
    }

}

.loading_gif {
  width: 200px;
  height: 200px;
  align-self: center;
}

#Puzzle_Stats_Div h1,
#Clues h1 {
    padding-top: 5px;
    padding-bottom: 10px;
    font-size: 35px;
    font-weight: 700;
    text-align: center;
    padding-left: 5px;
    padding-right: 5px;
}

@media (max-width: 450px) {
    #Banner.header h1 {
        font-family: oswald,serif;
        font-weight: 500;
        font-size: 40px;
        color: white;
        text-align: center;
        margin-right: 10px;
    }

    #Banner_Text {
      display: flex;
      flex-direction: row;
      justify-content: flex-end;
      margin-right: 10px;
    }
    .hide_on_smallest {
        position: absolute;
        top: -9999px;
        right: -9999px;
        display:none;
    }
}

.gap {
  padding-bottom: 12px;
}

#Clues_heading label {
  margin-left: auto;
}

#StopWatch p {
  font-size: 20px;
}

@media (min-width: 1000px) {
    p {
      font-size: 20px;
    }

    #Puzzle_Stats_Div h1,
    #Clues h1 {
        padding-top: 5px;
        padding-bottom: 10px;
        font-size: 35px;
        font-weight: 700;
        text-align: center;
        padding-left: 10px;
        padding-right: 5px;
    }

    #Banner.header h1 {
        font-family: oswald,serif;
        font-weight: 500;
        font-size: 40px;
        color: white;
        text-align: center;
    }
    #Puzzle_Stats_Div p,
    #Clues p {
      font-size: 20px;
      font-weight: 300;
      text-align: center;
    }
    .top {
        top: 85px;
    }
    #Game_Board {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }

    #Main,
    #Clues,
    #Puzzle_Stats_Div {
      display: flex;
      flex-direction: column;
      padding: 10px;
      flex-grow: 1;
      flex-basis: 0
    }

    #Clues, #Puzzle_Stats_Div {
      flex-grow: 2;
    }

    .hide_on_pc {
        position: absolute;
        top: -9999px;
        right: -9999px;
        display: none !important;
    }
}

#Start_Game_div {
    margin-top: 20px;
}

.right {
    float: right;
}


#Add_to_homescreen_div {
  margin-top: 10px;
  padding: 5px;
  width: 286px;
  border:2px solid black;
}

#Add_to_homescreen_div h1 {
  font-size: 20px;
  font-weight: 700;
}

#Add_to_homescreen_div p {
  font-size: 18px;
  padding-top: 5px;
}

#Share_icon {
  height: 20px;
}

#Puzzle_Stats_Div th,
#Player_Stats_Div th {
  text-align: center;
  font-weight: 700;
  border: solid 2px black;
  padding: 2px;
}

#Puzzle_Stats_Div td:nth-child(3),
#Puzzle_Stats_Div td:nth-child(1) {
  width: 10px;
}

#Puzzle_Stats_Div table,
#Player_Stats_Div table {
  width: 100%;
  min-width: 300px;
  max-width: 400px;
  border: solid 2px black;
}

#Puzzle_Stats_Div table {
  margin-bottom: 10px;
}

#Puzzle_Stats_Div td,
#Player_Stats_Div td {
  border: solid 2px black;
  padding: 2px;
}

#Player_Stats_Div h1 {
  font-size: 20px;
  font-weight: 700;
  margin: 5px;
}

#Email_Reset_Instructions_Button {
  background: none!important;
  border: none;
  padding: 0!important;
  /*optional*/
  font-family: arial, sans-serif;
  /*input has OS specific font-family*/
  color: #069;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
  margin-top: 5px;
}

#Lives_Section {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
  font-size: 24px;
}