/* 
Color palette:  #8A006C == purple 
                #52A300 == green
                #E4E4E4 == grey
                #F8F6EF == beige
                #FFFFFF == white
*/

#plantWrapper {
}
#plantWrapper #leftNav {
    position: relative;
    float: left;
    width: 300px;
    margin-right: 20px;
}
#plantWrapper #content {
    position: relative;
    float: left;
    width: 590px;
}

#plantWrapper ul.contentBox {
    position: relative;
    float: left;
}
#plantWrapper ul.contentBox li {
    position: relative;
    float: left;
    margin: 0 15px 15px 0;
    width: 180px;
}
#plantWrapper .photoCredit {
    font-size: .90em;
    line-height: 1.2em;
    margin: 0 0 1.5em 0;
    padding-top: 1em;
    width: 200px;
    color: #636363;
}
#plantWrapper .searchResult {
    clear: both;
}
#plantWrapper .searchResultHeader {
    font-size: 1.2em;
    color: White;
    background: #8A006C;
    padding: 5px 5px 5px 10px;
    margin-bottom: 10px;
    height: 20px;
    border-radius: 6px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    -o-border-radius: 6px;
}
#plantWrapper .searchResultHeader a {
    color: White;
    font-weight: bold;
    text-decoration: none;
}
#plantWrapper .searchResultHeader a:hover {
    text-decoration: underline;
}
#plantWrapper .searchResultPhoto {
    position: relative;
    float: left;
    width: 200px;
    margin-right: 20px;
}
#plantWrapper .searchResultPhoto a:hover {
    background: white;
}
#plantWrapper .searchResultDetails {
    position: relative;
    float: left;
    width: 350px;
}
#plantWrapper .searchResultDetails .commonName {
    font-style: italic;
}
#plantWrapper .searchResultDetails .description {
}

#plantWrapper #search {
    border: 1px solid #E4E4E4;
    background: #F8F6EF;
    padding: 20px;
    margin-bottom: 10px;
}
#plantWrapper #search .title {
    font-size: 1.5em;
    font-weight: bold;
    color: #52a300;
}
#plantWrapper #search input[type=text] {
    width: 400px;
}
#plantWrapper .searchTerms {
    font-weight: bold;
}

#plantWrapper #pageCount {
    position: relative;
    float: left;
}
#plantWrapper #pageNav {
    position: relative;
    float: right;
}

#plantWrapper .pager {
    clear: both;
    position: relative;
    float: left;
    width: 100%;
    margin: 20px 0 20px 0;
    text-align: center;
}
#plantWrapper .pager ol {
    display: inline-block;
}
#plantWrapper .pager ol li {
    position: relative;
    float: left;
    width: 20px;
    border: 3px solid #8A006C;
    padding: 5px;
    margin: 5px;
}
#plantWrapper .pager ol li a {
    color: #8a006c;
    font-weight: bold;
}
#plantWrapper .pager ol li a:hover {
    color: white;
    background-color: #8a006c;
}

#plantWrapper .tabContainer {
    position: relative;
    float: left;
    margin-bottom: 20px;
}
#plantWrapper .tabs {
    position: relative;
    float: left;
    margin: 10px 0 10px 0;
}
#plantWrapper .tabs li {
    position: relative;
    float: left;
}
#plantWrapper .tabs li a {
    padding: 10px;
    border: 1px solid #e4e4e4;
    color: white;
    background: #8a006c;
}
#plantWrapper .tabs li a.active {
    color: #8a006c;
    background-color: #f8f6ef;
}

#plantWrapper .tabContent {
    position: relative;
    float: left;
    width: 558px;
    border: 1px solid #e4e4e4;
    background: #f8f6ef;
    padding: 20px;
}
#plantWrapper .tabContent #generalInfo {
    position: relative;
    float: left;
}
#plantWrapper .tabContent #generalInfo h4 {
    margin-top: 0;
}
#plantWrapper .tabContent #generalInfo #photo {
    position: relative;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}
#plantWrapper .tabContent #generalInfo p {
    /* -ms-word-break: break-all; */
    /* word-break: break-all; */
    word-break: break-word; /* non-standard for web-kit */
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
}

#plantWrapper .tabContent .attributes {
    position: relative;
    float: left;
    width: 100%;
    margin-top: 20px;
}
#plantWrapper .tabContent .attributes .displayLabel {
    clear: both;
    position: relative;
    float: left;
    width: 200px;
    margin-top: 0;
    font-weight: bold;
    color: Black;
}
#plantWrapper .tabContent .attributes p {
    position: relative;
    float: left;
    width: 400px;
}
#plantWrapper .tabContent ol {
    margin-left: 30px;
    list-style-type: decimal;
}
#plantWrapper .tabContent ol li {
    margin-bottom: 5px;
}
#plantWrapper .photoList {
    position: relative;
}
#plantWrapper .photoList .photo {
    position: relative;
    display: inline-block;
    vertical-align: top;
    margin: 0 15px 15px 0;
    width: 260px;
}
#plantWrapper .photoList .photo img {
}
/* #plantWrapper .photoList .photo .photoCredit {font-size: .90em; line-height: 1.2em; margin: 0 0 1.5em 0; padding-top: 1em; width: 200px; color: #636363;} */

#plantWrapper .garden-guide-image {
    float: left;
    padding: 0 15px 15px 0;
}
#plantWrapper .garden-guide-types {
    clear: both;
}