body {font-size: .8em; color: #333; text-align: center;  font-family: Palatino, "Palatino Linotype", Georgia, Times, Times New Roman, serif; margin: 0; background-color: #a7a7a6}
div, ul, li, p, h1,h2,h3,h4, ol, ul, td { font-family: Palatino, "Palatino Linotype", Georgia, Times, Times New Roman, serif; padding: 0; margin: 0; text-align: left}
.access,.hidden {display: none}
.clr {clear: both;}
li {list-style-type: none;}
pre {background-color: #eee; padding: 10px; font-size: 11px; font-family: monaco}
img {border: none;}
a {color: #333}
a:hover {color: #500;}
table {border-collapse: collapse}
 #wrapper {margin: 0 auto 0; width: 940px; padding: 0 17px; background: url(/stylesheets/art/body_back.png) top center repeat-y}
#header {padding: 0; margin: 0 35px; position: relative; height:114px; border-bottom: 1px solid #ccc}
#logo {position: absolute; left: -10px; top: 45px; background: url(/stylesheets/art/logo.gif) 10px 5px no-repeat; display: block; overflow: hidden; height: 0; padding-top: 46px; width: 304px}
#logo:hover {background-position: 10px -47px}
 #main_nav {position: absolute; left: 360px; top: 0}
#main_nav li {display: inline}
#main_nav li a {display: block; height: 114px; width: 100px; text-align: right; float: left; margin-right: 10px; background-color: #D6E6FF; position: relative; text-decoration: none; font-size: 1.2em}
#main_nav li a:hover {background-color: #afd0ff}
#main_nav li.current a {background-color: #afd0ff}
#main_nav li a b {position: absolute; bottom: 3px; right: 4px}
#search {position: absolute; left: 700px; top: 30px}
#search input.search {width: 140px; font-family: Palatino, "Palatino Linotype", Georgia, Times, Times New Roman, serif; background: url(/stylesheets/art/search.gif) 2px center no-repeat; padding: 2px 2px 2px 18px; border: 1px solid #aaa; font-size: 1em}
.autocomplete {z-index: 200}
 #content {padding: 35px 35px 0}
#content p, #content li {font-size: 1.05em; line-height: 1.4em}
#content p, #content li, #content ul {margin-bottom: .5em}
#content p a {color: #337}
.main {width: 650px; float: left; clear: left; margin-bottom: 1em}
#content h1, #content h2, #content h3 {clear: left}
#content h1 {margin: 0 0 .6em 0; font-size: 1.9em; color: #333}
#content h2 {padding: 0 0 .4em; font-size: 1.6em}
#content h3 {margin: 1em 0 .4em; font-size: 1.4em}
#content h3 a {color: #117; padding: .2em 0; display: inline-block}
#content h3 a:hover {background-color: #e0e0e0}
.main ul {margin-left: 2em}
.main ul li {list-style-type: square}
#content ol {margin-left: 1.5em}
#content ol li {list-style-type: decimal}
#content .cms_image_center {display: block; margin: 1em auto 1em}
#content .cms_image_right {display: inline; float: right; margin: 1em 0 1em .5em}
.sidebar {width: 193px; float: right; border-left: 1px solid #ddd; padding-left: 15px}
#content .insect_display h1 {margin-bottom: 0!important}
#content .insect_display h2 {margin-top: .3em!important}
.sidebar .alert {font-weight: bold; color: #222; margin: 2em 0; background-color: #fbb!important; padding: .1em .5em}
 .thumb_list {margin-left:-50px!important; clear: left; float: left; display: inline}
.thumb_list li {display: inline; list-style-type: none!important}
.thumb_list li a {margin-left: 50px}
.thumb_list li a, a.thumb_link {float: left; display: inline; width: 180px; height: 180px; text-align: center; text-decoration: none; font-family: Futura, "Century Gothic Bold", Lucida Sans Unicode, "Century Gothic", AppleGothic, sans-serif}
.thumb_list li a:hover, a.thumb_link:hover {text-decoration: underline }
.thumb_list li a:hover img, a.thumb_link:hover img {-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3)}
.thumb_list li img, a.thumb_link img {display: block; margin-bottom: .4em}
 #species_description {float: left; width: 410px; margin-right: 50px}
#content h1.latin {padding-bottom: 1em}
#content h2.latin {font-style: italic; font-size: 1.2em; padding: .6em 0 1em 0em!important; color: #555}
#species_description h3 {margin: 1em 0 .2em; font-size: 1.1em; font-weight: bold}
#species_description .sighting_chart {margin: 1em 0 .5em}
#species_description .sighting_chart p {font-size: 1em; font-style: italic; text-align: center; color: #555}
table.sightings {margin: .5em 0 .5em}
table.sightings td a {text-decoration: underline}
table.sightings td, table.sightings th {padding: 3px 6px 4px 6px}
table.sightings th {background-color:#efefe0; color: #6f6f67; font-weight: normal; text-align: left; padding: 3px 4px}
table.sightings td.clk {font-weight: normal}
table td.cntr {text-align: center}
table.sightings td.nolink a {text-decoration: none}
table.sightings td.nolink a:hover {text-decoration: underline}
#species_nav {float: right; width: 400px; margin: 0em 0 3em 0}
#species_nav h3 {font-size: 1.1em}
#species_nav h3 a {padding: .3em; color: #333; display: inline-block;  vertical-align: middle}
#species_nav h3 a:hover {background-color: #eee}
#insect_images {float: right; z-index: 5}
#insect_images .insect_image {margin: 0 0 20px 0; position: relative; z-index: 5}
.annotation_wrapper {position: relative}
.annotated_image {position:absolute;left:0;top:0;z-index: 0}
.svg_target {position:absolute; left:0; top:0; z-index: 500}
.insect_image span.zoom {width: 35px; height: 0; display: block; overflow: hidden; padding-top: 35px; position: absolute; top: 0; right: 0; margin: -11px -11px 0 0; z-index: 80; background: url('/stylesheets/art/zoom-icon.png') top right no-repeat}
#insect_images .insect_image p {width: 390px; padding: 3px 5px 0; text-align: center; font-size: 1em}
.insect_image p.caption {margin-bottom: 0!important}
.insect_image p.location {font-style: italic; color: #666}
.insect_image a span.zoom {opacity: .4}
.insect_image a:hover span.zoom {opacity: 1}
#insect_images .insect_image .species_image {z-index: 0; position: relative}
#lightbox {position: fixed; float: left; bottom: 0; left: 0; width: 100%; height: 80px; background: url(/stylesheets/art/50-per-black.png); padding: 8px 10px 7px 10px; border-top: 1px solid #444; z-index: 101}
#lightbox.hovered {background: url(/stylesheets/art/30-per-black.png)}
#lightbox h4 {position: absolute; color: #eee; width: 120px; left: 14px; top: 10px; height: 0; overflow: hidden; padding-top:25px; background: url(/stylesheets/art/lightbox_logo.png) top left no-repeat}
#lightbox.open {border: none; background: none}
#lightbox.open h4, #lightbox.open #lb_thumbs {display: none}
#lightbox a#lb_view {position: absolute; width: 82px;padding-top: 24px; height: 0; overflow: hidden; background: url(/stylesheets/art/open_lightbox.png) top left no-repeat; left: 12px; top: 59px; z-index: 800}
#lightbox a#lb_view:hover {background-position: -91px 0}
#lightbox.open a#lb_view {background-position: 0 -33px}
#lightbox.open a#lb_view:hover {background-position: -91px -33px}
#lb_open_tray {position: fixed; bottom: 0; right: 0; height: 0; overflow: hidden; width: 110px; padding-top: 25px; background: #646463 url(/stylesheets/art/open_tray.gif) 7px 4px no-repeat; z-index: 101}
#lb_open_tray.open {background-position: -109px 4px}
#lightbox #lb_thumbs {float: left; margin-left: 110px}
#lightbox #lb_thumbs img {margin-left: 10px; border: 1px solid #444}
#lb_thumbs p {height: 0; overflow: hidden; width:225px; padding-top: 45px; margin-top:20px; background: url(/stylesheets/art/no_images_caption.png) left top no-repeat}
#lb_wrapper {position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: url(/stylesheets/art/80-per-black.png); z-index: 100; text-align: center}
#lb_wrapper #lb_images {margin: 0 auto; overflow: auto}
#lb_wrapper #lb_images div {float: left; margin-right: 10px; text-align: center}
#lb_wrapper #lb_images p {color: #eee; text-align: center; padding: .4em 0; font-weight: bold}
#lb_wrapper_close {position: absolute; bottom: 0; left: 0; background-color: #333; color: #eee; padding: 3px 3px 2px 2px; text-decoration: none; font-size: 1.1em}
 .search_results_species li {float: left; clear: left; list-style-type: none!important}
.search_results_species h4 {margin-bottom: .5em}
.search_results_species div {margin-left: 210px}
 #linegraph {width: 500px; height: 300px; float: left}
ol#year_toggles {width: 200px; float: left; width: 6em}
ol#year_toggles li {list-style-type: none; margin: 0 0 .5em 0; float: left; clear: left}
#year_toggles a {display: block; float: left; width: 3em; text-align: center; clear: left; padding: .2em .4em; text-decoration: none; border: 2px solid #fff}
#year_toggles a.shown {background-color: #eaefea}
 #footer {background: url(/stylesheets/art/footer.png) top center no-repeat; margin: 0 auto 0; width: 940px; padding: 35px 17px 20px}
#footer p {text-align: center}
 form p {margin: .5em 0; clear: both}
label {color: #666}
form label {display: block; line-height: 1.1em}
form label.checkbox_label {display: inline; vertical-align: middle}
input.checkbox, input.radio {vertical-align: middle; margin: 0 .3em 0 0!important}
input.text, textarea {margin: 1px; padding: 2px; border: 1px solid #999}
input.required, textarea.required {background: #fff url('/stylesheets/art/required.gif') center right no-repeat}
input.text:focus, textarea:focus {padding: 1px; border: 2px solid #6FADDF}
textarea:focus {padding: 3px}
input.openid {background: #fff url('/stylesheets/art/openid_small_logo_white.gif') center left no-repeat; padding: 3px 3px 3px 20px}
a.openid {background: #fff url('/stylesheets/art/openid_small_logo_white.gif') center left no-repeat; padding-left: 20px}
input.openid:focus {padding: 2px 2px 2px 20px}
textarea {font-size: 1em; font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif; padding: 4px}
textarea.code {font-family: Monaco,"Courier New",Courier,monospace; font-size: .9em}
input.invalid {background-color: #fcc; border-color: #844}
p.invalid {color: #a00; font-weight: bold}
.big_field input {font-size: 1.3em; font-weight: bold}
.medium_field input {font-size: 1.1em; font-weight: bold}
.col1, .col2, .col3 {margin:0.5em 0}
.col1 {float: left; clear: left; padding-right: 1em}
.col2 {float: left; clear: none; padding-right: 1em}
.col3 {float: left; clear: none; padding-left: 3em}
.form_section {clear: both; padding: 1em 0 0 0}
.validation-error {color: #a33; font-weight: bold}
.flash {padding: 8px; margin-bottom: 1em; border: 1px solid #ccc; float: left}
#flash_notice, #flash_error {background-color: #FFC2BC}
.button {display: block; border: 1px solid #DCE4B0; padding: 30x; background-color: #DCE4B0; padding: 5px 6px; color: #222!important; font-family: Futura, "Century Gothic", AppleGothic, sans-serif; font-size: 1em}
.button:hover {border: 1px solid #666; background-color: #BDCC6A; color: #000!important}
a.button {display: block; float: left; margin-bottom: 1em; text-decoration: none}
a.feed {background: url('/stylesheets/art/feed-icon-14x14.png') 1px center no-repeat; padding-left: 24px}
a.twitter {background: url(http://twitter-badges.s3.amazonaws.com/t_mini-a.png) 0 center no-repeat; padding-left: 24px}
.sidebar .recent {margin-top: 1em}
 table.data {border-collapse: collapse; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; min-width: 500px}
table.full {width: 100%}
table.data th {background-color:#DDDDDD; color: #444; font-weight: normal; text-align: left; padding: 3px 4px}
table.data .subhead th {background-color: #fff; color: #666; padding-top: .8em; text-transform:uppercase}
tr.deleted_row td {text-decoration: line-through}
table.data td {padding: 3px 4px 4px 4px}
table.extraspace {width: 95%}
table.extraspace td {padding: 3px 8px 4px 3px}
table.data tr:hover td {background-color: #ffc; cursor: pointer}
td.clk {font-weight: bold;  }
td.clk span {color: #a44; padding: 0 .1em}
td.clk a {text-decoration: none}
td.right {text-align: right}
 #re_search {margin: 1em 0 2em}
 div.autocomplete {margin:0px; padding:0px; width:250px; background:#fff; border:1px solid #888; position:absolute}
div.autocomplete ul {margin:0px; padding:0px; list-style-type:none}
div.autocomplete ul li.selected {background-color:#ffb}
div.autocomplete ul li {margin:0; padding:3px 2px; display:block; list-style-type:none; cursor:pointer; font-size: .95em}
 .main .pagination {margin: .3em 0 .2em; float: right}
.main .pagination .disabled {color: #999}
.main .pagination .current {font-weight: bold}
.pagination {background: white;  }
.pagination a, .pagination span {padding: .2em .5em; display: block; float: left; margin-right: 1px; text-transform: lowercase}
.pagination span.disabled {color: #999; border: 1px solid #fff}
.pagination span.current {font-weight: bold; background: #2E6AB1; color: white; border: 1px solid #2E6AB1}
.pagination a {text-decoration: none; color: #105CB6; border: 1px solid #D6E6FF}
.pagination a:hover, .pagination a:focus {color: #555; border-color: #88a}
.pagination:after {content: "."; display: block; height: 0; clear: both; visibility: hidden}
* html .pagination {height: 1%}
*:first-child+html .pagination {overflow: hidden}
 #sighting_table {margin-top: 2em}
#sighting_table td {vertical-align: top; padding: 10px 5px 10px; border-bottom: 1px solid #eee}
#sighting_table td p, #sighting_table td li {font-size: 1em}
#sighting_table td.date {padding-right: 10px}
#sighting_table .sdatebox {width: 2.7em; display: block; font-family: Futura, "Century Gothic", AppleGothic, sans-serif; text-decoration: none}
#sighting_table .sdatebox span {display: block; text-align: center }
#sighting_table .sdatebox:hover .smonth, #sighting_table .sdatebox:hover .sdate {background-color: #888}
#sighting_table .sdatebox:hover .syear {}
#sighting_table .sdatebox .smonth {background-color: #aaa; text-transform: uppercase; color: #fff; font-size: .9em}
#sighting_table .sdatebox .sdate {font-size: 1.6em; background-color: #aaa; color: #fff; line-height: 1.1em; margin-top: -.15em}
#sighting_table .sdatebox .syear {background-color: #eee; color: #888; font-size: .9em}
#sighting_table td.sighting_details {width: 290px}
#sighting_table td.sighting_details h4 {font-size: 1.25em}
#sighting_table .comments {font-style: italic; margin: .5em 0}
#sighting_table td.species_list {width: 200px}
#sighting_table .species_list ul {line-height: 1.2em}
#sighting_table .species_list a {text-decoration: none}
#sighting_table .species_list a:hover {text-decoration: underline}
#sighting_table .species_list span {color: #777; margin-left: .2em}
#sighting_table .species_list ul li {margin: 0 0 0.1em 0}
#sighting_table .insect_image {margin: 0 5px 0 0; height: 106px; width: 96px; position: relative; float: left}
#sighting_table .insect_image p {width: 96px; text-align: center; font-size: .85em; line-height: 1.2em; padding-top: .2em}
#sighting_archive {margin-top: 1em}
#sighting_archive ul {float: left; width: 80px; margin: 0 0 1em 8px; line-height: 1.3em}
#sighting_archive h4 {clear: left; font-size: 1.15em; margin-bottom: .3em}
#sighting_archive li {clear: left}
#sighting_archive li a, #sighting_archive li strong {width: 2.5em; display: block; float: left}
#sighting_archive li em {float: left; font-style: normal!important; color: #777; width: 2em; text-align: right}
 #recent_sighting_list h5 {margin: 0; font-size: 1.1em}
#recent_sighting_list ul {margin: 0 0 .6em 0}
#recent_sighting_list ul li {font-size: 1em}
 .user_species_list h4 {font-size: 1.2em; font-weight: normal; font-style: italic}
.user_species_list ul {margin: .3em 0 .5em 1em!important}
.user_species_list li {margin: 0!important; list-style-type: none; font-size: 1em!important}
 #new_sighting .form_section {background-color: #eef; overflow: auto; padding: .3em .5em!important}
#sighting_species_list li {margin: 0}
#sp_selector {float: left; position:relative; height: 55em; padding-top: 10px}
#sp_selector input {border: 1px solid #aaa; margin-bottom: 3px}
#sp_selector input:focus {background-color: #eef}
#sp_selector label {padding: 2px; display: inline}
#sp_selector label:hover {background-color: #eee}
ul#sp_selector li {line-height: 1.3em; font-size: 1em}
ul#sp_selector, ul#sp_selector ul, ul#sp_selector li {list-style-type:none; margin:0; padding:0}
ul#sp_selector, ul#sp_selector li {width:190px}
ul#sp_selector li ul li ul li {width: 220px}
ul#sp_selector ul, ul#sp_selector ul li {width:190px}
ul#sp_selector a {padding: 2px}
ul#sp_selector ul {top:0px; left:-2000px; position:absolute}
ul#sp_selector li.open ul {background: url('') no-repeat top left; top:0px; left:190px; position:absolute}
ul#sp_selector li.open li ul {top:0px; left:-2000px}
ul#sp_selector li.open ul li.open ul {background: url('') no-repeat top left; left: 190px!important; width: 210px}
#sp_selector li.open a, #sp_selector li.open ul li.open a {background: #eee url('/stylesheets/art/sp_arrowon.gif') no-repeat 95% 50%; padding-right:16px; display:block; text-decoration: none; font-weight: bold}
#sp_selector li.open li a {background: url('/stylesheets/art/sp_arrow.gif') no-repeat 100% 50%; display:inline; text-decoration: underline; font-weight: normal}
#sp_selector li a {background: url('/stylesheets/art/sp_arrow.gif') no-repeat 100% 50%; padding-right:16px; padding-left:0px}
#sp_selector input {width: 1.5em; margin-right: .1em; font-size: 90%; padding: 1px}