/* IVM styles ©2012 Miles DeCoster */
 @font-face {font-family: 'FrutigerLTPro-Condensed';src: url('webfonts/2792E8_0_0.eot');src: url('webfonts/2792E8_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/2792E8_0_0.woff') format('woff'),url('webfonts/2792E8_0_0.ttf') format('truetype');}
body {
	font-family:'FrutigerLTPro-Condensed',"Lucida Sans Unicode", "Lucida Grande", sans-serif;
	font-size:100%;
	margin:0;
}
.clearfloat {
	clear:both;
	height:0;
}
input[type="button"] {
	font-size:1em;
	width:30%;
	color:#063;
	margin:6px 0;
	height:40px;
	-webkit-appearance: button;
}

/* ----------------------------- containers ----------------------- */

#wrapper {
	position:relative;
	width:320px;
	height:520px;
	margin:0 auto;
	z-index:10;
	border:outset 2px #999;
	border-radius:10px;
	margin-top:20px;
	overflow:hidden;
	box-shadow:6px 6px 4px #ccc;
}

#viewPort {
	width:320px;
	position:relative;
}
section {
	position:relative;
}
#page1 {
	position:absolute;
	width:320px;
	top:0;
	left:0px;
	height:500px;
}
#page2 {
	position:absolute;
	width:320px;
	top:0;
	left:0;
	display:none;
}

/* ----------------------------- screen 1 elements ----------------------- */

#logo {
	text-align: center;
    margin-top:8px;
    cursor:pointer;
}
h3 {
    font-family: 'FrutigerLTPro-Condensed';
    font-size: 1.5em;
    text-align: center;
    margin:4px;
}

#searchForm {
	width:90%;
	margin:0;
	position:relative;
}

#verbListDisplay {
	overflow: hidden;
}
#verbForm {
	width:320px;
	height:365px;
	margin:0;
	text-align:left;
	font-family: 'FrutigerLTPro-Condensed', sans-serif;
	font-size: .8em;
}-webkit-appearance: none;-webkit-appearance: none;
#verbForm select option {
	display: block;
	-webkit-appearance: none;position:relative;
	color: green;
	padding:2px;
}

#searchForm {
	width:300px;
	margin:10px;
	position:relative;
}
#searchForm input {
	background-image:url(images/search2.png);
	background-repeat:no-repeat;
	width:260px;
	background-position:-7px -7px;
	height:25px;
	font-size:1em;
	padding-left:38px;
	border-radius:5px;
	-webkit-border-radius:5px;
}

#tenseForm {
    width: 306px;
    margin:0 auto;
}
#verbs, #tense, #person {
	width: 100%;
	font-size:1.2em;
}
#formInput {
	margin:10px;
	border-radius:10px;
	padding:10px 5px 0 5px;	
}

#formInput input {
	width:280px;
	font-size:1.2em;
	 -webkit-appearance: caret;
	 border:solid 1px #CCC;
    padding: 3px 5px;
}

#formInput label {
display:inline-block;
width:80px;
text-align:right;
color:orange;
margin-right:5px;
font-size:.7em;
}

#conjugations-tense label {
display:block;
text-align:center;
color:orange;
font-size:.8em;
}
.clearfloat {
	clear:both;
	height:0;
}
.correct {
	background-color:#B9FAA3;
}
.wrong {
	background-color:#FFCBDA;
}
.hilite {
	color:#F00;
}
#tenseNotes {
	font-size:.9em;
	width:260px;
	padding:6px;
	background-color:#FED;
	position:absolute;
	top:70px;
	left:20px;
	display:none;
	border:solid 2px #F60;
	border-radius:10px;
	box-shadow:3px 3px 3px #666;
	cursor:pointer;
	z-index:40;
}
#tenseNotes h3 {
	text-align:center;
}
.ivmNotes {
	font-size:.8em;
}
#closeNotes {
	position:absolute;
	height:30px;
	width:30px;
	background-image:url(images/close.png);
    background-size: contain;
	top:5px;
	left:5px;
	cursor:pointer;
}
#notesText {
	margin:10px 20px;
}
#notesText i {
	color:#040;
}

.searchResult p {
    font-size:1.4em;
	color:#390;
	text-align: center;
    margin:0;
}
.instruction {
	font-size:1em;
	color:#930;
	margin:2px;
}
input[type="button"] {
	font-size:1em;
	width:70px;
	color:#063;
	margin:0 10px 10px 6px;
    cursor:pointer;
}

#searchForm ::-webkit-input-placeholder {
   color:#B49D72;
   font-size:1em;
}

#searchForm :-moz-placeholder {
    color:#B49D72;
   font-size:1em;
}

.center {
	text-align:center;
}
.center2 {
	text-align:center;
	padding:0;
	margin:0;
}

.translation {
	color:#396;
	font-size:9px;
}

input[type="button"] {
	height:40px;
}
#clearSearch {
	position:absolute;
	top:5px;
	right:3px;
	display:inline;
	background-image:url(images/searchClose.png);
	height:20px;
	width:20px;
	cursor:pointer;
}
#tenseSection {
    position: relative;
}

.noteIcon {
	position:absolute;
	top:8px;
	right:10px;
	cursor:pointer;
}
#noResult p {
	font-size:1.3em;
	color:#063;
}
.nf {
	color:#C30;
}
.aboutIcon {
	position:absolute;
	top:2px;
	right:20px;
	cursor:pointer;
}

.topBar {
	width:100%;
	height:50px;
	background-color:#063;
	color:#9C9;
	margin-bottom:8px;
}
.backButton {
    margin:8px;
    height:35px;
    font-size:1em;
    border-radius:4px;
    padding-bottom: 4px;
    cursor:pointer;
	background-color: white;
}

.biggerArrow {
	font-size:1.3em;
}
#person {
	margin:6px 0;
}
#page1, #page2 {
	position:relative;
	width:320px;
}

#verbAlert {
	position:relative;
	z-index:50;
	cursor:pointer;
}
.rightArrow {
	position:absolute;
	top:5px;
	right:3px;
	display:inline;
	height:20px;
	width:20px;
}
div.rightArrow {
	position:absolute;
	top:-3px;
	right:14px;
	display:inline-block;
	height:20px;
	width:40px;
	font-size:1.5em;
}
footer p {
    font-size:.7em;
    color: grey;
    text-align: center;
}