/* Defaults 
   ======== */

body {
	background-color: #FFF;
	color: #666;
	font-family: Helvetica, Geneva, 'Lucida Grande';
	font-size: 115%;
	margin: 0;
	padding: 0;
}

a { color: #02B8EA; }
a:hover { text-decoration: none; }

em, #order a {
	color: #FFF;
	background-color: #02B8EA;
	font-style: normal;
	padding: .25em;
}
em a, #order a, a.options_link { color: #FFF; text-decoration: none; }
em a:hover, #order a:hover { text-decoration: underline; }

h1 {
	color: #02B8EA;
	font-size: 1.7em;
	margin: 0 0 8px 0;
}
h2, label {
	font-size: 1.4em;
	margin: 10px 0 5px 0;
}
h3 {
	color: #444;
	font-size: 1em;
	margin: 30px 0 5px 0;
}

p { margin: 5px 0 15px 0; }
p.small, ul.small {font-size: .8em; }
p.small { font-style: italic; }
.spacing { margin-bottom: 30px; }

ul {
	list-style-type: none;
	margin: 0; 
	padding: 0;
}
li { margin: 0 0 .75em 0 }
ol { font-size: 1.2em; margin: 0; }
ol li { margin: 0 0 40px 0; }

td, th { background-color: #EEE; padding: .3em; }
th { background-color: #CCC; text-align: left; }


/* "Navigation"
   ============ */

#header { padding: 70px 0 60px 0; }

#header .navigation {
	float: right;
	padding: 0 1em 0 0;
}

#header .no-floater {
	float: none;
	padding: 0;
}

#header .no-padding { padding: 0 0 0 .4em; }

#header .navigation a {
	border: 5px solid #02B8EA;  
	color: #02B8EA;
	padding: .75em;
	text-decoration: none;
}

#header .navigation a:hover { background-color: #02B8EA; color: #FFF; }


/* "Notice"
   ======== */

#notice .notice, #notice .success, #notice .failure {
	background: #C0ED00;
	height: 60px;
	margin-bottom: 55px;
	padding: 0 .75em 0 .75em;
}

#notice .failure { background: #C66; }

#notice h1, #notice p { color: #FFF; }

#notice h1 {
	float: left;
	margin-top: 14px;
	padding: 0;
}

#notice p { float: right; margin-top: 30px; }

.error, .error h3 { color: #C66; }


/* "Main"
   ====== */

#main	{ padding: 0 310px 0 0; }

#sidebar { float: right; width: 270px; }

.container { margin: 0 auto; width: 90%; }

.content, .tab_content_pane { padding-bottom: 30px; }

ul.inline { line-height: 1.5; padding: 0; }

ul.inline li { display: inline; padding-right: .6em; }

#scores p { font-size: .8em; margin-top: 10px; }

.transformation_details { padding: 20px 0 25px 20px; }


/* "Main" -> "Tabs"
   ================ */

.tabs { border-bottom: 5px #02B8EA solid; padding-bottom: .5em; }

.tab_link {
	background-color: #C0ED00;
	display: inline;
	margin-right: 2px;
	padding: .5em;
}

.tab_link a { color: #FFF; text-decoration: none; }

.tab_link a:hover { text-decoration: underline; }

.tab_content_pane { padding: 30px 20px 0px 20px; }

.tab_content_pane .content { padding-bottom: 25px; }

.active { border: none; background-color: #02B8EA; }

a.active { color: #FFF; padding: 2px; text-decoration: none; }

#tab_browser {
	background-color: #DED;
	padding: 1em;
	margin-bottom: 40px;
}


/* "Main" -> "Test section"
   ======================== */

#error_pane { background-color: #C66; padding-bottom: 20px; margin-bottom: 40px; }

#error_pane em { color: #C66; background: none; font-weight: bold; padding: 0; }


/* "Main" -> "User list"
   ===================== */

.user_list {
	float: left;
	font-size: .9em;
	margin: 0 30px 30px 0;
}

em.tag {
	font-size: .8em;
	text-transform: uppercase;
}


/* "Main" -> "Vocabulary list"
   ========================== */
   
ul#latest.list { margin-top: -9px; }

ul.list li.item { cursor: move; }

.list li ul.inline li.highlight { background-color: #02B8EA; color: #FFF; }

.list li ul.inline {
	background-color: #DED;
	padding: .7em .55em .7em .55em;
}

.list li ul.inline li {
	background-color: #FFF;
	margin: 0 .3em 0 0;
	padding: .2em .4em .3em .4em;
}

.list li.over_receiving_element ul.inline { background-color: #02B8EA; }

a.delete { color: #C66; text-decoration: none; }

ul#order { float: right; margin-right: -10px; }

#order a { font-size: .75em; padding: .15em .25em .15em .25em; }

.list li ul.inline li.options_menu { background-color: #444; }
 
a.options_link { color: #FFF; }

ul.list_options {
  background-color: #02B8EA;
  font-size: .75em;
  padding: .5em;
  position: absolute;
  z-index: 100;
}

.list li ul.inline ul.list_options li { background-color: #02B8EA; display: block; }

.list li ul.inline ul.list_options li a { color: #FFF; }


/* "Main" -> "Vocabulary pane"
   ========================== */

#vocabulary_pane h2 { margin: 5px 0 10px 0; }

#vocabulary_pane .no-floater { margin: 0 0 35px 0; }

.floater { float: left; margin: 0 50px 0 0; }

.floater h3, .no-floater h3 { margin-top: 0; }


/* "Main" -> "Comments"
   =================== */
   
#comments li { padding-bottom: 10px; }
   
#comments ol, #comments ul, #comments p, #comments h1, #comments h2, #comments h3, #comments h4, #comments h5 { color: #666; font-size: 1em; margin: 5px 0 5px 0; padding: 0; }

#comments h1 { font-size: 1.25em; }

#comments h2 { font-size: 1.2em; }

#comments h3 { font-size: 1.15em; }

#comments h4 { font-size: 1.1em; }

#comments ol, #comments ul { margin-left: 35px; padding: 0; }

#comments ul { list-style-type: square; }

#comments ul li, #comments ol li { margin: 0; padding: 0; }


/* "Sidebar"
   ========= */

#sidebar a { color: #C0ED00; }

#sidebar form { margin-top: 5px; }

#sidebar h1 {
		background-color: #C0ED00;
		color: #FFF;
		display: inline;
		font-size: 1em;
		font-weight: normal;
		margin: 0;
		padding: .5em;
}

#sidebar p { margin: 0; padding: 0; }

#footer, #notice, .pagination { text-align: center; }

#sidebar .content { margin-bottom: 15px; }

#search_and_drag { margin-top: 10px; }


/* "Sidebar" -> "User bar"
   ======================= */

.green { border-bottom-color: #C0ED00; margin-bottom: 15px; }

#user_bar { min-height: 140px; }

#user_bar li { margin: 5px 0 5px 0 }

.gravatar, .gravatar_big {
	background-color: #FFF;
	border: 1px #888 solid;
	float: left;
	margin: 0 20px 0 0;
	padding: .15em;
}

.gravatar_big { margin-right: 25px; }


/* "Sidebar" -> "Manage stuff"
   ========================== */
      
li.menu a {
  border-bottom: 2px #C0ED00 solid;
  display: block;
  text-decoration: none;
}

li.menu p { border-bottom: 2px #DED solid; color: #DED; }

ul.menuitems { padding: .25em 0 0 0; }

.menuitems li { margin: 0; padding: 0; }

.menuitems li a {
  border-bottom: none;
  font-size: .75em;
  padding: .25em 0 0 0;
  text-decoration: none;
}

.menuitems li a:hover { text-decoration: underline; }


/* "Sidebar" -> "Lists"
   ===================*/
   
#lists ul li { margin: 0 0 10px 0; }

#lists {
  float: left;
  height: 142px;
  margin: 0 15px 0 0;
  overflow: hidden;
  white-space: nowrap;
}

#wrap {
  float: left;
  width: 8px;
  height: 143px;
  background: transparent url(../images/scrollbar-track-bottom.png) no-repeat bottom left;
}

#track-top {
  position: absolute;
  width: 8px;
  height: 14px;
  background: transparent url(../images/scrollbar-track-top.png) no-repeat top left;
}

#track {
  position: absolute;
  width: 8px;
  height: 143px;
}

#handle {
  width: 8px;
  height: 16px;
}


/* "Footer"
   ======== */

#footer {
	float: right;
	margin-top: 30px;
	padding: .5em 0 1.5em 0;
	border-top: 5px #02B8EA solid;
	width: 100%;
}


/* "Forms"
   ======= */
   
#test_options_input ul { font-size: .9em; }

#test_options_input ul li { margin: 0 0 10px 0; padding: 0; }

label {
	display:block;
	font-weight:bold;
	font-size: 1.25em;
	margin: 0 0 5px 0;
}

fieldset { border: none; padding: 0; margin: 0; }

fieldset ol { font-size: 1.1em; }

fieldset ol li { margin: 10px 0 25px 0; }

fieldset.buttons ol { list-style: none; }

.fields { margin: 0 0 35px 0; }

.fieldWithErrors  {
  border-left:6px solid #900;
  padding-left: .1em;
}

.fieldWithErrors+label {
  margin-top:0;
}

#errorExplanation {
	border:2px solid #900;
	width:100%;
	margin:10px 0 30px 0;
  background:#FCC;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: .25em .25em .25em .5em;
  font-size: 12px;
  background:#C66 no-repeat 10px 50%;
  color: #fff;
  border-bottom:2px solid #900;
  margin-top:0;
}

#errorExplanation p {
  margin: 0;
  padding: .5em;
  font-size: .75em;
  font-weight:bold;
}

#errorExplanation ul {
	font-size: .75em;
	margin-left:30px;
	padding:0 0 10px;
}

.inline-hints { color: #AAA; font-style: italic; font-size: 0.85em; }


/* "Forms" -> "Small"
   ================== */

form.small h3 { font-size: .75em; margin: 0 0 5px 0; }

form.small .fields { float: left; font-size: .75em; margin: 0 10px 15px 0; }

form.small .no-floater { float: none; }


/* "Forms" -> "Autocomplete"
   ========================= */

div.auto_complete {
	font-size: .75em;
	background: #fff; 
}

div.auto_complete ul { 
	border:1px solid #888; 
	margin:0; 
	padding:0;
	width:100%; 
	list-style-type:none; 
}
 
div.auto_complete ul li { 
	margin:0; 
	padding:3px; 
} 

div.auto_complete ul li.selected { 
	background-color: #02B8EA;
	color: #FFF;
} 

div.auto_complete ul strong.highlight { 
	margin:0; 
	padding:0; 
}

input, select {
	color: #555;
	font-family: Helvetica, Geneva, 'Lucida Grande';
	font-size: .9em;
}

option { padding: .1em; }
	
input[type="submit"] {
	background: #02B8EA;
	border: none;
	color: #FFF;
	margin-right: 25px;
	padding: .5em;
}

input[type="submit"].reverse { background: #FFF; color: #02B8EA; }


/* "Forms" -> "In Place Editor"
   ============================ */

form.inplaceeditor-form { display: inline; }

form.inplaceeditor-form input[type="submit"] {
	font-size: .8em;
  margin-left: 12px;
}

form.inplaceeditor-form a, a.edit_link, input[type="submit"].grey {
	color: #FFF;
	background-color: #888;
	font-size: .8em;
	font-style: normal;
	padding: .35em;
	margin-left: 7px;
	text-decoration: none;
}

form.inplaceeditor-form a:hover {
	text-decoration: underline;
}

a.edit_link, input[type="submit"].grey { margin-left: 3px; padding: .25em; }


/* "Various"
   ========= */

.draggable {
	cursor: move;
	display: inline;
}

.strong { font-weight: bold; text-decoration: underline; }
	
#loading { float: left; margin-right: 10px; }

#graph_navigation { margin: 35px 0 0 20px; }


/* "Various" -> "Tag cloud"
   ======================== */

.css1 { font-size: 1.0em; }
.css2 { font-size: 1.2em; }
.css3 { font-size: 1.4em; }
.css4 { font-size: 1.6em; }


/* "Various" -> "Dialog"
   ===================== */

div.dialog {
	width: 900px;
	padding: 1em;
	margin: 50px auto 50px auto;
}