/*
html {
    height: 100%;
}
*/

/*
body {
    height: 100%;
    font: 16px/28px "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #222222;
    -webkit-font-smoothing: antialiased;
    -webkit-backface-visibility: hidden;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}
*/

body {
/*    font-size: 13px;*/
/*    line-height: 20px;*/
	font-family: Roboto, Arial, Tahoma, sans-serif;
    font-weight: 400;
	color: #444444;
    background-color: #fcfcfc;
/*    background-color: black;*/
    
    margin: 0;
    padding: 0;
    
    /* Prevent horizontal scrolling on iphone */
    overflow-x: hidden;
}

/*
h1 {
	line-height: 36px;
	font-family: "Roboto Condensed", Roboto, Arial, Tahoma, sans-serif;
    font-weight: 700;
}

h2 {
	margin-top: 30px;
    line-height: 30px;
	font-family: "Roboto Condensed", Roboto, Arial, Tahoma, sans-serif;
    font-weight: 700;
}

h3 {
	font-family: "Roboto Condensed", Roboto, Arial, Tahoma, sans-serif;
    font-weight: 700;
}

ol li {
	padding-left: 5px;
}
*/

a {
    /*color: #10bbf1; */
    /*cursor: pointer; */
    background: transparent;
    text-decoration: none;
}

/* unvisited link */
a:link {
    color: #FF9800;
}

/* visisted link */
a:visited {
    color: #FF9800;
}

/* mouse over */
a:hover {
    color: #FFCC80;
}

/* being clicked on */
a:active {
    color: #40c9f4;
}

/* header --------------------------  */

* {
	border: solid black 0px;
}

header {
    padding: 20px 0;
    /*background: url(../images/header.jpg) no-repeat 50% 50%;*/
    /*font: 24px/36px "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
	/*font: 26px/36px Roboto;*/
	font-weight: 300;
    color: black;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
	
	max-width: 340px;
    margin: auto;
}

header a:link,
header a:visited,
header a:hover,
header a:active {
    color: black;
}

/*.wrap {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1140px;
}*/

#header {
    padding: 30px 10px;
    background-color: #262626;
}

#header-icon {
	/*margin: auto;*/
	position: relative;
	overflow: auto;
	margin-bottom: 8px;
	overflow-x: hidden;
    overflow-y: hidden;
}

#header-icon .icon-img {
    float: left;
	height: 65px;
	width: 65px;
}

#header-icon h1 {
	font: 60px "Cookie", "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*font-size: 100px;*/
    line-height: 45px;
    /*font-weight: 500;*/
    margin-bottom: 0px;
	
	position: absolute;
	bottom: 3px;
	left: 75px;
	/*margin-left: 0px;*/
	
    color: #f2f2f2;
    
	/*overflow-y: hidden;*/

}

#header-title {
    	/*font-size: 40px;
    font-weight: normal;*/
	
	/*font: 24px "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;*/
    font-size: 24px;
    /*line-height: 20px; */
    font-weight: 600;
    color: #f2f2f2;
}

#word-box {
    /*width: 100%;*/
/*    background-image: linear-gradient(to top, #ffff00, #ffffbb);*/
/*    background-color: #ffff00;*/
    /* with background you can combine color, image and other tags */
    background: #ffff64; /* Old browsers */
    background: -moz-linear-gradient(to top, #ffff00, #ffffbb); /* FF3.6-15 */
    background: -webkit-linear-gradient(to top, #ffff00, #ffffbb); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to top, #ffff00, #ffffbb); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    
    /*padding: 120px;*/
    height: 300px;
    /*border: 1px solid gray;*/
    /*margin: 0;*/
    
    font-size: 50px;
    font-weight: 600;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

#button-panel {
    /*display: flex;*/
    height: 200px;
    background-color: #444444;
}

#config-panel {
/*    font-size: 20px;*/
    float: left;
    width: 50%;
    height: 100%;
    color: #f2f2f2;
/*    background-color: dimgray;*/
    
    display:flex;
    align-items: center;
    justify-content:center;
    
/*    position: relative;*/
    
/*
    display: flex;
    align-items: center;
*/
    
/*    display: table-cell;*/
/*    vertical-align: middle*/
    
/*
    border: solid black 2px;
    border-radius: 10px;
*/
}


#next-panel {
    float: left;  
    width: 50%;
    height: 100%;
/*    background-color: #333333;*/
    
    display:flex;
    align-items: center;
    justify-content:center;
    
/*
    border: solid black 2px;
    border-radius: 10px;
*/
}

#next-button {
  background-color: #ffff00;
  border: none;
  color: black;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 20px;
  border-radius: 10px;
  cursor: pointer;
  /* hover transition */
  -webkit-transition-duration: 0.2s; /* Safari */
  -mos-transition-duration: 0.2s;
  -o-transition-duration: 0.2s;
  transition-duration: 0.2s;

  /* Prevent selection/highlight of button text*/
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */
}
/*
#next-button:hover {
  background-color: #ffff99;
}
*/
#next-button:active {
  background-color: #cccc00;
}
/* Prevent blue border around button on chrome */
#next-button:focus {
  outline:0;
}

#wordraw-app {
    /*width: 100%;*/
    background-color: #262626;
    padding-top: 1px;
    padding-bottom: 1px;
/*    height: 300px;*/
    /*border: 1px solid gray;*/
    /*margin: 0;*/
    
/*
    font-size: 50px;
    font-weight: 600;
*/
    
/*
    display: flex;
    justify-content: center;
    align-items: center;
*/
}

#need-more-words {
    font-size: 40px;
    font-weight: 700;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #3d3d3d;  
/*    padding-bottom: -5px;*/
    margin-bottom: -12px;
}

#wordraw-app #need-more-words-white {
    text-align: center;
    font-size: 50px;
    font-weight: 300;
    font-family: 'Open Sans Condensed', sans-serif;
    color: #f2f2f2;
/*    padding-bottom: 20px;*/
}

#wordraw-app #download-app {
    padding-top: 20px;
    text-align: center;
    font-size: 40px;
    font-weight: 600;
/*    font-family: 'Open Sans Condensed', sans-serif;*/
    color: #f2f2f2;
}

#wordraw-app #wordraw-img {
/*    margin: 20px auto;*/
/*
    THis should center the box but it's not
    margin-left: auto;
    margin-right: auto;
    display: block;
*/
    display: flex;
    justify-content: center;
}

#wordraw-app #download-img {
/*    margin: 20px auto;*/
    margin-top: 40px;
    margin-bottom: 60px;
    display: flex;
    justify-content: center;
}

#bottom-footer {
/*    margin: 20px auto;*/
    padding-top: 30px;
    padding-bottom: 30px;
    background-color: #444444;
    display: flex;
    justify-content: center;
    align-items:center;
    
    font-style: italic;
    color: #888888;
}


/************** check box stuff ******************/

/* The container */
.check-container {
  display: block;
  position: relative;
  padding-left: 33px;
  padding-top: 6px;
  margin-bottom: 0px;
  cursor: pointer;
  font-size: 20px;
  height: 25px;
  width: 75px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;  
/*  border: solid black 1px;*/
}

/* Hide the browser's default checkbox */
.check-container input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 5px;
  left: 0;
  height: 23px;
  width: 23px;
  background-color: #eee;
  border-radius: 5px;
}

/* On mouse-over, add a grey background color */
.check-container:hover input ~ .checkmark {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.check-container input:checked ~ .checkmark {
  background-color: #2196F3;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.check-container input:checked ~ .checkmark:after {
  display: block;
}

/* Style the checkmark/indicator */
.check-container .checkmark:after {
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.config-element {
    height: 30px;
/*    position: absolute;*/
    border: solid black 1px;
    
    display: flex;
    align-items: center;
}

/************** end check box stuff ******************/

/******** start collapsible ************/

#collapsible-container {
    /*width: 100%;
    padding: 20px;
    margin: 30px;*/
    
/*    background-color: #ddd;*/
    padding: 20px;
    margin: 35px 20px;
    max-width: 100%;
}

.collapsible {
  background-color: white;
  color: black;
  cursor: pointer;
  padding: 18px;
  /*margin: 10px;*/
  width: 100%;
  box-sizing: border-box;
  /*width: auto;*/
  border: 2px solid #000000;
  text-align: left;
  outline: none;
  font-size: 15px;
  border-radius: 10px;
}

/* Background color of entire bar when hover and active */
/*.collapsible-active, .collapsible:hover {
  background-color: white;
}*/

.collapsible:after {
  content: '\002B';
  color: black;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible-active:after {
  content: "\2212";
  /* Background color of minus sign only */
  background-color: white;
}

.collapsible-content {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  background-color: white;
  font-size: 14px;
}

/********** end collapsible **********/