/* Page-specific Styles */

/* Table of Contents
 * 
 * >Home
 * >About
 * >Clients
 * >News
 * >Jobs
 * >Contact
 *
 * >Playground: Test CSS Here
 */



/* Procedure for Control Logic:
 * 1) Put radio buttons directly in the file inc/controls/[$section].html.php
 * 2) Put <label>s somewhere visible and link to radio buttons
 * 3) Use the ff. selector:
 *      .control#<control-id>:checked ~ <#banner|#content-body> <...> {}
 */

/* Notes:
 * - URL for images folder: '../img/'
 */







/* >Home */

/* Urgent News Style */
#urgent-news {
    background: #ff0;
    margin: 0 0 2rem;
    padding: 1rem 2rem;
    box-shadow: -0.1rem 0.1rem 0.1rem rgba(0,0,0,0.15);
/*    text-align: center;*/
}
#urgent-news > h2,
#urgent-news > p {display: inline; margin: 0.5rem 0; padding: 0.5rem 0;}
#urgent-news > h2 {font-size: 2rem; font-style: italic;/* color: red;*/}
#urgent-news > h2:after {content: "!!"; display: inline-block; padding-right: 0.5rem;}
#urgent-news > p {font-size: 1.8rem;}
#urgent-news > .read-more {display: block; font-size: 1.6rem; font-style: italic; text-align: right;}
#urgent-news .updated {font-style: italic;}



/* END >Home */







/* >About */

/**/



/* END >About */







/* >Clients */

/* Colors */

/**/
#label-us, #na-list h2 {background: rgb(161, 175, 255);}
#label-mideast, #mideast-list h2 {background: rgb(255, 152, 152);}
#label-asia, #asia-list h2 {background: rgb(216, 216, 139);}
/* highlight chosen control label */
#region-na:checked ~ #banner #label-us,
#region-na:checked ~ #content-body #na-list h2 {color: #e7e8ea; background: rgb(0, 0, 127);}
#region-mideast:checked ~ #banner #label-mideast,
#region-mideast:checked ~ #content-body #mideast-list h2 {color: #e7e8ea; background: rgb(127, 0, 0);}
#region-asia:checked ~ #banner #label-asia {background: rgb(255, 255, 0);}
#region-asia:checked ~ #content-body #asia-list h2 {color: #000; background: #f4f400;}



/* Menu Styles */

#client-list-menu {background: #78a; width: 100%; padding: 0; font-weight: bold; text-align: center;}
#client-list-menu > ul {padding: 0; margin: 0;}
#client-list-menu > ul > li {
    display: inline-block;
    width: 25%;
    margin: 1rem 4.1667%;
    box-shadow: 0 0 0.2rem rgba(0, 0, 0, 0.4);
}
#client-list-menu > ul > li > label {display: block; padding: 1rem 0; border-radius: 0;}



/* Content Styles */

#client-region {width: 100%;}
#client-region h2 {padding: 1rem;}

/* individual client list styles */
#client-region .client-list {margin: 1rem 0; padding: 0;}
#client-region .client-list > h2,
#client-region .client-list > footer {padding: 1rem;}
/*#client-region .client-list h3 {text-align: center;}*/
#client-region .client-list > ul {list-style: none; margin: 0 0 0.8rem; padding: 0; text-align: center;}
#client-region .client-list > ul > li ul {padding: 0 1rem; text-align: justify;}
#client-region .client-list > ul > li li {display: inline-block; margin-right: 1.5rem; padding-bottom: 1rem;}
/*#client-region .client-list > ul > li li:nth-child(2n) {font-weight: bold;}*/
#client-region .client-list .important {font-weight: bold;}



/* Control Logic: content is hidden based on the "clicked"/checked status of choices in the menu */

/* initially hide all elements to be displayed using menu controls */
#banner .client-map/*, .default-text, #client-region .client-list*/ {display: none;}
/* display regional client map based on region chosen */
#region-none:checked ~ #banner .default-map,
#region-na:checked ~ #banner .us-map,
#region-mideast:checked ~ #banner .mideast-map,
#region-asia:checked ~ #banner .asia-map {display: block;}
/* display client list based on region chosen */
/*#region-none:checked ~ #content-body #client-region .default-text,*/
#region-na:checked ~ #content-body #mideast-list,
#region-na:checked ~ #content-body #asia-list,
#region-mideast:checked ~ #content-body #na-list,
#region-mideast:checked ~ #content-body #asia-list,
#region-asia:checked ~ #content-body #na-list,
#region-asia:checked ~ #content-body #mideast-list {display: none;}



/* END >Clients */







/* >News */

#news-list {list-style: none;}
#news-list.column {margin: 0; padding: 1rem 0; width: 100%;}
#news-list h2 {padding-bottom: 1rem;}
.news-article {
    margin: 0.5rem 0;
    padding: 0.5rem 0;
    border-top:     solid grey 0.1rem;
    border-bottom:  solid grey 0.1rem;
}
.news-post-date {padding-top: 0; font-size: 1.4rem; font-weight: normal;}

/* END >News */







/* >Jobs */

#job-openings {padding: 2rem 0;}
#job-openings > header > h1 {padding: 0 0 0.5rem;}
#job-openings > header > .article-date {margin: 0;}
#job-openings h2, #job-openings h3, #job-openings h4, #job-openings h5 {padding: 0;}



/* Job notes style */
#job-notes {padding: 1rem 1rem 1rem 3rem;}
#content-body #job-notes > li {font-size: 1.4rem; line-height: 2.4rem;}
#job-notes > li:first-child {list-style: none; margin-left: -2rem;}
#job-notes h2 {font-size: 1.8rem;}



/* Job list styles */
/*ul*/#job-list {list-style: none;}
#job-list.column {margin: 0; padding: 1rem 0; width: 100%;}
#job-list h2 {padding-bottom: 1rem;}
/*#job-list .page-navigation {text-align: center;}*/



/* Individual Job Opening style */
/*article*/.job-opening {margin: 1.5rem 0; padding: 0.5rem; position: relative; background: url('./img/light_bg.png');}
.job-opening > header,
.job-opening > footer,
.job-opening > section {padding: 0.5rem;}
/*.job-opening > header, .job-category, .job-requirements {margin-bottom: 0.5rem;}*/
/*.job-opening > section {margin-top: 0.5rem;}*/
/* general data style */
.job-opening h4 {clear: left;}
.job-opening h4:after {content: ":"; display: inline-block; padding-right: 0.5rem;}
.job-opening h4, .job-opening p {float: left;}
.job-opening p {margin: 0;/* padding-left: 0.2rem;*/}

/* header style */
.job-opening > header {padding-bottom: 1rem; position: relative; background: rgba(255,255,255,0.65);}
.urgent.job-opening > header {background: rgba(127,193,255,0.35);}
.job-opening > header > h4 {display: none;}
.job-opening > header > p {clear: left;}
/* secondary info style */
.secondary-info {
    position: absolute;
    top: 1rem; right: 0.5rem;
    font-size: 1.4rem;
    line-height: 2rem;
    text-align: right;}
.secondary-info > h4 {display: none;}
.secondary-info > p {float: none;}

/* section/job content style */
.job-opening > section {/*clear: left;*//* background: rgba(164,196,255,0.3)*/}
.job-opening > section > h4 {display: none;}
.job-opening > section > p {display: inline; float: none;}

/* "show more" button style */
.show-more {
    display: none;
    background: rgba(0,0,0,0.3);
    margin: 1rem 0.2rem;
    padding: 0 1rem;
    border: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,0,0,0.15);
    font-size: 1.4rem;
    line-height: 2rem;
    color: #eee;
    text-shadow: 0 0.2rem rgba(255,255,255,0.3);
    float: right;
}

/* footer style */
.job-opening > footer {/*clear: left; */background: rgba(0, 0, 0, 0.05)}
.job-opening > footer > h4:nth-of-type(n+2) {clear: none; margin-left: 5rem;}
.job-opening .back-to-top {font-size: 1.4rem; line-height: 2rem; float: right;}

/* individual job data styles */
.job-title {width: 40%; min-width: 26.5rem;}
.job-post-date {font-size: 1.4rem; font-weight: normal; line-height: 2rem;}
.job-opening > header > .job-post-date {display: block; clear: none;}
/* status style */
.job-status {font-weight: bold;}
.status-go {color: green;}
/* category data */
.job-type {font-weight: bold;}
.job-subtype {font-size: 1.4rem; line-height: 2rem;}
p.job-subtype:nth-of-type(n+2) {float: right;}
/*p.job-subtype:before {content: " > "; display: inline-block; padding: 0 1rem;}*/
p.job-subtype:nth-of-type(n+3):after {content: " | ";}

/* requirements style */
.job-opening > .job-requirements > p:after {
    content: ';';
    display: inline-block;
    margin-left: -0.4rem;
}
.job-opening > .job-requirements > p:first-of-type:after {content: ':';}
.job-opening > .job-requirements > p:last-of-type:after {content: '.';}



/* END >Jobs */







/* >Contact */

/*#google-map {width: 100%; height: 50vh; border: 0; float: left;}*/
#contact #banner-text {padding: 1rem; background: rgba(255, 255, 255, 0.8); font-weight: bold;}
#contact-info h2,
#contact-form h2 {text-align: center;}
#contact-form tbody th {padding-top: 0.4rem; padding-bottom: 0.4rem;}
/*#contact-form textarea*/#message {height: 12rem; resize: none; overflow: auto;}



/* END >Contact */














/* >Playground: Test CSS Here */