@import url('https://fonts.googleapis.com/css?family=Anuphan|Kanit|Oswald|Anuphan');

body {
 
    background: #eff3f5;
    padding-bottom: 0em;
}


.pkp_structure_content {
    padding-top: 15px;
    padding-bottom: 15px;
    background: #FFF !important;
}

.btn,
.form-control {
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}

#nav-menu {
    padding-top: 0 !important;
}
.navbar {
    margin-bottom: 0 !important;
    background: #1876F2 url('https://github.com/ochakaew/image-ojs/blob/main/nssc-header.jpg?raw=true') 0px -89px no-repeat;
}
.navbar-default .nav > li > a {
    color: #FFF;
    font-size: 18px;
    font-family: Anuphan;
    text-shadow: 3px 3px 2px #999;
}
.navbar-default .nav > li > a:hover {
    color: #FFF;
    text-shadow: 3px 3px 2px #000;
}
.navbar-default .nav > li.open > a {
    background: none;
}
.navbar-default .nav > li.open > .dropdown-menu {
    padding: 0;
    min-width: 0;
    width: auto;
    background: #FFF !important;
    border-color: #1876F2 !important;
}
.navbar-default .nav > li.open > .dropdown-menu > li a {
    font-family: Anuphan;
    padding: 8px 20px;
}
.navbar-default .nav > li.open > .dropdown-menu > li a:hover {
    color: #FFF !important;
    background: #1876F2 !important;
}

#main-navigation {
    clear: both;
    margin-top: -1px;
}
#main-navigation > li > a {
    color: #FFF;
    font-size: 18px;
    padding: 12px 8px;
    line-height: 30px;
    text-shadow: 3px 3px 2px #999;
}
#main-navigation > li > a:hover,
#main-navigation > li.active > a,
#main-navigation > li.open > a {
    color: #FFF;
    text-shadow: 3px 3px 2px #000;
    background: rgba(63, 174, 227, 0.45) !important;
}
#main-navigation > li.open > .dropdown-menu {
    padding: 0;
    background: #FFF !important;
    border-color: #1876F2 !important;
}
#main-navigation > li.open > .dropdown-menu > li a {
    padding: 8px 20px;
}
#main-navigation > li.open > .dropdown-menu > li a:hover {
    color: #FFF !important;
    background: #1876F2 !important;
}

.header_view {
    margin: 0;
    height: 50px;
    border: none;
    overflow: hidden;
    font-family: Anuphan;
    background: #4a4a4a;
    padding: 15px 2px 0 2px;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.header_view a {
    color: #FFF;
    padding: 0;
    font-size: 18px;
    text-shadow: 3px 3px 2px #999;
}
.header_view a.title {
    text-overflow: ellipsis;
    white-space: nowrap;
}
.header_view a.title::before {
    content: '\2039';
}
.header_view a.title:hover {
    color: #FFF;
    text-decoration: none;
}
.header_view a.download {
    color: #FFF;
    font-size: 16px;
    margin-top: -22px;
    margin-right: -2px;
    padding: 0 2px 0 6px;
    position: inherit;
    text-shadow: none;
    background-color: #4a4a4a;
}
.header_view a.download:hover {
    text-decoration: none;
}
.header_view a.download .pkp_screen_reader {
    padding: 12px 6px;
    border-left: 1px solid #FFF;
}
.header_view a.download:hover .pkp_screen_reader {
    background-color: #4a4a4a;
    background-image: linear-gradient(to right, #242424, #4a4a4a);
}
.pkp_page_issue .header_view a.download {
    margin-top: 0px !important;
}

.site-name {
    font-size: 37px !important;
    line-height: 32px !important;
    font-family: Oswald !important;
    margin: -25px 0 35px 0 !important;
}
.site-name::before {
    color: #ffff00;
    padding: 20px 0 0 120px;
    display: flex;
    content: 'นาวิกาธิปัตย์สาร';
    font-family: Anuphan;
;
}
.site-name::after {
    color: #e6f0ff;
    font-size: 20px;
    padding: 0 0 0 12px;
    display: flex;
    content: 'Naval Strategic Studies Journal, ISSN: 0859-5224 (print)';
    font-family: Anuphan;
}
.navbar-brand {
    width: 108px;
    height: 108px;
    padding: 5px 5px !important;
    margin: -55px 0 0 0 !important;
}
form[role='search'] {
    float: right !important;
    padding:0px !important;
}
form[role='search'] button {
    border-color: #1876F2;
    padding: 6px !important;
    border-left: none;
    -webkit-border-radius: 0 25px 25px 0 !important;
    -moz-border-radius: 0 25px 25px 0 !important;
    border-radius: 0 25px 25px 0 !important;
}
form[role='search'] button:hover {
    background: #FFF;
    border-color: #1876F2;
}
form[role='search'] .form-control {
    margin-right: -5px;
    border-right: none;
    border-color: #1876F2;
    -webkit-border-radius: 25px 0 0 25px !important;
    -moz-border-radius: 25px 0 0 25px !important;
    border-radius: 25px 0 0 25px !important;
}
.homepage-image {
    width: 100%;
    overflow: hidden;
}
.homepage-image>img{
    width: 100% !important;
}
.breadcrumb {
    overflow: hidden;
    width: 100%;
    padding: 0 0 8px 0;
    margin-bottom: 0;
    background: none;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.breadcrumb li {
    cursor: pointer;
    padding: .7em 1em .7em 2em;
    float: left;
    text-decoration: none;
    color: #FFF !important;
    font-family: Anuphan;
    position: relative;
    text-shadow: 0 1px 0 rgba(255,255,255,.5);
    background-color: #1876F2;
}
.breadcrumb li a {
    color: #FFF;
    font-family: Anuphan;
    text-decoration: none;
    text-shadow: 3px 3px 2px #000;
}
.breadcrumb li:hover{
    background: #1876F2;
}
.breadcrumb li::after,
.breadcrumb li::before{
    content: "" !important;
    padding: 0 !important;
    position: absolute;
    top: 50%;
    margin-top: -1.5em;   
    border-top: 1.5em solid transparent;
    border-bottom: 1.5em solid transparent;
    border-left: 1em solid;
    right: -1em;
}
.breadcrumb li::before{
    border-left-color: #FFFFFF;  
    right: -1.1em !important;
    z-index: 1; 
}
.breadcrumb li::after{
    border-left-color: #1876F2; 
    z-index: 2;
}
.breadcrumb li:hover::after{
    border-left-color: #1876F2;
}
.breadcrumb li.active,
.breadcrumb li.active:hover {
    cursor: default;
    color: #FFF !important;
    text-shadow: 3px 3px 2px #333;
    background-color: #FFF;
    padding-right: 45px;
    background-image: linear-gradient(to right, #1876F2, #FFF);
}
.breadcrumb li.active::after,
.breadcrumb li.active:hover::after {
    border-left-color: #FFF;
}
.breadcrumb li:first-child {
    padding-left: 1em;
}
.breadcrumb li:first-child::before {
    right: -1.05em !important;
}

.page-header {
    margin: 0 0 1px 0 !important;
    padding: 10px 10px !important;
    background: #1876F2 url('https://github.com/ochakaew/image-ojs/blob/main/nssc-header.jpg?raw=true') 0px 0px no-repeat;
}
.page-header h1 {
    font-size: 24px !important;
}
.page-header h2 {
    font-size: 22px !important;
}
.page-header h3 {
    font-size: 20px !important;
}
.page-header h1,
.page-header h2,
.page-header h3,
h1.page-header,
h2.page-header,
h3.page-header {
    margin: 0;
    color: #FFF;
    font-family: Anuphan;
    padding-left: 5px;
    text-shadow: 3px 3px 2px #000;
}

.contact_section h3 {
    color: #FFF;
    font-family: Anuphan;
    margin: 10px 0 1px 0 !important;
    padding: 10px 10px 10px 15px !important;
    text-shadow: 3px 3px 2px #000;
    background: #1876F2 url('https://github.com/ochakaew/image-ojs/blob/main/nssc-header.jpg?raw=true') 0px 0px no-repeat;
}
.pkp_block {
    margin-bottom: 5px;
    border-color: #1876F2 !important;
    overflow-x: hidden !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.pkp_block>.content {
    padding: 0;
    border-color: #1876F2 !important;
}
.pkp_block .content {
    border-color: #1876F2 !important;
}
.pkp_block .title,
.pkp_block .content .title {
    color: #FFF;
    font-size: 18px;
    font-family: Anuphan;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    padding:15px 0;
    background-color: #1876F2;
    /*text-shadow: 3px 3px 2px #000;*/
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.pkp_block h2.title,
.pkp_block .content h2.title{
    margin: 0 !important;
}
.pkp_block .title::before,
.pkp_block .content .title::before {
    content: "" !important;
    padding: 0 !important;
    top: 50%;
   
    border-left: 16px solid;
    border-left-color: #1876F2;
    position: relative;
    left: -8px;
}
#customblock-Flagcounter p {
    display: none;
}
#customblock-Flagcounter .title,
#customblock-Flagcounter p[align='center'] {
    display: block;
}
#customblock-Flagcounter p[align='center'] {
    padding: 5px;
}
#customblock-Flagcounter img {
    border: none !important;
}
.block_language,
.block_information,
.block_web_feed,
#customblock-manual {
    overflow: hidden;
}
#customblock-manual>.content>.content {
    padding: 0;
}
.block_language ul,
.block_information ul,
.block_web_feed ul,
#customblock-manual>.content>.content ul {
    margin-top: -1px;
}
.block_language ul li,
.block_information ul li,
.block_web_feed ul li,
#customblock-manual>.content>.content ul li {
    border: none;
    padding: 0 0 1px 0;
}
.block_language ul li a,
.block_information ul li a,
.block_web_feed ul li a,
#customblock-manual>.content>.content ul li a {
    color: #000;
    font-family: Anuphan;
    display: block;
    padding: 10px 15px;
    text-decoration: none;
}
.block_language ul li:hover,
.block_information ul li:hover,
.block_web_feed ul li:hover,
#customblock-manual>.content>.content ul li:hover {
    background-color: #FFF;
    background-image: linear-gradient(to right, #1876F2, #FFF);
}
.block_language ul li:hover a,
.block_information ul li:hover a,
.block_web_feed ul li:hover a,
#customblock-manual>.content>.content ul li:hover a {
    color: #FFF;
}
.block_language ul li::after,
.block_information ul li::after,
.block_web_feed ul li::after,
#customblock-manual>.content>.content ul li::after {
    display: block;
    content: '';
    border-bottom: solid 1px #1876F2;  
    transform: scaleX(0);  
    transition: transform .35s ease-in-out;
}
.block_language ul li:hover:after,
.block_information ul li:hover:after,
.block_web_feed ul li:hover:after,
#customblock-manual>.content>.content ul li:hover:after {
    transform: scaleX(1);
}
#customblock-manual>.content>.content>ul>li>ul {
    padding-left: 0;
}
#customblock-manual>.content>.content>ul>li:hover>ul>li>a {
    color: #000;
}
#customblock-manual>.content>.content>ul>li:hover>ul>li:hover>a {
    color: #FFF;
}

.current_issue_title {
    font-family: Anuphan;
    border-bottom: 1px solid #eee;
    margin-bottom: 5px !important;
}
.issue-toc .row {
    margin: 0 !important;
}
.issue-toc .heading .thumbnail,
.issue-toc .heading .issue-details {
    margin-bottom: 0 !important;
}
.issue-toc .heading .thumbnail {
    opacity: 1;
    border-color: #EEE;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.issue-toc .heading .thumbnail:hover {
    opacity: 0.75;
    border-color: #CCC;
}
.issue-toc .galleys .page-header,
.issue-toc .sections .page-header {
    padding: 0 0 2px 0 !important;
    margin: 0 0 5px 0 !important;
    background: none !important;    
}
.issue-toc .galleys .page-header h2,
.issue-toc .sections .page-header h2 {
    color: #000 !important;
    padding: 0 !important;
    text-shadow: none !important;
}
.issue-toc .galleys .page-header h2 small,
.issue-toc .sections .page-header h2 small {
    color: #000 !important;
}
.issue-toc .sections .media-list {
    padding: 0 0 0 0px !important;
}
.issue-toc .sections .media {
    margin: 0 0 15px 0 !important;
}
.issue-toc .sections .media-heading {
    font-family: Anuphan;
    font-size: 16px;
}
.issue-toc .sections .meta .authors {
    font-style: italic;
}
.issue-toc .sections .meta .authors::before {
    content: '';
}
.issue-toc .sections .pages::before {
    content: '';
}
.issues .issue-summary {
    margin-top: 0px !important;
    margin-bottom: 10px !important;
}
.issues .issue-summary .media-left {
    padding: 4px;
    margin-top: 5px;
    max-width: 176px;
    border:1px solid #EEE;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
    float: left;
}
.issues .issue-summary .media-left img {
    opacity: 1;
    width: 100% !important;
    max-width: none !important;
}
.issues .issue-summary .media-left:hover {
    border-color: #CCC;
}
.issues .issue-summary .media-left:hover img{
    opacity: 0.75;
}
.issues .issue-summary .media-body {
    font-family: Anuphan;
    font-size: 16px;
    padding: 0 0 0 5px;
    float: left;
    width: auto !important;
}
.issues .issue-summary .media-body .series {
    margin: 0 !important;
}

.article-details .cover-image {
    opacity: 1;
    padding: 4px;
    margin-top: 5px;
    border:1px solid #EEE;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.article-details .cover-image:hover {
    opacity: 0.75;
    border-color: #CCC;
}
.article-details .list-group .date-published {
    padding: 0 !important;
    border: none !important;
}
.article-details .authors {
    font-family: Anuphan;
    font-size: 18px;
    margin: 0;
}
.article-details .authors .article-author-affilitation {
    font-size: 16px;
}
.article-details .page-header {
    color: #000;
    font-size: 24px !important;
    text-shadow: none !important;
    border:none !important;
    background: none !important;
}
.article-details h2 {
    font-size: 20px;
    font-family: Anuphan;
    margin-bottom: 0;
}
.article-details .downloads_chart {
    margin: 20px 0 0 0 !important;
}
.article-details .downloads_chart h3 {
    font-size: 20px;
    font-family: Anuphan;
    font-weight: normal;
    margin: 0 0 0 0 !important;
    padding: 0;
}
.article-more-details {
    margin: 15px 0 0 0 !important;
}
.article-more-details #citationOutput,
.article-more-details .author-bios .biography {
    margin: 0 !important;
}
.article-more-details .panel-default {
    border:none !important;
    box-shadow: none !important;
    margin: 0 0 15px 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.article-more-details .panel-default .panel-heading {
    color: #000;
    font-size: 20px;
    font-family: Anuphan;
    font-weight: normal;
    padding: 0px 0px;
    border:none !important;
    background: none !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    border-radius: 0 !important;
}
.article-more-details .panel-default .panel-body {
    padding: 0;
    border:none !important;
    background: none !important;
}
#articlesBySameAuthorList {
    margin-top: 20px;
}
#articlesBySameAuthorList h3 {
    color: #FFF;
    font-family: Anuphan;
    text-shadow: 3px 3px 2px #000;
    font-size: 24px !important;
    margin: 0 0 1px 0 !important;
    padding: 10px 10px !important;
    background: #1876F2 url('https://github.com/ochakaew/image-ojs/blob/main/nssc-header.jpg?raw=true') 0px 0px no-repeat;
}
.editor-list {
    width: 100%;
}
.editor-list th {
    font-family: Anuphan;
    font-size: 16px;
    font-weight: bold;
    vertical-align: top !important;
}
.editor-list td {
    vertical-align: top !important;
}
.editor-list .seq {
    text-align: center;
}
.page_contact .address img {
    width: 100%;
    padding: 4px;
    opacity: 1;
    border: 1px solid #ddd;
}
form#login .form-group {
    margin: 5px 0 0 0;
}
form#login .form-group label {
    display: block;
    font-family: Anuphan;
    font-size: 16px;
    font-weight: normal;
}
form#login .buttons {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #DDD;
}
form#login .buttons .btn {
    font-family: Anuphan;
    font-size: 16px;
}

form#register fieldset.login {
    margin-top: 25px;
}
form#register fieldset legend {
    color: #FFF;
    font-family: Anuphan;
    text-shadow: 3px 3px 2px #000;
    font-size: 24px !important;
    margin: 0 0 1px 0 !important;
    padding: 10px 10px !important;
    background: #1876F2 url('https://github.com/ochakaew/image-ojs/blob/main/nssc-header.jpg?raw=true') 0px 0px no-repeat;
}
form#register .form-group {
    margin: 5px 0 0 0;
}
form#register .form-group label {
    display: block;
    font-family: Anuphan;
    font-size: 16px;
    font-weight: normal;
}
form#register .buttons {
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid #DDD;
}
form#register .buttons .btn {
    font-family: Anuphan;
    font-size: 16px;
}

footer[role="contentinfo"] {
    color: #FFF;
    text-align: center;
    font-family: Anuphan;
    padding: 1em 0 !important;
    margin-top: 0 !important;
    /*text-shadow: 3px 3px 2px #999;*/
    background: #1876F2 url('https://github.com/ochakaew/image-ojs/blob/main/nssc-header.jpg?raw=true') 0px -336px no-repeat;
}
footer[role="contentinfo"] .col-md-10 {
    width: 100% !important;
    float: none !important;
}
footer[role="contentinfo"] .col-md-2 {
    display: none;
}
@media screen and (max-width: 1040px) {
    #main-navigation > li > a {
        font-size: 16px;
    }
}
@media screen and (max-width: 990px) {
    .pkp_structure_content {
        width: 100% !important;
    }
    .pkp_structure_content>.pkp_structure_main {
        width: 65% !important;
    }
    .pkp_structure_content>.pkp_structure_sidebar {
        width: 35% !important;
    }
}
@media screen and (max-width: 955px) {
    #main-navigation > li > a {
        font-size: 14px;
    }
}
@media screen and (max-width: 915px) {
    #main-navigation > li > a {
        font-size: 13px;
    }
}
@media screen and (max-width: 875px) {
    form[role='search'] button {
        display: none;
    }
    form[role='search'] .form-control {
        border-right: 1px solid #1876F2;
        -webkit-border-radius: 25px !important;
        -moz-border-radius: 25px !important;
        border-radius: 25px!important;
    }
}
@media screen and (max-width: 812px) {
    #main-navigation > li > a {
        font-size: 12px;
    }
}
@media screen and (max-width: 770px) {
    #main-navigation > li > a {
        padding: 10px 4px;
    }
}
@media (min-width: 768px){
    #nav-menu {
        padding-top: 100px;
    }
}
@media screen and (max-width: 768px) {
    .site-name {
        position: absolute;
        font-size: 28px !important;
        line-height: 28px !important;
    }
    form[role='search'] {
        float: none !important;
        padding: 0 15px !important;
    }
    form[role='search'] .form-group {
        width: 100%;
        margin-bottom: 0;
    }
    .pkp_structure_content>.pkp_structure_main{
        width: 100% !important;
    }
    .pkp_structure_content>.pkp_structure_sidebar{
        width: 100% !important;
    }
    .navbar-header .navbar-toggle {
        z-index: 99;
        margin-top: 45px;
        border-color: #EEE;
        background: none;
        -webkit-border-radius: 0 !important;
        -moz-border-radius: 0 !important;
        border-radius: 0 !important;
    }
    .navbar-header .navbar-toggle:hover,
    .navbar-header .navbar-toggle:focus {
        border-color: #1876F2;
        background: #1876F2 !important;
    }
    .navbar-header .navbar-toggle .icon-bar {
        background-color: #EEE;
    }
    .navbar-header .navbar-toggle:hover .icon-bar {
        background-color: #FFF;
    }
    #main-navigation {
        margin-top: 0;
    }
    #main-navigation > li > a {
        font-size: 16px;
    }
    #main-navigation > li.open > .dropdown-menu {
        border-color: #1876F2 !important;
        background: rgba(63, 174, 227, 0.45) !important;
    }
    #main-navigation > li.open > .dropdown-menu > li a {
        color: #EEE;
        padding-left: 25px;
        /*text-shadow: 3px 3px 2px #333;*/
    }
    .navbar-default .navbar-collapse,
    .navbar-default .navbar-form {
        border: none !important;
    }
    .issues .issue-summary {
        text-align: center;
    }
    .issues .issue-summary .media-left,
    .issues .issue-summary .media-body {
        float: none;
        display: inline-block;
    }
}
@media screen and (max-width: 615px) {
    .navbar-header .navbar-toggle {
        margin-top: 40px;
    }
}
@media screen and (max-width: 595px) {
    .site-name {
        font-size: 24px !important;
        line-height: 24px !important;
    }
    .site-name::after {
        font-size: 20px;
    }
}
@media screen and (max-width: 568px) {
    .navbar-header .navbar-toggle {
        margin-top: 35px;
    }
}
@media screen and (max-width: 530px) {
    .site-name {
        font-size: 20px !important;
        line-height: 20px !important;
    }
    .site-name::before {
        padding-left: 98px !important;
    }
    .site-name::after {
        font-size: 16px;
    }
    .navbar-brand {
        width: 85px;
        height: 85px;
        padding: 5px 5px !important;
        margin: -40px 0 0 0 !important;
    }
}
@media screen and (max-width: 500px) {
    .navbar-header .navbar-toggle {
        margin-top: 28px;
    }
}
@media screen and (max-width: 445px) {
    .navbar-header .navbar-toggle {
        margin-top: 26px;
    }
}
@media screen and (max-width: 437px) {
    .navbar-brand {
        margin: -55px 0 0 0 !important;
    }
}
@media screen and (max-width: 345px) {
    .homepage-image {
        height: auto;
    }
    .navbar-header .navbar-toggle {
        margin-top: 26px;
    }
    .issues .issue-summary .media-left {
        max-width: 100% !important; 
    }
}