/*
This file is part of verb-o-matic. Copyright 2008 Luzius Thöny.

    verb-o-matic is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    verb-o-matic is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with verb-o-matic.  If not, see <http://www.gnu.org/licenses/>.
*/

html {
	margin: 0;
	padding: 0;
	}
body { 
	font: 100% Roboto, sans, serif;
	line-height: 1.4;
	margin: 0; 
	padding: 0;
	text-align: left; 
	}
p { 
	margin-top: 0; 
	#text-align: justify;
	}
h2 { 
	letter-spacing: 5px; 
	margin: 0; 
	text-align:center;
	margin-bottom:1em;
	}
h3 { 
	font-weight: bold;
	font-size:90%;
	}
a:link { 
	font-weight: bold; 
	text-decoration: none; 
	color: #7259A5;
	}
a:visited { 
	font-weight: bold; 
	text-decoration: none; 
	color: #9685BA;
	}
a:hover, a:active { 
	text-decoration: underline; 
	color: #7259A5;
	}
img {
	border: 0px;
}
#container { 
	padding: 0px 0px 0px 0px;  
	margin: auto;
  width: 50%;
	}
@media (max-width: 1000px) {
	#container { 
		width: 60%; /* The width is 100%, when the viewport is 800px or smaller */
	}
}
@media (max-width: 800px) {
	#container { 
		width: 80%; /* The width is 100%, when the viewport is 800px or smaller */
	}
}
#top a:link { 
	text-decoration: none; 
	color: #cccccc;
	}
#top a:visited { 
	text-decoration: none; 
	color: #cccccc;
	}
#top a:hover, a:active { 
	text-decoration: underline; 
	color: #aaaaaa;
	}
#top {
	font-size:x-small;
	#background:#e8e8e8;
	padding: 0px 0px 0px 0px;  
	height: 110px;
	margin-top:30px;
	margin-bottom:10px;
	text-align: center;
}
#main { 
	background:#e8e8e8;
	padding: 0px 0px 10px 0px;  
	#width: 752px;
	min-height:500px;
	border-radius: 20px 20px 0px 20px;

}

.clear {
	clear:left;
}




#contact {
	#font-size: x-small;
	color: #cccccc;
	text-align: right;
	padding: 0px 0px 0px 0px;  
	#margin-top:-0.5em;
	margin-bottom:10em;

}
#contact a:link { 
	text-decoration: none; 
	color: #cccccc;
	}
#contact a:visited { 
	text-decoration: none; 
	color: #cccccc;
}
#contact a:hover, a:active { 
	text-decoration: underline; 
	color: #999999;
}
#vocabularyInput {
	margin-left: 0.5em;
}
.mono {
	text-align:left;
	padding: 5em;
}
@media (max-width: 1000px) {
	.mono  { 
		padding-left: 3em;
		padding-right: 3em;
	}
}
@media (max-width: 800px) {
	.mono { 
		padding-left: 1em;
		padding-right: 1em;
	}
}

.mono h2 {
	text-align:left;
	letter-spacing:1px;
}

.screenshot {
	max-width:100%
}
@media (max-width: 1000px) {
	.screenshot  { 
		#max-width:75%
	}
}
@media (max-width: 800px) {
	.screenshot { 
	#max-width:50%

	}
}

.gameblock {
	margin-bottom:2em;
	text-align:center;
}


button {
	#border: 5px dotted #BFBFBF;
	color: #4D4D4D;
	background: #368DCD;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: xx-large;
	#margin: 4px 2px;
	margin-top: 1em;
	margin-bottom: 1em;
	border-radius: 6px;
}
button:hover {
  background-color: #008CBA;
  #color: white;
}