@import url(//fonts.googleapis.com/css?family=BenchNine);
@import url(//fonts.googleapis.com/css?family=News+Cycle);


.Morning { 
  background: url(bg1.jpg) no-repeat center center fixed; 
}
.Afternoon { 
  background: url(bg2.jpg) no-repeat center center fixed; 
}
.Evening { 
  background: url(bg3.jpg) no-repeat center center fixed; 
}


html {
  background: url(bg1.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}



.wrapper {
        width: 40%;
        height: 250px;
        -moz-border-radius: 15px; 
		border-radius: 15px;

        background-color: rgba(255, 255, 255, .5);
	padding:10 10 10 10;
        position:absolute; /*it can be fixed too*/
        left:0; right:0;
        top:0; bottom:0;
        margin:auto;

        /*this to solve "the content will not be cut when the window is smaller than the content": */
        -max-width:100%;
        -max-height:100%;
        -overflow:auto;
    }


.SearchInput {
    background-color: white;
    background-image: url('search-icon.png');
    background-position: 10px 20px; 
    background-repeat: no-repeat;
	padding: 10 5 10 5;
	text-align:center;
	height:65px; 
	width: 100%; 
	outline: none; 
	font-family: Arial, Helvetica, sans-serif; 
	-font-size: 30pt; 
	font-size: 20pt; 
	color:#ADB5BD; 
	border: 1px solid #999999;
	-moz-border-radius: 15px; 
	border-radius: 15px;
}

.EmailInput {
    background-image: url('email-icon.png');
}


.ActiveButton {
	
	display:none;
	background: #9ACC17;
	-moz-border-radius: 5px; 
	border-radius: 5px;
	color: #FFFFFF;
	font-family:'BenchNine' , sans-serif;
	font-size: 24pt;
	height: 43px;
	margin: auto;
	margin-top:20px;
	text-align:center;
	width: 170px;
}
																
.ActiveButton:hover {
	cursor: pointer;
	color: #333333;
}

.InactiveButton {
	background: #FA6212;
	-moz-border-radius: 5px; 
	border-radius: 5px;
	color: #FFFFFF;
	font-family:'BenchNine' , sans-serif;
	font-size: 24pt;
	height: 43px;
	margin: auto;
	margin-top:20px;
	text-align:center;
	width: 170px;
}

.MyStuff {
    background-color: rgba(255, 255, 255, .8);
	padding: 10 10 10 10;
	min-height:400px; 
	width: 90%; 
	outline: none; 
	font-family: Arial, Helvetica, sans-serif; 
	font-size: 20pt; 
	color:#808080; 
	border: 1px solid #999999;
	-moz-border-radius: 15px; 
	border-radius: 15px;
	resize: none;
}

.MyStuffLbl {
	-border: 1px solid #999999;
	text-align:center;
	padding:10;
	font-family: 'News Cycle', sans-serif;
	font-size: 30pt; 
	color:#333333; 
}

.Copyright {
	font-family:'Arial' , sans-serif;
	font-size: 10pt;
	color:#333333;
	padding:30 0 0 0; 
	text-align: center;
}


@media (max-width: 991px) {
    .wrapper {width:90%}

}


@media handheld and (min-device-width : 320px) , screen and (max-device-width : 380px) {
    /* Mobile Settings Iphone 5 */
    .MyStuff {font-size: 10pt;}
    .wrapper {width:90%}

}