pre { background: #FFFEC2; font-size: 14px; border: 1px solid #E8CC5A; padding: 15px; margin: 10px;}

/* Page title */

#page-title { background: #5c4702 url('../images/library/bg_page_title.png') repeat 0 0; }



/* Button */

.btn { float: left; position: relative; width: 100%; height: 30px; margin: 0 0 22px; padding: 0; font: 15px/30px 'questrialregular', sans-serif; color: #5c4702; text-transform: uppercase; text-align: center; /*background: url('../images/library/btn.png') repeat-x 0 0;*/ text-decoration: none !important;

background:-webkit-gradient(linear, left top, left bottom, from(#bfd226), to(#90b100));

background:-webkit-linear-gradient(top, #bfd226, #90b100);

background:   -moz-linear-gradient(top, #bfd226, #90b100);

background:	   -ms-linear-gradient(top, #bfd226, #90b100);

background:	    -o-linear-gradient(top, #bfd226, #90b100);

background:		   linear-gradient(top, #bfd226, #90b100);

-webkit-box-shadow: inset -1px -1px 1px #bccf66;

        box-shadow: inset -1px -1px 1px #bccf66; }

.btn:hover { /*background-position: 0 100%;*/

background:-webkit-gradient(linear, left top, left bottom, from(#90b100), to(#bfd226));

background:-webkit-linear-gradient(top, #90b100, #bfd226);

background:   -moz-linear-gradient(top, #90b100, #bfd226);

background:	   -ms-linear-gradient(top, #90b100, #bfd226);

background:	    -o-linear-gradient(top, #90b100, #bfd226);

background:		   linear-gradient(top, #90b100, #bfd226); }

.btn:active { margin: 2px 0 20px;}

.btn em { position: absolute; width: 30px; height: 28px; top: 0; left: 0; background: transparent url('../images/library/baloon.png') no-repeat 0 0; }



/* Button quiz */

.btn.btn-quiz { height: 34px; margin: 7px 0 2px; font: 18px/34px 'questrialregular', sans-serif; /*background: #ead300 url('../images/library/find_retailer.png') repeat-x 0 0;*/

background:-webkit-gradient(linear, left top, left bottom, from(#eeda00), to(#e1c000));

background:-webkit-linear-gradient(top, #eeda00, #e1c000);

background:   -moz-linear-gradient(top, #eeda00, #e1c000);

background:	   -ms-linear-gradient(top, #eeda00, #e1c000);

background:	    -o-linear-gradient(top, #eeda00, #e1c000);

background:		   linear-gradient(top, #eeda00, #e1c000);

-webkit-box-shadow: inset -1px -1px 1px #ecd866;

        box-shadow: inset -1px -1px 1px #ecd866; }

.btn.btn-quiz:hover { /*background-position: 0 100%;*/

background:-webkit-gradient(linear, left top, left bottom, from(#e1c000), to(#eeda00));

background:-webkit-linear-gradient(top, #e1c000, #eeda00);

background:   -moz-linear-gradient(top, #e1c000, #eeda00);

background:	   -ms-linear-gradient(top, #e1c000, #eeda00);

background:	    -o-linear-gradient(top, #e1c000, #eeda00);

background:		   linear-gradient(top, #e1c000, #eeda00); }

.btn.btn-quiz:active { margin: 9px 0 0; }



/* Button facebook */

.btn.facebook em { background: transparent url('../images/library/fb_btn.png') no-repeat 0 2px; }



/* Button twitter*/

.btn.twitter em { background: transparent url('../images/library/twitter_btn.png') no-repeat 0 2px; }



/* button more */

.btn.more { float: none; clear: both; display: block; position: relative; top: 10px; margin: 0 auto 2px; max-width: 31.86%; }



/* Content */

#page-top,

#content,

#banner,

#page-title { float: left; position: relative; }

#page-top,

#content,

#banner { width: 100%; }

#content { padding: 0 0 30px; height: 100%; }



/* Banner */

#banner { overflow: hidden; }

#page-title { width: 240px; height: 233px; z-index: 1; }

#page-title h1 { position: absolute; left: 0; bottom: 0; margin: 0; padding: 0 12px 10px; font: 31px/32px 'questrialregular', sans-serif; color: #FFF; text-transform: uppercase; }

#page-title h1 span { display: block; }

#page-title.habitat h1 span { display: inline; }

#page-title h1 span em { text-transform: none; display: inline; font-style: normal; }

#banner img { position: absolute; right: 0; top: 0; height: 100%; width: auto; }



/* Breadcrumbs */

.breadcrumbs { float: left; position: relative; color: #535046; width: 70%; }

.breadcrumbs li { display: inline; }

.breadcrumbs { margin: 10px 0 20px; }

.v2 .breadcrumbs { margin: 10px 0 20px 240px; width: 50%; }

.breadcrumbs a { display: inline-block; padding: 0 15px 0 0; margin: 0 4px 0 0; height: 16px; font-size: 14px; line-height: 16px; background: url('../images/library/arrow.png') no-repeat 100% 5px; }



/* Action */

#action { float: right; position: relative; width: 220px; margin: 10px 0 20px; }

#action a.print,

#action .addthis_toolbox,

#action .addthis_toolbox a { float: left; position: relative; }

#action a.print { width: 33px; padding: 0 0 0 17px; margin: 0 15px; line-height: 16px; background: url('../images/library/ico_print.png') no-repeat 0 2px; }

#action a.print:hover { color: #D4D10F; }

#action .addthis_toolbox { width: 140px; left: 0 !important; top: 0 !important; }

#action .addthis_toolbox a { margin: 0 0 0 4px; }



/* Menu v2 */

.menu-holder { position: absolute; width: 240px; left: 0; top: 234px; z-index: 1; }

.v2 .menu,

.v2 .menu *,

.v2 article { float: left; position: relative; }

.v2 .menu { width: 240px; }

.v2 .menu li { float: left; clear: both; min-height: 20px; padding: 10px 30px 10px 15px; }

.v2 .menu li a { display: inline; line-height: 16px; }

.v2 .menu li a span { clear: both; }

.v2 .menu.double { width: 225px; padding: 0 0 0 15px; }

.v2 .menu.double ul { width: 97px; }

.v2 .menu.double li { width: 97px; clear: none; padding: 0; }

.v2 .menu.double li li { height: 36px; }

.v2 .menu.double li li a { line-height: 36px; }

.v2 .menu .top > a { background: url('../images/library/menu_arrows.png') no-repeat 0 5px; padding: 0 0 0 15px; margin: 0 0 10px -10px; }

.v2 .menu .top.open > a { background-position: 0 -23px; }

.v2 .menu .top ul { clear: both; margin: -5px 0 0; }



/* Article v2 */

article { margin: 0;}

.v2 article { margin: 0 0 0 240px; }

.v2 article ul { list-style: disc outside; padding: 0 0 0 20px; margin: 0 0 30px; }

.v2 article li { margin: 0 0 10px; }



/* Category list */

.category-list,

.category-list * { float: left; position: relative; }

.category-list { width: 100%; padding: 0; }

.category-list li { width: 23.35%; min-height: 300px; max-height: 300px; margin: 0 2.2% 20px 0; }

.category-list li:nth-child(4n+4) { margin: 0 0 20px 0; }

.category-list li .imgHolder { width: 100%; margin: 0 0 7px; }

.category-list li h4 { width: 100%; text-transform: capitalize; color: #5c4702; font-size: 18px; line-height: 20px; margin: 5px 0 4px; }

.category-list li h4 span { padding: 0 4px 0 0; }

.category-list li .desc { width: 100%; max-height: 83px; overflow: hidden; margin: 0 0 5px; color: #666; }

.category-list li .learnmore { line-height: 29px; color: #5b4702; }



/* Photo list */

.photo-list,

.photo-list * { float: left; position: relative; }

.photo-list { width: 100%; padding: 0; }

.photo-list li { width: 14.83%; margin: 0 2.2% 12px 0; }

.photo-list li:nth-child(6n+6) { margin: 0 0 12px 0; }

.photo-list li a { width: 100%; }

.photo-list li .imgHolder { overflow: hidden; }

.photo-list li .imgHolder img { }

.imgHolder .label,

.imgHolder .name { float: left; width: 100%; line-height: 18px; padding: 5px 0 0; margin: 0; }

.imgHolder .label:first-of-type { margin: 8px 0 0; }

.imgHolder .label { color: #afac04; }

.imgHolder .name { text-overflow: ellipsis; width: 100%; white-space: nowrap; overflow: hidden; }

.photo-list li div.imgHolder { width: 100%}

#content .photo-list li div.imgHolder  a { text-decoration: none; line-height: 18px; color: #70684E;}

#content .photo-list li div.imgHolder  a:hover .name { text-decoration: underline;}





/* More photo list */

.more-photo,

.more-photo * { float: left; position: relative; }

.more-photo { width: 100%; padding: 0; }

.more-photo li { width: 47%; margin: 0 6% 20px 0; }

.more-photo li:nth-child(2n+2) { margin: 0 0 20px 0; }



/* Gallery */

#content article .gallery { list-style: none; width: 100%; padding: 0; }

.gallery, .gallery * { float: left; position: relative; }

.gallery li.gal-block { width: 22%; margin: 0 3% 20px 0; }

.gallery li.browse-gal { margin: 0 2.5% 8px 0; }

.gallery li.browse-gal span { padding: 8px 0 0; }

.gallery li.gal-block a { width: 100%; }

.gallery ul { margin: 17px 0 0; padding: 0; list-style: disc inside; display: none; }

.gallery li li { width: 100%; margin: 0 0 10px; }

.gallery li h5 { margin: 7px 0 0; }

#content .browse-gal a { line-height: 16px; }

#content .browse-gal .imgHolder { margin: 0 0 5px; }

#content article .browse-gallery { margin: 10px 0 0; }



/* Accordion */

#accordion h5 { position: relative; margin: 0 0 12px; line-height: 22px; text-indent: 22px; }

#accordion h5 a { font-size: 18px; line-height: 22px; text-decoration: none; }

#accordion h5 a em { position: absolute; width: 17px; height: 16px; top: 3px; left: 0; background: url('../images/library/accordion.png') no-repeat 0 0; }

#accordion h5 a:hover { color: #5B4702; }

#accordion h5 a.active em { background-position: 0 100%; }



/* Video holder */

.videoHolder { float: left; position: relative; width: 100%; height: 0; margin: 0 0 20px; padding: 4px 0 56.25%; }

.videoHolder iframe,

.videoHolder video { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; }

a.imgHolder span { float: left; color: #70684e; text-decoration: underline; margin: 3px 0 0; }



/* Facebook comments */

.fb-wrap { float: left; width: 100%; max-width: 800px; margin: 0; }

.ipad .fb-wrap,

.iphone .fb-wrap,

.android .fb-wrap { margin: 0 0 -30px; }

.fb_iframe_widget { width: 96.5% !important; margin: 0 !important; max-width: 100% !important; }

.fb_iframe_widget span,

.fb_iframe_widget iframe { width: 100% !important; }



/* Links color */

.breadcrumbs a:hover,

.menu li.current a,

.menu li a:hover,

.menu li.current li a:hover { color: #d4d10f; }



/* Table */

.zebra { position: relative; width: 100%; padding: 0; margin: 0 0 30px;}

.zebra td { padding: 7px 0 7px 7px; border-top: 1px solid #fff; background: #a282a5; color: #fff; text-align: left; }

.zebra tr.even td { background: #926c95; }

.zebra tr.even.first td,

.zebra tr.second td { border-top: 0; background: #dfd4e0; color: #555; }

.zebra tr.first td { padding: 15px 0 10px 7px; white-space: nowrap; }

.zebra tr.second td { padding: 0 0 10px 7px; }

.zebra td { width: 73px; }

.zebra td.first { width: 30%; }



/* Sitemap */

#sitemap { float: left; position: relative; }

#sitemap * { float: left; clear: both; position: relative; }

#sitemap,

#sitemap ul { padding: 0 0 0 15px;  }

#sitemap ul { margin: 0 0 0 20px; }

#sitemap li { margin: 0 0 5px; }

#sitemap li.last { margin: 0; }

#content #sitemap li,

#content #sitemap li a { font-size: 16px; line-height: 30px; font-weight: normal; }



/* Misc */

.overlay { background: url('../images/library/overlay.png') repeat 0 0; }

.border-top { border-top: 1px solid #cfc7b4; }

.border-bottom { border-bottom: 1px solid #cfc7b4; }

.bullet { list-style: outside disc; padding: 0 0 0 20px; margin: 0 0 30px; }

.bullet li { margin: 0 0 13px; }

ol { list-style: outside decimal; padding: 0 0 0 20px; margin: 0 0 30px; }

ol li { margin: 0 0 13px; }

.no-margin { margin: 0 0 5px; }

.error-404 p { max-width: 700px; width: 100%; }

p.hint { font-style: italic; }

::-webkit-input-placeholder { color: #5b4702; }

		  :-moz-placeholder { color: #5b4702; }

		 ::-moz-placeholder { color: #5b4702; }

	 :-ms-input-placeholder { color: #5b4702; }



/* Misc Content */

.short #content p { width: 90%; margin: 0 10% 20px 0; }

.left { float: left; position: relative; }

.right { float: right; position: relative; }

article img { margin: 0 0 20px; }

article li img { margin: 0; }

.left.detail { width: 100%; max-width: 65.95%; margin: 0 2.13% 0 0; }

.left.detail img { margin: 0 0 20px; }

h2.big { font-size: 30px; }

.left.right-side { width: 100%; max-width: 31.92%; margin: 0; padding: 8px 0 0; }



#content li a.imgHolder,

#content li a.imgHolder span.label,

#content li a.imgHolder span.name { text-decoration: none; }

#content li a.imgHolder:hover,

#content li a.imgHolder:hover span.name { text-decoration: underline; }



a.laquo { float: left; padding: 0 0 0 18px; margin: 0 0 20px; height: 16px; line-height: 11px; background: url('../images/library/laquo.png') no-repeat 0 0; }

.family-info { float: left; position: relative; width: 100%; margin: 0 0 12px; display: none; }

.family-info * { float: left; }

.family-info span { width: 60px; font-style: italic; }

.family-info a { text-decoration: underline; }

.family-info a:hover { text-decoration: none; }



/* Quiz results */

.results { float: left; position: relative; width: 97%; padding: 0 0 60px 3%; background: #ee3468; }

.results .left { width: 72%; }

.results .left h2 { color: #FFF; text-transform: uppercase; margin: 23px 0 10px; }

.results .left p { color: #FFF; margin: 0 0 16px; font-weight: normal; }

.results .btn { float: none; position: absolute; bottom: 30px; left: 3%; width: auto; padding: 0 20px; margin: 0; border-right: 0; border-bottom: 0; }

.results .btn:active { bottom: 28px; margin: 0; }



.results .imgHolder { position: absolute; top: 0; right: 0; bottom: 0; width: 25%; overflow: hidden; }

.results .imgHolder .portrait { position: relative; height: 100%; left: 50%; margin: 0 0 0 -117px; width: auto !important; }

.results .imgHolder .landscape { position: relative; left: 0; margin: 0; width: 100% !important; }

#content .edit-link { float: right; background: url('../images/library/edit_link.png') no-repeat 0 50%; padding-left: 20px; text-decoration: none; font: normal 13px Arial, Helvetica, sans-serif; color: #666; }

#content .edit-link:hover { color: #000;}