/*  
       MDH MAIN STYLESHEET v0.35
       =========================
*/

/*  
       1. OVERALL
       ==========
*/
* {
    box-sizing: border-box;
}

html {
    height: 100%
}

/* 
   Device Specific Settings
   ========================
*/
/* Mobile Phones in portrait and smaller than 600px */ 
.sixth {
    width: 50.00%;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 auto;
    padding: 0;
}
.minor_third, .major_third, .fourth, .fifth, .minor_seventh,
.major_seventh, .harmonic, .octave {
    width: 100.00%;
    display: flex;
    flex: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 auto;
    padding: 0;
}


/* Mobile Phones and Tablets in landscape or larger than 600px */ 
@media screen and (min-width: 600px), (orientation: landscape) {
    .sixth {
	width: 25.00%;
    }
    .minor_third {
	width: 33.33%;
    }
    .fourth, .harmonic {
	width: 50.00%;
    }
    .minor_seventh {
	width: 66.66%;
    }
}

/* Laptops and Desktops */ 
@media screen and (min-width: 1200px) {
    .sixth {
	width: 16.60%;
    }
    .major_third {
	width: 33.33%;
    }
    .fifth {
	width: 50.00%;
    }
    .major_seventh {
	width: 66.66%;
    }
    .harmonic {
	width: 100%;
    }
}

/* 
   End of Device Specific Settings
   ===============================
*/


/*  
       2. SECTIONS
       ===========
*/
body {
    color : #282842;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans",
		 "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    font-size: 100%;
    height: 100%;
    font-weight: 400;
    line-height:1.5em;
    padding: 0;
    margin: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    background-color: #E8FFFF;
}

header, main, footer {
    width: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    display: flex;
    flex-wrap: wrap;
}

header, footer {
    background-color: #E3F9FF;
    flex-shrink: 0;
}

header {
    	background: url(/static/images/templatemo_header.png) no-repeat;
	background-size: cover;
}

main {
    flex: 1 0 auto;
}

/*  
       3. ELEMENTS
       ===========
*/
a {
    text-decoration: none;
}

a, a:link, a:visited {
	color: #3A9900;
}

a:hover {
    color: #7070BA;
    text-decoration: none;
}

p { margin: 0px; padding: 0 0 10px 0; }
img { border: none; }

h1, h2, h3, h4, h5, h6 { font-weight: normal; color: #505085; }

h1 { font-size: 30px; margin: 0 0 15px 0; padding: 5px 0; color: #505085; }
h2 { font-size: 23px; margin: 0 0 0 0;    padding: 0.5em 0; color: #505085;}
h3 { font-size: 19px; margin: 0 0 0 0;    padding: 0; }
h4 { font-size: 17px; margin: 0 0  8px 0; padding: 0; }
h5 { font-size: 15px; margin: 0 0  5px 0; padding: 0; }
h6 { font-size: 13px; margin: 0 0  5px 0; padding: 0;}

blockquote { font-style: italic; }
cite { font-weight: bold; }
cite span { color: #fff; }

form { 
    margin: 0px;
    padding: 0px;
}


form input {
    font-size: 13px;
    width: 340px;
    padding: 5px;
    background: #9999FF;
    color: #404000;
    border: 3px solid #505085;
    border-radius: 4px;
}

input {
    font-size: 12px;
    width: 97%;
    padding: 4px;
    background: #9999FF;
    color: #404000;
    border: 3px solid #505085;
    border-radius: 4px;
}

form input[type=checkbox] {
    width  : 30px;
    position: relative;
    top: 3px
}

form label {
    display: block;
    width: 300px;
    margin-right: 10px;
    font-size: 13px;	
}

form select {
    width: 340px;
    padding: 5px;
    background: #9999FF;
    color: #404000;
    font-size: 13px;
    line-height: 1;
    border: 3px solid #505085;
    border-radius: 4px;
    height: 34px;
    
}

form textarea {
    font-size: 13px;
    width: 340px;
    height: 200px;
    padding: 5px;
    background: #9999FF;
    color: #404000;
    border: 3px solid #505085;
    border-radius: 4px;
}

form input[type='submit'] {
    margin-top: 20px;
    font-size: 13px;
    width: 340px;
    background: #7070BA;
    color: #d8ff00;
    border: 3px solid #505085;
    border-radius: 4px;
}

form input[type='button'] {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 13px;
    width: 340px;
    background: #7070BA;
    color: #d8ff00;
    border: 3px solid #505085;
    border-radius: 4px;
}

table { border-collapse:collapse;}

label.foo {
    display: block;
    padding-left: 15px;
    text-indent: -15px;
    width: 100%;
}

input[type=checkbox].foo {
    width: 15px;
    height: 15px;
    padding: 0;
    margin: 0 0.7em;
    position: relative;
    top: 0;
}


/*  
       4. CLASSES
       ==========
*/
.cleaner { clear: both; width: 100%; height: 0px; font-size: 0px;  }
.cleaner_h10 { clear: both; width:100%; height: 10px; }
.cleaner_h20 { clear: both; width:100%; height: 20px; }
.cleaner_h30 { clear: both; width:100%; height: 30px; }
.cleaner_h40 { clear: both; width:100%; height: 40px; }
.cleaner_h50 { clear: both; width:100%; height: 50px; }
.cleaner_h60 { clear: both; width:100%; height: 60px; }

.money {
    text-align : right;
}

.centre {
    text-align : center;
}

.left {
    text-align : left;
}

.right {
    text-align : right;
}

.date {
    text-align : center;
    font-style : italic;
    font-size  : 10px;
    color      : #303030;
}

.pipeline_detail {
    text-align : right;
    font-size  : 12px;
    border     : 1px solid #C8C8C8;
}

.pipeline_bold {
    text-align     : left;
    color          : #2060C0;
    vertical-align : top;
    font-weight    : bold;
}

.pipeline_italic {
    text-align  : left;
    font-style  : italic;
}

.pipeline_name {
    font-size  : 20px;
}

.pipeline_member {
    text-align : center;
    font-size  : 0.65em;
    border     : 1px solid #666666;
}

.pipeline_member_l {
    text-align : left;
    padding    : 0 1em;
    font-size  : 0.65em;
    border     : 1px solid #666666;
}

.pipeline_member_r {
    text-align : right;
    padding    : 0 1em;
    font-size  : 0.65em;
    border     : 1px solid #666666;
}

.pipeline_comments {
    text-align : left;
    font-size  : 12px;
    border     : 1px solid #C8C8C8;
}

.pipeline_header {
    text-align  : center;
    font-size   : 10px;
    font-weight : bold;
    cursor      : pointer;
    border      : 1px solid #666666;
}

.pipeline_header_l {
    text-align  : left;
    padding     : 0 1em;
    font-size   : 10px;
    font-weight : bold;
    cursor      : pointer;
    border      : 1px solid #666666;
}

.wip_detail {
    font-size  : 10px;
    padding    : 0 0 0 0.5em;
    border     : 1px solid #C8C8C8;
}

.wip_detail_c {
    text-align : center;
    font-size  : 10px;
    padding    : 0 0 0 0.5em;
    border     : 1px solid #C8C8C8;
}

.report_detail {
    font-size  : 13px;
    padding    : 0.2em 0.6em;
    border     : 1px solid #C8C8C8;
}


.sender {
    font-style : italic;
    font-size  : 10px;
    color      : #303030;
}

.words {
    text-align : left;
}

.job_no {
    text-align : center;
}

.float_l {
    float: left;
}

.float_r {
    float: right;
}

.report_header {
    font-size : 11px;
}

.head_row {
    font-size  : 13px;
    font-weight : bold;
    line-height: 2em; 
    text-align : left;
}

.foot_row {
    font-weight : bold;
}


.templatemo_list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.templatemo_list li {
    margin: 0 0 15px 15px;
    padding: 0 0 0 30px;
    background: url(/static/images/templatemo_list.png) top left no-repeat;
}


.button a {
    width: 60px;
    padding: 4px 25px 4px 0;
    background: url(/static/images/templatemo_readmore.png) center right no-repeat;
    color: #12758e;
    font-weight: bold;
    font-size: 10px;
    text-align: left;
    text-decoration: none;
}

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

.news_box {
    margin-bottom: 20px;
    padding: 10px 5px 20px 5px;
    border: 2px solid #D3E9EF;
    border-radius: 4px;
}

.news_box:hover {
    background: #C5C5FF;
    border: 2px solid #505085;
    border-radius: 4px;
}

.news_box img {
    float: right;
    width: 80px;
    border: 1px solid #FFF;
    padding: 2px;
}

.news_box p {
    float: left;
    width: 140px;
    margin-bottom: 0;
    padding: 3px;
}

.work_area {
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}

.work_area p, h4, h5, h6 {
    padding : 2px 6px;
}

.work_area table {
    border-collapse : separate;
    padding : 2px 8px;
    width : 100%;
}

.two_column {
	border: 1px solid #505085;
	flex: 1 0 48%;
	margin : 2px;
	font-size: 12px;
	line-height: 1.2; 
}

.two_column form label {
	display: block;
	width: 223px;
	padding: 2px 0px 1px;
	margin-left: 25px;
}

.two_column form input {
    margin-left: 25px;
    width: 223px;
    padding: 5px;
    background: #9999FF;
    color: #404000;
    border: 3px solid #505085;
    border-radius: 4px;
}

.two_column form input[type='submit'] {
    margin-top: 15px;
    margin-left: 25px;
    font-size: 12px;
    width: 240px;
    background: #7070BA;
    color: #d8ff00;
    border: 3px solid #505085;
    border-radius: 4px;
}

.two_column form input[type='checkbox'] {
    width  : 30px;
    position: relative;
    top: 3px
}

.two_column form select {
    margin-left: 25px;
    width: 240px;
    padding: 5px;
    background: #9999FF;
    color: #404000;
    line-height: 1;
    border: 3px solid #505085;
    border-radius: 4px;
    height: 34px;
}

.two_column form textarea {
    margin-left: 25px;
    width: 223px;
    height: 60px;
    padding: 5px;
    background: #9999FF;
    color: #404000;
    border: 3px solid #505085;
    border-radius: 4px;
}


.one_column {
    border: 1px solid #505085;
    flex: 1 0 98%;
    margin : 2px;
    font-size: 12px;
    line-height: 1.2; 
}

.mail_box {
    border: 1px solid #ACACBD;
    padding: 4px;
    font-size: 12px;
    line-height: 1.2; 
}

.mail_box label {
    width: 100%;
}

.mail_box textarea {
    width: 96%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mail_box select {
    width: 70%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mail_box  input[type='submit']{
    width: 100%;
}

.mail_box  input{
    width: 96%;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.mail_header {
    color: #202020;
    font-style: italic;
}

.mail_body {
    padding: 5px;
}

.message {
    color: #F90;
}
.error {
    color: #F00;
}

.pending {
    color: #3AEE00;
}

.due {
    color: #FF8000;
}

.overdue {
    color: #F00;
}

.public {
    color: #FF8000;
}

.jobdetail {
    padding: 0 0 15px 85px;
}


.flag_lg {
    position: relative;
    top: 15px
}

.flag_sm {
    position: relative;
    top: 6px
}

.flag_pl {
    position: relative;
    top: 2px
}

.org_id_lg {
    position: relative;
    top: 4px
}

.org_id_sm {
    position: relative;
    top: 3px
}

.org_id_xs {
    position: relative;
    top: 1px
}

.pref_org_lg {
    position: relative;
    top: 4px
}

.pref_org_sm {
    position: relative;
    top: 2px
}

.icon_lg {
    position: relative;
    top: 4px
}

.icon_sm {
    position: relative;
    top: 2px
}

.paperclip {
    position: relative;
    top: 2px;
    padding: 0 7px ;
}

.country_label_r {
    width: 280px; 
    display: block;
    float: right;
}

.country_label_l {
    width: 280px; 
    display: block;
    float: left;
}

.skill_label {
    font-size: 12px;
}

.dfid_proforma {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #000000;
}

.dfid_proforma table {
    border-collapse: collapse;
    width: 100%;
    border: 1px solid;
    line-height: normal;
}

.dfid_proforma th {
    border:1px solid;
}

.dfid_proforma td {
    border-style: none solid;
    border-width: 1px;
}


.mdh_table_control {
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans",
     "Bitstream Vera Sans", "Liberation Sans", Verdana, "Verdana Ref", sans-serif;
    width: 97%;
    padding: 5px;
    font-size: 11px;
    line-height: 1;
    text-align: center;
    border: 3px solid #444444;
    border-radius: 4px;
    height: 29px;
}

.mdh_green {
   background: #33DD33;
}

.mdh_amber {
   background: #EEEE33;
}

.mdh_red {
   background: #FF6666;
}

.mdh_light_green {
   background: #AAFFAA;
}

.mdh_light_amber {
   background: #FFFFDD;
}

.mdh_light_red {
   background: #FFDDDD;
}

.mdh_budget {
   color: #CB6015;
}

.mdh_actual {
   color: #4169E1;
}

.mdh_negative {
   color: #FF0000;
}

.mdh_orange {
    color: #FF8000;
}

.mdh_social_media_icon {
    padding: 0 1em;
}

.mdh_information_link {
    width: 100%;
}

.mdh_menu_icon {
    margin-left: auto;
    padding: 0;
    align-self: flex-end;
}

.centered {
    width: 400px;
    margin-left: auto;
    margin-right: auto;
}

.centered_600 {
    width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.centered_300 {
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}

.mdh_update_box {
    width: 95%;
    height: 200px;
    overflow: auto;
    padding: 0.5em;
    margin: 0 0.5em;
    border: 1px solid #666666;
    font-size: 0.7em;
}

.mdh_table {
    width: 100%;
    border: 1px solid #CCCCCC;    
}

.mdh_long_table {
    width: 95%;
    height: 500px;
    overflow: auto;
    border: 1px solid #CCCCCC;    
}

.mdh_wide_table {
    overflow-x: auto;
    width: 100%;
    border: 1px solid #CCCCCC;    
}

.resource_box {
    display: flex;
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    width: 90%;
    height: 90%;
    font-size: 1.5em;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    margin: auto;
}

.resource_link {
    margin: auto auto 20px;
}

.client_link_box {
    background-color: #E0FFFF;
    width: 85%;
    height: 95%;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    padding: 0.6em 0.5em;
}

.plan_link_box {
    background-color: #FFFFF0;
    width: 85%;
    height: 95%;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    padding: 0.6em 0.5em;
}

.related_job_box {
    background-color: #EFFFFF;
    width: 85%;
    height: 95%;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    padding: 0.6em 0.5em;
}

.job_event_box {
    background-color: #FFFAFA;
    width: 85%;
    height: 95%;
    border: 1px solid #CCCCCC;
    border-radius: 20px;
    padding: 0.6em 0.5em;
}

.dash_alert_box {
    background-color: #FFEFEF;
    width: 95%;
    margin: 0 auto;
    display: none;
    border: 2px solid #FF6000;
    border-radius: 20px;
    padding: 0.6em 0.5em;
}

.reminder_info_box {
    background-color: #FEFFEF;
    margin: 0 auto;
    display: none;
    border: 2px solid #6FF000;
    border-radius: 20px;
    padding: 0.6em 0.5em;
    font-size: 0.8em;
}

.whos_online_box {
    background-color: #FCFCFF;
    width: 85%;
    height: 95%;
    margin: 0 auto;
    border: 2px solid #4444AA;
    border-radius: 20px;
    padding: 0.6em 0.5em;
}

.clone_chkbox_wrapper {
    display: flex;
    width: 400px;
}

.clone_chkbox {
    width: 1.5em;
    height: 1.5em;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
    position: relative;
    top: -1px;
}

.clone_chkbox_lbl {
    display: block;
    padding-left: 2em;
    text-indent: -1em;
}

.form_button {
    margin-top: 20px;
    font-size: 13px;
    width: 340px;
    background: #7070BA;
    color: #d8ff00;
    border: 3px solid #505085;
    border-radius: 4px;
}


.private {
    color: #888888;
    font-style: italic;
}

.mdh_loading{
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background: rgba(250,255,255,1.0) url(/static/images/spinner_2.gif) no-repeat;
    background-position: right 50% top 10em;
}



/*  
    5. INDIVIDUAL ITEMS
    ===================
*/
#templatemo_wrapper {
    width: 100.00%;
    display: flex;
    flex: none;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: 0 auto;
    padding: 0;
}

#site_title {
    text-align: center;
    justify-content: center;
    padding: 1em;
}

#site_title a span {
    display: block;
    text-align: center;
    font-family: "Times New Roman",times,serif;
    font-size: 1.5em;
    color: #7070ba;
    font-weight: normal;
    letter-spacing: 0.1em;
}

#username {
    color: #7070ba;
    align-self: center;
    justify-content: space-around;
    font-size: 1.5em;
}

#templatemo_main {
    width: 940px;
    padding: 60px 40px 30px 10px;
    background: url(/static/images/templatemo_content_top.png) no-repeat;
    flex-grow: 1;
    flex: 1;
    overflow: auto;
}

#templatemo_sidebar {
    float: left;
    width: 280px;
}

#templatemo_menu {
    flex-direction: row;
    justify-content: space-around;
}

#templatemo_menu ul {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

#templatemo_content {
    padding: 1em;
}

#templatemo_content p {
    text-align: justify;
    margin-bottom: 10px;
}

#sidebar_box {
    padding-left: 2em;
}

#templatemo_footer {
    font-size: 0.8em;
}

#me_fecit {
    font-family: "Times New Roman",times,serif;
    font-size: 0.7em;
    justify-content: center;
}

#contact_details {
    justify-content: center;
}

#templatemo_footer img {
    float: left;
}

#mdh_site_title {
    text-align: center;
    justify-content: center;
    padding: 1em;
}

#mdh_username {
    text-align: center;
    justify-content: center;
    padding: 1em;
    flex-flow: row wrap;
    font-size: 1.5em;
}

#mdh_welcome {
    text-align: center;
    justify-content: center;
}

#mdh_logout {
    text-align: center;
    justify-content: center;
}

#mdh_nav_list {
    width: 100%;
    list-style-type: none;
    display: flex;
    flex-flow: row wrap;
    margin: 0;
    padding: 0 1em;
}

#mdh_nav_list li {
    padding: 0.5em 1em;
    min-width: 8em;
    text-align: center;
}

#mdh_nav_list li a {
    width: 100%;
    text-align: center;
}

#mdh_dash_my_pipeline_table {
    padding: 0 0;
}

#mdh_dash_my_event_table {
    padding: 0 0;
}

#mdh_menu_bars {
    margin-left: auto;
    display: none;
}


@media screen and (max-width: 1200px) {
    .mdh_optional {display: none;}
    #mdh_nav_list li {min-width: 1em;}
    #mdh_menu_bars {
	display: inherit;
    }
}

#mdh_contact_details_john, #mdh_contact_details_jim, #mdh_info_links,
#mdh_contact_details_hdr, #mdh_info_hdr {
    padding: 0.5em;
}

#mdh_social_media {
    justify-content: flex-start;
    padding: 1em;
}