body {
	color: #222;
	font-family: "Trebuchet MS",Helvetica,Arial,sans-serif;
	font-size: 1.0em;
}

/* layout */
.layout {
	width: 95%
	margin: 0 auto;
	padding: 0% 1%;
}
.fields {
	float: right;
	width: 33%;
	padding: 1%;
	margin-left: 1%;
	background-color: #EEE;
}

.mediasection {
	max-width: 64%;
	float: left;
}


.mediasection img {
	max-width: 100%;
}

/* annotation field */
.annotate-field {
	overflow: auto;
	background-color: auto;
	padding: 1% 0% 1% 0%;
	border-bottom: 1px solid #CCC;
}
.annotate-header {
	float: left;
	width: 48%;
}

.annotate-comment {
	      padding-top: 3%;
	      overflow: auto;
	      width: 100%;
	      clear: both;
	      }

.annotate-comment h3
{
 width: 48%;
 margin: 0 0 1% 0;
 font-size: 0.85em;
}

.annotate-unsure {
 overflow: auto;
 clear: both;
 font-size: 0.85em;
 width: 48%;
 margin: .5% ;
 border: 2px solid #EEE;
}
.annotate-header h3 {
	margin: 0 0 1%;
		    }

#image_annotation_done {
  background-color: white;
  border: 2px solid #AAAAAA;
  color: #3333AA;
  display: block;
  font-family: sans-serif;
  font-style: italic;
  margin: 5% 0.5% 0.5% 0.5%;
  min-width: 10em;
  width: 10%;
  padding: 1%;
  text-align: center;
  text-decoration: none;
}

.xannotate-field:hover:before {
 content:attr(alt);
 position: absolute;
 display: inline;
 padding: 10px;
 margin-top: 0%;
 max-width: 10%;
 background: #EEE;
 border-radius: 5px;
 border-style: solid;
 color: #666;
 font-size: .8em;
 font-weight: normal;
 font-style: italic;
}
.annotate-description {
	width: 100%;
	color: #666;
	margin: 0px;
	font-size: 0.8em;
	font-style: italic;
}
.annotate-field input.yui3-aclist-input {
	float: right;
	width: 48%;
	font-size: 1.1em;
	padding: 0%;
        margin: .5% .5%;
	border: 2px solid #AAA;
}

.annotate-comment-input {
     width: 48%;
     font-size: 1.3em;
     margin: .5% .5%;
     border: 2px solid #AAA;
     padding: 0;
}

.delete_dialog {
		   margin-top: 0;
		   margin-bottom: 0;
}

.taglist {
	font-size: 0.9em;
	width: 100%;
	float: right;
	clear: right;
	margin: 0;
	padding: 0;
}
.taglist li {
	list-style: none;
	margin: 0;
	overflow: auto;
	height: 3ex;
}
.taglist.inline li {
	height: 5ex;
}

.taglist.overlay li {
	cursor: hand; 
	cursor: pointer; 
}

.taglist .inline.commentButtons {
	display: inline;
}

.taglist .overlay.commentButtons {
	width: 100%;
	margin-right: 1%;
	border-top: 1pt solid #CCC;
	clear: both;
	overflow: auto;
}

.commentButtons span {
	text-align: right;
	float: right;
}
.taglist .inline.taglabel {
	padding: 0% 1%;
	float: left;
}
.taglist .inline.screenName {
	padding: 0% 1%;
	float: left;
}
.taglist .inline.screenName:before { content: '('; }
.taglist .inline.screenName:after { content: ')'; }
.taglist .inline.tagCreditLine:after { content: ': '; }

.taglist .overlay.taglabel, 
.taglist .simple.taglabel {
	width: 45%;
	padding: 0% 1%;
	float: right;
}
.overlay {
	text-align: right;
}
.overlay.title.taglabel {
	width: 100%;
	margin-left: 1%;
	font-size: 2.0em;
	display: block;
	text-align: center;
}
.taglist div.tagremove {
	width: 4%;
	overflow: hidden;
	float: right;
}
.overlay span.metaremove {
	width: 4%;
	overflow: hidden;
	float: right;
}
.overlay span.metaremove a.metaremove {
	color: red;
	text-decoration: none;
}
.taglist div.tagremove.disabled a {
	visibility: hidden;
}
.taglist div.tagremove.enabled a {
	color: red;
	text-decoration: none;
}
.taglist .taglabel a {
	text-decoration: none;
	color: #222;

}
.overlay.tagCreation {
	overflow: auto;
        border-bottom: 1pt solid #CCC;
}

.overlay.screenName:before {
        content: 'Tag created by:';
	display: block;
	float: left;
	}
.overlay.screenName:after {
}
.overlay.screenName {
	float: right;
	display: block;
	width: 100%;
}

.overlay.comment {
	clear: both;
	width: 100%;
	overflow: auto;
}
.overlay.comment .screenName {
	float: left;
	display: block;
}
.overlay.comment .screenName:before {
        content: 'Comment by @';
	display: block;
	float: left;
}
.overlay.comment .screenName:after  { content: ':'; }
.overlay.comment .body:before {
	font-style: normal;
	display: block;
        float: left;
	content: 'My comment:';
}
.overlay.comment .body:after { content: ''; }
.overlay.comment .body {
	font-style: italic;
}
.overlay.rating:before {
	font-style: normal;
	display: block;
        float: left;
	content: 'My rating:';
}
.taglist .judgeButton:hover {
}
.taglist .overlay.judgeButton.unchecked:after {
	display: block;
	font-size: 0.7em;
	content: attr(title);
}
.taglist .judgeButton {
	padding-left: .3em;
	padding-right: .3em;
	padding-top: .3em;
	cursor: crosshair;
}
.taglist .overlay.judgeButton img {
	width: 5ex;
	vertical-align: middle;
}
.taglist .inline.judgeButton img {
	height: 2.1ex;
	vertical-align: middle;
}
.taglist .inline.judgeButton.checked img {
	height: 3.1ex;
	vertical-align: middle;
}
.taglist .overlay.judgeButton.checked img {
	display: none;
}

/* resource */
.resource h3 {
	margin: 0 0 6px;
}