/* ----------layout resets-------------- */
h1,h2,h3,h4,pre,p,ul,li {
	margin: 0px;
	padding: 0px;
}

/* ----------basic layout-------------- */
body {
	background-color: #fff;
	font-size: 13px;
	padding: 0px;
	margin: 0px;
	font-family: "Lucida Grande", "Lucida Unicode", Arial, Verdana, sans-serif;
	color: #000000;
	behavior:url(csshover.htc);
}

fieldset {
border: none;
}

a, a.like {
	color: #0099ff;
	text-decoration: none;
}

a:visited, a.like:visited {
	color: #0099ff;
	text-decoration: none;
}

a:hover {
	color: #0099ff;
	text-decoration: underline;
}

a:active {
	color: #0099ff;
}

h1,h2,h3,h4 {
	margin: 0px 0px 3px 0px;
	padding: 0px;
}

.clearer {
	clear: both;
	height: 5px;
	margin: 0px;
	padding: 0px;
}

.padout {
	margin: 0px 0px 10px 0px;
}

.smalltext {
	font-size: 0.9em;
}

.bigtext {
	line-height: 1.4em;
	font-size: 2em;
	text-align: center;
}

img {
	border: none;
}

img.creatureImage {
	border:1px solid #CCCCCC;
}

.crumb {
    margin: -8px 0px 10px 0px;
    font-size: 1em;
}


/* ----------container to center the layout-------------- */
#container {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}

/* ----------banner for logo-------------- */
#banner {
	background-color: #3688c1;
	padding: 0px;
	margin: 0px;
}

#banner #banner-content {
	margin-left: auto;
	margin-right: auto;
	width: 900px;
	text-align: right;
}

/* ----------header for logo/search-------------- */
#header {
	border-bottom: 2px solid #3489C2;
	background-color: #0f0000;
	/*    background-image: url('/images/layout/header-bg.jpg');
    background-repeat: repeat-x; */
	padding: 0px;
	margin: 0px 0px 5px 0px;
	height: 90px;
}

#header #header-content {
	margin-left: auto;
	margin-right: auto;
	width: 940px;
	height: 100%;
}

#header #header-content #display #nav_links {
	float: right;
	height: 100%;
	vertical-align: bottom;
	clear: right;
	list-style: none;
	display: block;
	text-align: center;
	margin: -32px 0 0 0;
	font-size: 75%;
	padding: 0;
}

#header #header-content #display #nav_links li, #header #header-content #display ul#nav_links li ul li {
	margin: 0 0 0 5px;
	float: left;
	position: relative;
	text-transform: uppercase;
	font-weight: bold;
}

#header #header-content #display ul#nav_links li a {
	line-height: 30px;
	display: block;
	height: 30px;
	width: 80px;
	color: #999;
	background: #454545;
	text-shadow: #222 0 1px 1px;
}

#header #header-content #display #nav_links li a:hover {
	color: #CCC;
	background: #333;
}

#header #header-content #display #nav_links li.current a, #header #header-content #display #nav_links li.current a:hover {
	color: #888;
	text-shadow: none;
}

#header #header-content #display #nav_links .exit {
	background: #AFDA42;
	color: #000;
}

/** Drop down links **/
#header #header-content #display #nav_links li ul {
	display: none;
	position: absolute;
	margin: 2px 0px 0px -25px;
	width: 150px;
	list-style: none;
}

#header #header-content #display #nav_links li ul a {
    width: 320px;
	height: 100%;
	text-align: left;
	padding-left: 10px;
	padding-right: 4px;
}

#header #header-content #display #nav_links li ul .small {
    width: 150px;
}

#header #header-content #display #nav_links li>ul {
	top: auto;
	left: auto;
}

#header #header-content #display #nav_links li:hover ul, li.over ul {
	display: block;
}

#header #header-content #display #nav_links li ul li {
	margin: 0px 0px 0px -25px;
	padding: 0px;
}


#header #header-content #logo {
	width: 100%;
	height: 100%;
	margin-left: -10px;
}

#header #header-content #logo #searchbox {
	float: right;
	width: 400px;
	margin-top: 17px;
	text-align: right;
}

/* -----------------content--------------------- */
#content,#galleryContent {
	float: left;
	background-color: #ffffff;
	padding: 0px;
	width: 680px;
	margin: 0px auto;
}

#content {
	min-height: 500px;
}

.wide-content {
	margin-left: auto;
	margin-right: auto;
	padding-top: 5px;
	width: 980px;
}

.div700 {
	width: 550px;
	text-align: justify;
}

#twocol-left {
    float: left;
    background-color: #ffffff;
    padding: 0px;
    min-height: 500px;
    width: 350px;
    margin: 0px auto;
}

#twocol-right {
    float: right;
    background-color: #ffffff;
    padding: 0px;
    min-height: 500px;
    width: 480px;
    margin: 0px auto;
}

#twocol-leftsmall {
    float:left;
    background-color: #ffffff;
    padding: 0px;
    min-height: 200px;
    width: 320px;
    margin: 0px;
    clear:none;
}

#twocol-rightsmall {
    float:right;
    background-color: #ffffff;
    padding: 0px;
    min-height: 200px;
    width: 320px;
    margin: 0px;
    clear:none;
}

/* --------------right navi------------- */
#right {
	float: left;
	width: 300px;
	margin: 0px;
	padding: 0px;
}

#right .squarebox_gray {
	background-color: #FFFDE5; /**#EEF5FC; **/
	width: 260px;
	min-height: 100px;
	padding: 10px;
	margin: 5px auto 5px auto;
    -webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	border: 2px solid gray;
}

#right .squarebox_gray li {
	margin: 0px 0px 1px 0px;
	padding: 0px 20px 2px 20px;
	list-style: none;
	width: 85px;
	float: left;
	font-size: 0.9em;
}

/* ------------ Avatar Settings ----------- */
#right .squarebox_gray .avatar {
	display: block;
	margin: auto;
	border: 1px solid #f4f4f4;
	width: 80px;
	height: 80px;
}

#right .squarebox_gray img.center {
	   display: block;
	margin: auto;
	border: 1px solid #f4f4f4;
}

/* ----------- Page Control Elements --------- */
.pagecontrols {
	margin-right: 5px;
	float: right;
	text-align: left;
}

/* ------------ Display elements for comments/boxie stuff ----------- */
.speechtopbox {
	padding: 4px;
	border: 4px solid #EDEDED;
}

/* ----------- Signup Form ---------------- */
.largeform {
	margin: 15px 0px 0px 0px;
}

.largeform label {
	display: block;
}

.largeform div {
	margin: 8px;
}

.largeform input {
	width: 280px;
	padding: 3px;
	border: 1px solid #cecece;
    background:none repeat scroll 0 0 #E2E8F6;
}



.largeform input:focus,.largeform textarea:focus,.largeform select:focus
{
    border:1px solid #0099FF;
    color:#000;
}

.largeform textarea,.largeform select {
	padding: 3px;
	border: 1px solid #cecece;
}

.largeform select {
	width: 286px;
}

.largeform input[type="checkbox"] {
	margin-left: 10px;
	width: auto;
}

.largeform .inputselect {
	width: 180px;
}

.largeform .smallSelect {
	width: 141px;
}

.largeform .inline {
	display: inline;
}

.largeform .button, .largeform .smallbutton, .search_button {
	background-color: #0099FF;
	padding: 5px;
	font-weight: bold;
	color: #fff;
	cursor: pointer;
	border: 0;
}

.largeform .smallbutton {
    width: 150px;
    padding: 4px;
}

.largeform .smallredbutton {
    background-color: #ff6600;
    width: 150px;
    padding: 4px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    border: 1px solid #fff;
    
}

.largeform input[type="file"] {
    width: 200px;
}

.search_button {
	padding: 2px;
}

/* -------------- List styles ---------------- */
ul {
	list-style-type: circle;
	padding-left: 20px;
	margin: 4px 4px 10px 4px;
}

li {
	padding: 2px;
}

/* ------------- Custom Container sizes ---------- */

.index_recent_fish {
    margin: 4px 8px 4px 4px;
    padding: 3px 3px 3px 3px;
    width: 90%;
    clear: both;
    height: 40px;
}

.index_recent_fish img {
    float: left;
    border: 1px solid #FFFFFF;
    width: 35px;
    height: 35px;
    margin-right: 5px;
}

/* -----------footer--------------------------- */
#footer {
	clear: both;
	margin: 0px;
	padding: 20px 0px 5px 0px;
	text-align: right;
	width: 100%;
	background-color: #222222;
	min-height: 50px;
	font-size: 12px;
	color: #75a4bb;
}

#footer .copyrightText {
	text-align: center;
	color: #999;
	font-size: 0.9em;
	margin-top: 5px;
}

#footer .box {
	width: 200px;
	float: left;
	margin-right: 20px;
	z-index: 99;
}

#footer .about-box {
	width: 300px;
	text-align: left;
	float: right;
	border-left: 1px solid #323232;
	padding-left: 8px;
}

#footer .about-box h2,#footer .box h2 {
	background: none;
	margin: 0px;
	padding: 0px;
	color: #bbbbbb;
	font-size: 15px;
	height: 100%;
}

#footer .about-image {
	float: right;
	border: 1px solid #323232;
	margin-top: 20px;
	margin-left: 3px;
	margin-bottom: 3px;
}

#footer .box li {
	float: right;
	margin: 0px 0px 1px 0px;
	padding: 0px 0px 2px 0px;
	list-style: none;
	width: 140px;
	border-bottom: 1px solid #323232;
}

#footer .about-box a,#footer .box a {
	color: #a5be0e;
	text-decoration: none;
}

#footer .about-box a,#footer .box a:visited {
	color: #a5be0e;
	text-decoration: none;
}

#footer .about-box a,#footer .box a:hover {
	color: #a5be0e;
	text-decoration: underline;
}

#footer .about-box a,#footer .box a:active {
	color: #a5be0e;
}

/******* GENERAL RESET *******/
h1 {
	font-weight: 700;
	font-size: 1.7em;
	width: 94%; /**500px**/
	background: url("http://images.whatsthatfish.com/layout/headerTitles.png") no-repeat scroll left 26px transparent;
	margin:0 0 15px;
	padding:0 0 18px;
}

h2 {
    background: url("http://images.whatsthatfish.com/layout/headerTitles.png") no-repeat scroll left -92px transparent;
    margin:0 0 4px;
    padding:0 0 12px;
    width: 94%;
}

#content h2, #wide-content h2 {
	margin: 15px 0 15px 0;
	font-weight: 700;
	font-size: 1.7em;
	width: 94%; /**300px;**/
	font-weight: normal;
}

#right h2 {
    background: url("http://images.whatsthatfish.com/layout/headerTitles.png") no-repeat scroll left -38px transparent;
}

.largeform input.error {
	background: #f8dbdb;
	border-color: #e77776;
}

.largeform div span {
	margin-left: 10px;
	color: #b1b1b1;
	font-size: 11px;
	font-style: italic;
}

.largeform div span.error {
	color: #e46c6e;
}

.largeform #send :hover {
	background: #79a7f1;
}

.hidden {
	display: none;
}

/****** Flash Messenger Box ******/
#flashMessenger {
    background-color: #EDF7FF;
    margin: 5px;
    border: 1px solid #80B2E0;
    padding: 9px;
    width: 930px;
}

/***** Tag Cloud *****/
.tag_cloud {
	padding: 5px 5px 5px 5px;
	line-height: 1.5em;
	font-weight: 500;
	text-decoration:underline;
}

#tag_cloud {
    text-transform: capitalize;
}
#tag_cloud a {
    padding: 0px;
    margin: 0px;
}

/**** Remove tags  ****/
.tag_remove {
	margin: 0px;
	position: relative;
	list-style-type: none;
	font-size: 1em;
	overflow: hidden;
}

.tag_remove .tag {
	background-color: #FeF4F1;
	margin: 5px 10px 5px 0px;
	float: left;
	padding: 5px;
	list-style-position: inside;
	line-height: 1.6em;
	vertical-align: middle;
	width: auto;
}

.tag_remove .tag p {
	display: inline;
}

.tag_remove .tag img {
	vertical-align: middle;
	border: none;
}

.tag_remove .tag strong {
	color: #e46c6d;
}

/** Image gallery and previews **/
#preview {
	position: absolute;
	border: 1px solid #ccc;
	background: #333;
	padding: 5px;
	display: none;
	color: #fff;
}

#browse_gallery {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 20px;
}

#browse_gallery li {
	list-style: none;
	float: left;
	display: inline;
	margin-right: 15px;
	margin-bottom: 10px;
}

#browse_gallery img {
	border: 2px solid #eee;
}

/** Tag navigation **/
#tagNav {
	float: right;
	margin-right: 310px;
	margin-top: 6px;
}

#tagNav a {
	margin: 0px 0px 2px 4px;
	background-color: #eee;
	text-decoration: none;
	color: #000;
	font-weight: bold;
	padding: 6px 6px 6px 6px;
}

/** AutoCompletion **/
.ac_results {
	padding: 0px;
	border: 1px solid black;
	background-color: white;
	overflow: hidden;
	z-index: 99999;
}

.ac_results ul {
	width: 100%;
	list-style-position: outside;
	list-style: none;
	padding: 0;
	margin: 0;
}

.ac_results li {
	margin: 0px;
	padding: 2px 5px;
	cursor: default;
	display: block;
	/* 
    if width will be 100% horizontal scrollbar will apear 
    when scroll mode will be used
    */ /*width: 100%;*/
	font: menu;
	font-size: 12px;
	/* 
    it is very important, if line-height not setted or setted 
    in relative units scroll will be broken in firefox
    */
	line-height: 16px;
	overflow: hidden;
}

.ac_loading {
	background: white url('indicator.gif') right center no-repeat;
}

.ac_odd {
	background-color: #eee;
}

.ac_over {
	background-color: #0A246A;
	color: white;
}

/* Comments */
#commentsBox {
	width: 600px;
}

/* Comments (comment) */
#commentsBox .comment p {
	padding: 0;
}

#commentsBox .comment small {
	font-size: 10px;
	margin-top: -2px;
}

#commentsBox .comment {
	margin-bottom: 14px;
	width: 100%;
}

#commentsBox div {
	padding: 0px;
    margin: 0px;
}

#commentsBox .comment .col-left {
	width: 110px;
	margin: 0 7px 0 10px;
	overflow: hidden;
}

#commentsBox .comment .col-left img {
	border: #EDEDED 5px solid;
}

#commentsBox .comment .col-left p {
	padding: 0 0 0 2px;
	line-height: 19px;
}

#commentsBox .comment .col-right {
	width: 420px;
	min-height: 88px;
	background: #fff;
	padding: 10px;
	border: #EDEDED 5px solid;
	float: right;
	line-height: 100%;
	position: relative;
}

#commentsBox .comment .col-right .likeComment span {
	background: transparent url("http://images.whatsthatfish.com/icons/like.png") no-repeat 0% 50%;
	padding: 3px 0px 3px 25px;
    color: green;
}

#commentsBox .comment .col-right .likeComment {
    vertical-align: text-bottom;
    bottom:0px;
    position:absolute;
    text-align: right;
    float: right;
    width: 96%;
    height: 20px;
}

* html #commentsBox .comment .col-right {
	height: 100px;
}

/* Comment form */
#commentForm {
	width: 600px;
	padding: 0px;
	margin: 0px;
}

#commentForm dl dd {
    margin: 0px;
    padding: 0px;
}

#commentForm dl dd .columnLeft {
    border: 0px;
    width: 200px;
    padding: 0px;
    margin: 0px;
    float: left;
}

#commentForm dl dd .columnRight {
	width: 370px;
	float: right;
	padding: 0px;
	margin: 0px;
	border: 0px;
}

#commentForm textarea {
	width: 345px;
	height: 170px;
	margin-bottom: 10px;
	margin-top: 0px;
	padding: 0px;
}

#commentForm input {
	width: 200px;
	margin-bottom: 10px;
}

/** remove padding on zend forms **/
dl.zend_form {
	padding: 0px;
	margin: 0px 0px 15px 0px;
}

/** remove padding on radio buttons **/
dd#attrs-element {
	padding: 0px;
	margin: 0px;
}
		
.yellowbox {
	background-color: #FFFDE5;
	width: 300px;
	padding: 10px;
	margin: 10px auto;
	text-align: center;
	font-weight: bold;
}

#messageHead {
    color: #000;
  background-color: #DFF2BF;
 /* background-image:url('success.png'); */
    width: 100%;
    padding: 5px 0px 5px 0px;
    margin: -5px 0px 0px 0px;
    border-bottom: 2px solid #4F8A10;
  background-repeat: no-repeat;
  background-position: 10px center;
  font-size: 1.1em;
}

#messageHead p {
	padding-left: 15px;
}

.middlealign {
	width: 260px;
	margin: 15px auto;
}

/* ---- Ad Box / social ----- */
.advertisement {
	width: 200px;
	margin: 0 auto 15px auto;
	border: 1px solid #EEEEEE;
	padding: 25px 20px 0 20px;
}

.advertisement img {
	display: block;
	margin: 0 auto;
	padding-bottom: 25px;
}

.advert_text {
	color: #77778E;
	margin: 0 auto;
	text-align: center;
}

.sociable-hovers {
	opacity: .4;
	-moz-opacity: .4;
	filter: alpha(opacity = 40);
}

.sociable-hovers:hover {
	opacity: 1;
	-moz-opacity: 1;
	filter: alpha(opacity = 100);
}

/* ------ ERROR PAGE ------ */
.siteErrorPage {
	width: 520px;
	margin: 0 auto;
}

.siteErrorPage .errortitle {
	font-weight: 700;
	font-size: 2em;
	text-align: center;
	border: none;
}

.siteErrorPage p {
	margin: 5px 0 0 0;
	font-size: 1.2em;
	text-align: center;
}

/* ------ PAGINATION CONTROLS ------ */
.paginationControls {
	margin: 0px auto 10px auto;
	padding: 0px;
}

.paginationControls p {
	text-align: center;
	padding: 0px;
}

.paginationControls p span {
    font-size: 11px;
    padding: 3px 4px;
    border: 1px solid #e5e5e5;
    background-color: #fff;
    height: 22px;
}

.paginationControls p span.currentPage {
    color: #444;
    font-weight: bold;
}

.atozPagination {
	margin-right: 0;
	margin-left: 0;
	text-align: left;
}

.atozPagination p span {
	font-size: 14px;
	margin: 2px;
}
	

/* --------- TABULAR DATA ------------ */
#tabular table {
 background-color:#fff;
 border-collapse: collapse;
 width: 100%;
}
#tabular thead th {
 border-right: 1px solid #fff;
 color:#fff;
 text-align:center;
 padding:2px;
 text-transform:uppercase;
 height:25px;
 background-color: #a3c159;
 font-weight: normal;
}
#tabular tfoot {
 color:#1ba6b2;
 padding:2px;
 text-transform:uppercase;
 font-size:1.2em;
 margin-top:6px;
 border-top: 6px solid #e9f7f6;
}
#tabular tbody tr {
 background-color:#fff;
 border-bottom: 1px solid #f0f0f0;
}
#tabular tbody tr .alt td {
 background-color:#EEEEFF;
}
#tabular tbody td {
 color:#414141;
 padding:5px;
 text-align:left;
}
#tabular tbody th {
 text-align:left;
 padding:2px;
}
#tabular tbody td a, tbody th a {
 color:#6C8C37;
 text-decoration:none;
 font-weight:normal; 
 display:block;
 background: transparent url(http://images.whatsthatfish.com/icons/links_yellow.gif) no-repeat 0% 50%;
 padding-left:15px;
}
#tabular tbody td a:hover, tbody th a:hover {
 color:#009193;
 text-decoration:none;
}

/* Color Tags */
.color_red a, .color_blue a, .color_brown a, .color_black a, .color_cream a, .color_gold a, .color_gray a, .color_green a, .color_orange a, .color_pink a, 
	.color_purple a, .color_silver a, .color_white a, .color_yellow a, .color_violet a, .color_mauve a, .color_lavender a, .color_lilac a {
    padding: 5px;
    font-weight:bold;
}

.color_blue a {
    color: #3259FA;
}
.color_lilac a {
    color: #602347;
}
.color_lavender a {
    color: #736DC6;
}
.color_mauve a {
    color: #630A91;
}
.color_violet a {
    color: #D182E6;
}
.color_red a {
    color: #C60006;
}
.color_brown a {
	color: #995216;
}
.color_black a {
    color: #000000;
}
.color_cream a {
    color: #DBCF1F;
}
.color_gold a {
    color: #E5AF2A;
}
.color_gray a {
    color: #8B847C;
}
.color_grey a {
    color: #8B847C;
}
.color_green a {
    color: #90FE3D;
}
.color_orange a {
    color: #E4AA27;
}
.color_pink a {
    color: #D606DD;
}
.color_purple a {
    color: #8149A6;
}
.color_silver a {
    color: #DBDBDB;
}
.color_yellow a {
    color: #E1FE3B;
}

.roundCorners {
	-webkit-border-radius: 22px;
	-moz-border-radius: 22px;
	border-radius: 22px;
}

#sitesearch {
    border:1px solid #CECECE;
    color:#949494;
    padding:2px;
    width:175px;
}

#sitesearch:focus {
    border:1px solid #0099FF;
    color:#000;
}

.jargonToolTip {
    border-bottom: 1px dotted #0099ff;
}

.tooltipStyle {
	max-width: 400px;
}

/** Search results headings and not found errors **/
div#searchResultHead {
    width: 90%;
    background-color: #051D42;
    height: 20px;
    padding: 4px;
    font-size: 1.4em;
    font-weight: bold;
    color: #fff;
    margin: 10px 0 10px 0;
}
div.noResults {
    margin: 10px;
    font-size: 1.2em;
}
form.paypal {
	margin-top: 10px;
	padding-top: 10px;
	width: 100%;
	margin: 0 auto;
	text-align: center;
}