/*----------------------------------------------------------
The base color for this template is #5c87b2. If you'd like
to use a different color start by replacing all instances of
#5c87b2 with your new color.
----------------------------------------------------------*/
@font-face
{
    font-family: 'Museo-Slab-500';
    src: url('Museo_Slab_500-webfont.eot');
    src: url('Museo_Slab_500-webfont.eot?#iefix') format('embedded-opentype'), url('Museo_Slab_500-webfont.woff') format('woff'), url('Museo_Slab_500-webfont.ttf') format('truetype'), url('Museo_Slab_500-webfont.svg#MuseoSlab500Regula') format('svg');
    font-weight: normal;
    font-style: normal;
}

body
{
    font-size: .85em;
    font-family: "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    border: 0;
    color: #696969;
    /*background-color: #ebe6d2;*/
}

div
{
    padding: 1px 0;
}

a:link
{
    color: #034af3;
    text-decoration: underline;
}

a:visited
{
    color: #505abc;
}

a:hover
{
    color: #1d60ff;
    text-decoration: none;
}

a:active
{
    color: #12eb87;
}

a img
{
    border: none;
}

p, ul, ol
{
    /*margin-bottom: 20px;
    line-height: 1.2em;*/
}

header, footer, nav, section
{
    display: block;
}

nav
{
    border-bottom: 1px solid #e0e0e0;
}

/* HEADINGS   
----------------------------------------------------------*/
h1, h2, h3, h4, h5, h6
{
    font-size: 1.5em;
    color: #4e4e4e;
    line-height: 2em;
}

h1
{
    font-size: 1.7em;
    padding-bottom: 25px;
    padding-top: 5px;
    margin-bottom: 0;
    color: #0954a5;
}

h2
{
    padding: 0 0 10px 0;
    color: #0954a5;
}

h3
{
    font-size: 1.2em;
}

h4
{
    font-size: 1.1em;
}

h5
{
    font-size: 1em;
}

h6
{
    font-size: 0.9em;
    color: #696969;
    margin-bottom: 2px;
    margin-top: -2px;
}
/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/

/* you can specify a greater or lesser percentage for the 
page width. Or, you can specify an exact pixel width. */
.page
{
    width: 90%;
    max-width: 1100px;
    /*min-width: 55em;*/
    min-width: 320px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
    padding-top: 0;
    /*background-color: #fff;*/
    background-color: transparent;
}

header, #header
{
    position: relative;
    margin-bottom: 0px;
    color: #000;
    padding: 0;
}

header h1, #header h1
{
    font-weight: bold;
    padding: 5px 0;
    margin: 0;
    color: #000;
    border: none;
    line-height: 2em;
    font-size: 32px !important;
    text-shadow: 1px 1px 2px #111;
}

#banner
{
    background-image: url('../../Content/Images/banner.png');
    height: 118px;
}

#main
{
    /*padding: 10px 10px 15px 10px;*/
    padding: 10px 0 15px 0;
    background-color: #fff;
    border-radius: 4px 0 0 0;
    -webkit-border-radius: 4px 0 0 0;
    -moz-border-radius: 4px 0 0 0;
}

#homeContent
{
    margin-right: 26%;
    padding-left: 10px;
    width: 72%;
}

#media
{
    float: right;
    width: 24%;
    /*background-color: #dfd6b5;*/
    /*margin-top: -10px;*/
    padding: 0 9px 20px 9px;
    text-align: center;
    font-size: 0.96em;
    /*TODO - play with layout to give a minimum width of 300px (.page) and have everything float nicely accordingly. min-width: 12em;*/
}

#otherMedia
{
    padding: 0 9px 20px 9px;
    text-align: center;
    font-size: 0.96em;
}

#media .notice, #otherMedia .notice
{
    margin-bottom: 1px;
    padding: 7px;
}

#media .notice
{
    border-style: none;
}    

#media .notice a, #otherMedia .notice a
{
    text-decoration: none;
    color: #696969;
}

#media a:hover, #otherMedia a:hover
{
    color: #034af3;
}

#media h4, #otherMedia h4
{
    margin-bottom: 3px;
    margin-top: 10px;
}

.mediaHeader
{
    margin-bottom: 3px;
    margin-top: 10px;
    font-size: 1.05em;
    font-weight: bold;
    color: #4e4e4e;
    padding: 15px 0 5px 0;
}

.moreMedia
{
    font-size: 0.9em;
    font-weight: normal;
    padding-left: 5px;
}

.moreMedia a
{
    text-decoration: none;
}

#content
{
    float: right;
    width: 78%;
    padding-bottom: 10px;
}

#submenu
{
    margin-right: 80%;
}

footer, #footer
{
    background-color: #fff;
    color: #999;
    padding: 10px 0;
    text-align: center;
    line-height: normal;
    margin: 0 3px 30px 3px;
    font-size: .9em;
    border-top: 1px #5C87B2 solid;
    border-radius: 0 0 4px 4px;
    -webkit-border-radius: 0 0 4px 4px;
    -moz-border-radius: 0 0 4px 4px;
    clear: both;
}

/* TAB MENU   
----------------------------------------------------------*/
ul#menu
{
    /*padding: 0 0 2px;*/
    padding-top: 20px;
    position: relative;
    margin: 0;
    margin-left: 5px;
}

ul#menu li
{
    display: inline;
    list-style: none;
}

ul#menu li#greeting
{
    padding: 10px 20px;
    font-weight: bold;
    text-decoration: none;
    line-height: 2.7em;
    color: #fff;
}

ul#menu li a
{
    padding: 10px 20px 5px 20px;
    text-decoration: none;
    line-height: 1.9em;
    background-color: #adc6e7;
    color: #0954a4;
    margin-right: -2px;
    border: 1px solid #e0e0e0;
    border-radius: 4px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    -moz-border-radius: 4px 4px 0 0;
}

ul#menu li a:hover
{
    background-color: #fff;
    text-decoration: none;
    border-bottom: none;
}

ul#menu li a.selectedItem
{
    background-color: #fff;
    padding: 10px 20px 6px 20px;
    color: #000;
    border-bottom: none;
    z-index: 30;
}

/* SIDE MENU
----------------------------------------------------------*/

ul#sidemenu
{
    padding: 15px 0 0 0;
    position: relative;
    margin: 0;
}

ul#sidemenu li
{
    list-style: none;
    padding: 10px;
}

ul#sidemenu li a
{
    text-decoration: none;
    color: #0954a4;
}

ul#sidemenu li:hover
{
    background-color: #adc6e7;
    text-decoration: none;
}

ul#sidemenu li a.selectedItem
{
    color: #000;
}

.subside
{
    margin-left: 20px;
}

/* FOOTER LINKS
----------------------------------------------------------*/

ul#footerLinks
{
    text-align: right;
    padding-right: 5px;
}

ul#footerLinks li
{
    display: inline;
    list-style: none;
    padding: 5px;
}

/* FORM LAYOUT ELEMENTS   
----------------------------------------------------------*/

fieldset
{
    padding: 0 1.4em 1.4em 1.4em;
    margin: 0 0 1.5em 0;
}

legend
{
    font-size: 1.2em;
    font-weight: bold;
}

textarea
{
    min-height: 3em;
    width: 97%;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
}

#smallTextArea
{
    min-height: 2em;
}

#largeTextArea
{
    min-height: 10em;
}

/*input[type="text"], input[type="password"]
{
    border: 1px solid #ccc;
    padding: 2px;
    color: #444;
    width: 17em;
}*/

 input[type="file"]
 {
    padding: 2px;
    width: 50%;
 }

#smallTextInput
{
    width: 5em;
}

#mediumTextInput
{
    width: 50%;
}

#largeTextInput
{
    width: 97%
}

select
{
    border: 1px solid #ccc;
    padding: 2px;
    color: #444;
}

input[type="submit"]
{
    font-size: 1em;
    padding: 4px;
}

input[type="reset"]
{
    font-size: 1em;
    padding: 4px;
}

/* TABLE
----------------------------------------------------------*/

table
{
    border: solid 1px #adc6e7;
    border-collapse: collapse;
}

table td
{
    padding: 5px;
    border: solid 1px #adc6e7;
}

table td a:link
{
    text-decoration: none;
    color: #0954a4;
}   

table td a:hover
{
    color: #1d60ff;
}

table th
{
    padding: 6px 5px;
    text-align: left;
    border: solid 1px #adc6e7;
}

table th a
{
	text-decoration: none;
}

.sortedColumn a
{
	text-decoration: none;
}

.nastyTable
{
    border: none;
}

    .nastyTable td
    {
        min-width: 12px;
    }

.sectionBreak
{
    padding-bottom: 10px; 
    padding-top: 10px; 
    background-color: #adc6e7;
    font-size: 1.4em;
}

/* MISC  
----------------------------------------------------------*/
.clear
{
    clear: both;
}

.error
{
    color: Red;
}

nav, #menucontainer
{
    margin-top: 25px;
}

div#title
{
    display: block;
    text-align: left;
    padding-top: 20px;
}

.message
{
    color: Red;
}

.caption
{
    font-size: 0.85em;
    font-style: italic;
}

.paging a:link
{
    text-decoration: none
}

#version
{
    float: right;
    font-size: 0.65em;
    color: #c6c6c6;
    clear: both;
}

.followUs
{
    display: block;
    padding-right: 5px;
    padding-top: 6px;
}

.facebookBadge
{
    float: right;
    font-size: 0.9em;
    padding-right: 10px;
    padding-top: 8px;
}

.facebookBadge a
{
    text-decoration: none;
    font-weight: bold;
    color: #08a1a4;
}

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

.facebookBadge a img
{
    border: none;
}

.paging
{
    padding-bottom: 5px;
    padding-top: 5px;
}

.redText
{
    color: Red;
    font-weight: bold;
}

.sideImage
{
    float: right;
    padding-top: 20px;
    padding-left: 20px;
}

.sideImage img
{
    padding: 1px;
    border: 1px solid #adc6e7;
}

.sideContent
{
}

.logoGroup
{
    clear: both;
    padding-top: 25px;
}

.partnerLogo
{
    width: 22%;
    height: 130px;
    float: left;
    overflow: hidden;
    text-align: center;
    padding: 10px;
}

.partnerLogo img
{
    max-width: 95%;
}

/* LOGIN
----------------------------------------------------------*/
#logindisplay
{
    position: relative;
    font-size: 0.9em;
    text-align: right;
    float: right;
    width: 30%;
    margin-top: 20px;
    margin-bottom: 0;
    clear: both;
    padding-right: 10px;
}

#logindisplay a:link
{
    text-decoration: none;
    font-weight: bold;
    color: #000;
}

#logindisplay a:visited
{
    text-decoration: none;
    color: #000;
}

#logindisplay a:hover
{
    text-decoration: underline;
}

.lineBelow
{
    line-height: 2.2em;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error
{
    color: #ff0000;
}

.field-validation-valid
{
    display: none;
}

.input-validation-error
{
    border: 1px solid #ff0000;
    background-color: #ffeeee;
}

.validation-summary-errors
{
    font-weight: bold;
    color: #ff0000;
}

.validation-summary-valid
{
    display: none;
}

/* Styles for editor and display helpers
----------------------------------------------------------*/
.field
{
    clear: both;
    padding-bottom: 0.4em;
}

.display-label, .editor-label
{
    font-weight: bold;
    float: left;
    width: 12em;
    margin-left: 1em;
}

.display-field, .editor-field
{
    margin-left: 13em;
}

.subLabel
{
    /*display: block;*/
}

.text-box
{
    width: 30em;
}

.text-box.multi-line
{
    height: 6.5em;
}

.tri-state
{
    width: 6em;
}

.greyText
{
    color: #bebebe;
}

.smallText
{
    font-size: 0.9em;
    line-height: 1.3em;
}

.hint
{
    font-size: 0.9em;
    font-style: italic;
}

.eventSummary
{
    margin-bottom: 1em;
}

.eventSummary a
{
    text-decoration: none;
    color: #696969;
}

.eventSummary a:hover
{
    color: blue;
}

.datetime
{
    width: 10em;
}

.attributedImage{
    position: relative;
    z-index: 1;
}

.imageAttribution{
    margin-top: -1.5em;
    padding-right: 0.5em;
    text-align: right;
    color: #000;
    background-color: rgba(255, 255, 255, 0.6);
    z-index: 9999;
    position: relative;
}

/* Search
----------------------------------------------------------*/
#search
{
    padding-bottom: 15px;
    text-align: center;
}

.searchButton
{
    height: 2.1em;
    margin-top: -10px;
}

#searchBox
{
    width: 20em;
}

.help-icon
{
    padding-left: 15px;
}

/* Home page layout
----------------------------------------------------------*/

.homeHeading
{
    font-family: Times New Roman, Georgia, serif;
    font-weight: bold;
    font-size: 2.4em;
    padding: 20px 0 30px 0;
    color: #0954a5;
}

.fifth{
    float: left;
    width: 20%;
    border: 1px solid #fff;
    box-sizing: border-box;
}

.hotTopic
{
    float: left;
    width: 218px;
    height: 270px;
    border: 1px solid #bdbbbc;
    margin: 0 33px 0 0;
    box-shadow: 3px 5px 6px #ccc;
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;
    margin-bottom: 60px;
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
}

.hotTopic img
{
    margin-top: -1px;
    width: 100%;
}

.hotTopicHeader
{
    color: #0954a5;
    font-weight: bold;
}

.hotTopicText
{
    height: 100px;
    padding: 5px;
}

.hotTopicText p
{
    font-size: 0.9em;
    margin-top: 5px;
}

.readMore
{
    text-align: right;
    padding-right: 3px;
    font-size: 0.9em;
}

.readMore a
{
    text-decoration: none;
}

#hotTopics
{
    overflow: auto;
    width: 98%;
    padding-bottom: 25px;
}

#objectiveLinks
{
    width: 98%;
}

.objectiveLink
{
    float: left;
    width: 218px;
    height: 52px;
    border: 1px solid #adc6e7;
    margin: 0 33px 25px 0;
}

.objectiveLink a
{
    text-decoration: none;
}

.objectiveLink a img
{
    padding: 2px 15px 2px 4px;
}

.objectiveLinkImage
{
    float: left;
}

.objectiveLinkText
{
    float: left;
    text-align: left;
    width: 150px;
    height: 51px;
    display: table;
}

.objectiveLinkText a
{
    color: #4b77a6;
    font-size: 1em;
}

.objectiveLinkText a p
{
    display: table-cell;
    vertical-align: middle;
}

#objectiveImage
{
    padding-top: 15px;
    padding-bottom: 15px;
    text-align: center;
}

#objectiveImage img
{
    width: 97%;
    max-width: 750px;
    padding: 1px;
    border: 1px solid #adc6e7;
   
}

/* New homepage styles
----------------------------------------------------------*/
#homepage h1
{
    font-family: Museo-Slab-500, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
}

#homepage h2
{
    font-family: Museo-Slab-500, "Helvetica Neue", Helvetica, Arial, Verdana, sans-serif;
    margin: 0;
    padding: 0;
}

#homepage .category
{
    /*margin-bottom: 50px;*/
    padding: 15px 5px 40px 5px;
}

#homepage .category h1
{
    font-weight: normal;
}

.category-heading h1
{
    text-align: center;
    padding-bottom: 10px;
    padding-top: 0;
    margin-bottom: 0;
    margin-top: 0;
}

.category-heading .sub-title
{
    font-family: Museo-Slab-500, Verdana, Helvetica, sans-serif;
    font-size: .8em;
    font-style: italic;
    margin: 0;
    font-weight: normal;
}

.category h3
{
    color: #0954a5;
    font-size: 1.4em;
    line-height: 2em;
    font-weight: normal;
}

.band
{
    background-color: #eff4fa;
    border-top: 1px solid #d4e1f3;
    border-bottom: 1px solid #d4e1f3;
}

.title
{
    margin-bottom: -30px;
    margin-top: -15px;
}

.padding
{
    margin-bottom: 40px;
}

.home-heading
{
    color: #0954a5;
    font-size: 1.5em;
    line-height: 2em;
}

.home-heading a:link
{
    color: #0954a5;
    text-decoration: none;
}

.home-heading a:hover
{
    color: #034af3;
}

.sub-heading
{
    color: #0954a5;
    font-size: 1.1em;
}

.sub-heading a:link
{
    color: #0954a5;
    text-decoration: none;
}

sub-heading a:hover
{
    color: #034af3;
}

.when-and-where
{
    font-family: Museo-Slab-500, Verdana, Helvetica, sans-serif;
    text-align: center;
    padding: 20px;
    color: #000;
}

.when
{
    font-size: 1.7em;
    font-weight: bold;
}

.where
{
    font-size: 1.2em;
    padding-top: 12px;
}

#kaipara-moana h1
{
    font-size: 2em;
}

.sign-up
{
    text-align: center;
}

.sign-up .btn
{
    font-size: 18px;
    width: 100px;
    margin-top: -15px;
    padding: 16px;
}

.counter
{
    position: absolute;
    z-index: 30;
    margin-top: 10px;
    font-size: 2em;
    background-color: #000;
    border: 4px double #efefef;
}

.digit
{
    float: left;
    width: 1em;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: #000;
    border: 1px solid #666666;
    -moz-box-shadow: inset -1px -1px 10px #696969;
    -webkit-box-shadow: inset -1px -1px 10px #696969;
    box-shadow: inset -1px -1px 10px #696969;
}

.media-item
{
    margin-bottom: 25px;
}

.media-item p
{
    margin-bottom: 0;
}

#most-current-items h6 a:link, #latest-news h6 a:link
{
    text-decoration: none;
    color: #696969;
}

#most-current-items h6 a:hover, #latest-news h6 a:hover
{
    color: #034af3;
}

.current-item
{
    padding-bottom: 5px;
    margin-bottom: 5px;
    line-height: 1em;
    border-bottom: 1px solid #e0e0e0;
}

.youtube-embed{
    border: 1px solid #000;
    margin-bottom: 0.5em;
}

#search-publications
{
    text-align: center;
    margin-top: 20px;
}

#search-publications input
{
    width: 80%;
}

.social-media-icons-layout
{
    padding: 15px;
}

#newsletter
{
}

#newsletter p
{
    margin-bottom: 15px;
}

.in-progress
{
    width: 25px;
    z-index: 300;
}

#objectives
{
    text-align: center;
}

#objectives h2
{
    text-align: left;
}

#objectives img
{
    margin-bottom: 10px;
}

.objective
{
    /*border: 1px solid #e3e3e3;*/
    cursor: pointer;
}

.objective p
{
    font-size: 0.95em;
    line-height: 18px;
}

/* ckEditor
----------------------------------------------------------*/
.cke_contents
{
    height: 40em !important;
}

/* collaborator's home layout
----------------------------------------------------------*/
.collaboratorSection
{
    float: left;
    width: 49%;
    padding-bottom: 35px;
}

.cSectionMain
{
    clear: both;
    margin-left: 1em;
}

.cSectionMain li
{
    padding-bottom: 5px;
}

.cSectionHeading
{
    float: right;
    width: 82%;
}

.cSectionImage
{
    margin-right: 85%;
}

/* online maps
----------------------------------------------------------*/
#map
{
    border: 1px solid #adc6e7;
    height: 602px;
    background-color: #eff4fa;
}

#map_canvas
{
    float: right;
    width: 78%;
    height: 600px;
}

/*@Section Styles
#map_canvas { height: 600px; margin-bottom: 10px; }
End Section*/

#map_legend
{
    margin-right: 80%;
}

#map_legend p
{
    padding-left: 10px;
}

.ui-timepicker-div .ui-widget-header{ margin-bottom: 8px; }
.ui-timepicker-div dl{ text-align: left; }
.ui-timepicker-div dl dt{ height: 25px; }
.ui-timepicker-div dl dd{ margin: -25px 0 10px 65px; }
.ui-timepicker-div td { font-size: 90%; }

input[type="checkbox"]
{
    margin-top: -2px;
}

.info-button-filler
{
    margin-left: 16px;
}

/* Events
----------------------------------------------------------*/

.notice,
.notice-full
{
    background-color: #f9f7f0;
    border-style: outset;
    border-color: #f4f0e4;
    border-width: 1px;
    padding: 10px;
    margin-bottom: 4px;
    border-radius: 6px 6px 6px 6px;
    -webkit-border-radius: 6px 6px 6px 6px;
    -moz-border-radius: 6px 6px 6px 6px;
    text-align: left;
    overflow: hidden;
}

.notice p
{
    margin-bottom: -2px;
}

.notice a:hover
{
    color: #034af3;
}

.notice h3
{
    margin-top: 0.5em;
}

.notice h3 a
{
    text-decoration: none;
    color: #696969;
}

.noticeIcon
{
    float: left; 
    padding: 5px 10px 10px 0; 
    height: 50px; 
}

#eventContent
{
    margin-right: 26%;
    padding-bottom: 10px;
}

#newsContent
{
    margin-right: 3%;
    margin-left: 3%;
}

#calendar
{
 float: right;
 width: 25%;
}

.getInvolvedImage
{
    float: left;
    padding-right: 15px;
    padding-bottom: 3px;
}

.getInvolvedImage img
{
    width: 250px;
    padding: 1px;
    border: 1px solid #adc6e7;
/*    border: 1px solid #f4f0e4;*/
}


/*Flagship sites*/
.flagshipSite
{
    float: left;
    width: 96%;
    padding: 5px;
    /*width: 220px;
    height: 350px;*/
    border: 1px solid #bdbbbc;
    margin: 0 33px 0 0;
    /*box-shadow: 3px 5px 6px #ccc;
    -moz-box-shadow: 3px 3px 5px 6px #ccc;
    -webkit-box-shadow: 3px 3px 5px 6px #ccc;*/
    margin-bottom: 30px;
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 4px 4px 4px 4px;
    -moz-border-radius: 2px 2px 2px 2px;
}

.flagshipSiteText
{
    padding: 5px;
    float: left;
}

.flagshipSite img
{
    margin-top: -1px;
    float: left;
    padding-right: 20px;
    width: 300px;
}

.flagshipSiteHeader
{
    color: #0954a5;
    font-weight: bold;
}

.flagshipSite p
{
    font-size: 0.93em;
    margin-top: 5px;
}

/*Bootstrap overrides
----------------------------------------------------------*/
label
{
    display: inline-block;
}

/*Bootstrap extensions
----------------------------------------------------------*/
.btn-home {
  color: #3f3f3f;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  background-color: #fd9900;
  *background-color: #da7e00;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
}

.btn-home:hover,
.btn-home:focus,
.btn-home:active,
.btn-home.active,
.btn-home.disabled,
.btn-home[disabled] {
  color: #ffffff;
  background-color: #da7e00;
  *background-color: #dd911c;
}

.btn-home:active,
.btn-home.active {
  background-color: #c67605 \9;
}

a.btn-home:link
{
    color: #3f3f3f;
    text-decoration: none;
    font-size: 14px;
}