/* elements */

body {
   margin: 0px; 
   padding: 0px;
   font-family: "Droid Sans", sans-serif;
}


a {
   color: #333399;
   }
dl {
   }
dt {
   float: left;
   margin-left: 0px;
   padding-right: 10px; 
   }
dd {
   margin-left: 40px;
   }
form {
   margin: 0px;
   }
h1, h2, h3, h4, h1 a { 
   font-family: "Droid Serif", serif;
   font-weight: normal; 
   color: #444444; 
   text-decoration: none;
   }
h1 {
   margin: 0px;
   font: 2em Georgia, serif;
   transition: 200ms;
   }
h2 { 
   margin: 1.5em 0 0.6em 0; 
   font-size: 1.6em; 
   }
h2.header { 
   margin-top: 20px;
   border-bottom: dotted 1px #999999;
   }
h3 { 
   margin: 1em 0 0.4em 0; 
   font-size: 1.4em; 
   }
table {
   margin: 0 0 20px 0;
   }
th {
   text-align: left;
   color: #444444;
   font-size: 0.8em;
   }
table.sortable th {
   cursor: ns-resize;
   }  
label, div.label {
   display: block;
   float: left;
   width: 200px;
   }
label.option {
   display: inline;
   float: none;
   }
li, p {
   margin: 0 0 0.8em 0;
   }
small, .small {
   font-size: 0.8em;
   }
sup {
   line-height: 0px;
   }



/* layout */

#wrapper { 
   float: left;
   width: 100%;
   padding-top: 106px;
   margin-bottom: 0;  
   }

#header {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 60px;
   padding: 20px 30px;
   background-color: palegoldenrod;
   border-top: solid 5px #333333;
   border-bottom: solid 1px #999999;
   box-shadow: 1px 0px 25px #aaaaaa;
   text-shadow: 2px 2px 2px #cccccc;
   transition: 200ms;
   }
#header.compact {
   height: 30px;
   border-top: solid 3px #333333;
   padding: 10px 30px;
   }
#header.compact h1 {
   font-size: 1.5em;
}
#headerText {
   width: 550px;
   float: left;
}
div.byline {
   color: #444444;
}
#header.compact div.byline {
   display: none;
}

#searchPanel {   
   float: left;
   width: 100%;
   border-bottom: dotted 1px #999999;
   background-color: #f9f9ff;
   }
#leftPanel {
   float: left;
   padding: 0px 30px 10px 30px;
   width: 460px; 
   }
#rightPanel {
   float: left;
   padding: 0px 30px 10px 30px;
   width: 460px;    
   border-left: dotted 1px #999999;
   }
#singlePanel {
   float: left;
   padding: 0px 30px 10px 30px;
   }
   
#content {
   float: left;
   max-width: 900px; 
   padding: 20px 30px 10px 30px;
   line-height: 150%;
   }
.home {
	max-width: 700px;
	}
#footer {
   float: left;
	width: 100%;
	margin: 30px 0px 0px 0px;
   border-top: solid 1px #999999;
   padding: 20px 30px 50px 30px;
	background-color: #eee;
	font-size: 0.8em;
	color: #333333;
   }

#tooltip{
	position: absolute;
	border: 1px solid #333333;
   border-radius: 5px; 
	background-color: palegoldenrod;
	padding: 4px 7px;
   box-shadow: 2px 2px 15px #aaaaaa;
	color: #444444;
	display: none;
   font-size: 0.9em;
	}	

#popup {
   display: none;
   position: absolute;
   top: 50px;
   left: 50px;
   bottom: 30%;
   right: 40%;
   background-color: #ffffff;
   border: solid 1px black;
   padding: 30px;
   }


/* navigation */

ul.nav {
   position: absolute;
   top: 36px;
   left: 620px;
   width: 700px;
   margin: 0px;
   padding: 0px;
   list-style-type: none;
   transition: 200ms;
}
#header.compact ul.nav {
   top: 16px;
   left: 500px;
}
ul.nav li {
   float: left;
   padding: 0px 15px 0px 0px;
}
ul.nav a {
   text-decoration: none;  
   color: #444444;
   transition: 500ms;
   font-size: 0.9em;

   padding: 5px;
   border-radius: 2px;
}
ul.nav a:hover {
   background-color: #ccc;
   color: #fff;
   box-shadow: 2px 2px 5px #999;
   }



/* classes */

input.search, select.search { 
   width: 200px;
   }
table.browse {
   margin-top: 20px;
   }
table.browse td {
   padding-top: 4px;
   padding-right: 4px;
   padding-bottom: 4px;
   }
table.browse td.priscian {
   background-color: #f9f9ff; 
   border-bottom: solid 1px #cccccc;
   padding: 6px 7px 4px 7px;
   }
table.browse td.priscianHighlight {
   background-color: #ffff99;
   border-bottom: solid 1px #cccccc;
   padding: 6px 7px 4px 7px;
   }

table.search {
   margin-top: 20px;
   }
table.search th, table.search td {
   border-bottom: solid 1px #cccccc;
   padding: 4px 4px 4px 4px;
   }

a.button {
   display: inline-block;
   padding: 6px 12px;
   margin: 0 5px 0 0;
   background-color: #428bca;
   border: 1px solid transparent;
   border-radius: 7px;
   border-color: #357ebd;
   text-align: center;
   text-decoration: none;
   color: #ffffff;
   }



.construeSymbol, .construeConnector {
   color: #999999; 
   }
.construeRef {
   font-size: 0.8em;
   color: #999999; 
   }
.highlight, td.highlight, tr.highlight {
   background-color: #ffff99;
   }
span.trans {
   color: #666666;
   font-size: 0.8em;
   padding-left: 1em;
   }
.note {
   font-size: 0.8em;
   color: #666666; 
   }
span.sc {
   font-variant: small-caps;
   }

img.homeImage {
   float: right;
   border: solid 1px #999999;
   padding: 1px;
   }



/* autoComplete */
.autocomplete-suggestions {
    text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);

    /* core styles should not be changed */
    position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
}
.autocomplete-suggestion { position: relative; padding: 0 .2em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
.autocomplete-suggestion.selected { background: #f0f0f0; }