/*
	2019 Profile App Dashboard Design
	Peter Thompson
*/

body {
	color: #333333;
    background: #F4F4F4;
}

a.btn,
button.btn,
input.btn {
    padding: 6px 10px;
    text-decoration: none;
    border: none;
    border-radius: 3px;
    background: #88F;
    color: white;
	font-size: 14px;
	cursor: pointer;
}

.btn:hover {
    background: #55E;
}

a.btn.simple {
    background: white;
    border: 1px solid #CCC;
    color: inherit;
}

a.btn.compact,
button.btn.compact,
input.btn.compact {
    font-size: 11px;
    padding: 4px 10px 4px 10px;
    border-radius: 3px;
}

input.btn[disabled],
a.btn[disabled] {
    background: #AAA;
}

#admin-controls a.btn {
    border: none;
    border-radius: 3px;
    background: #88F;
    padding: 6px 10px;
    margin-right: 4px;
    font-size: 14px;
}


#admin-controls .additionalinfo a.btn,
#admin-controls #ratings-column a.btn,
#admin-controls #comments-column a.btn {
	background: #888;
}

#admin-controls .admin-actions {
    pointer-events: auto;
    float: right;
}

#page_header {
	padding: 20px 30px 0 30px;
}

#layout_dashboard #page_header {
    margin-left: 360px;
}

#layout_simple #page_header {
	max-width: 960px;
	margin: 0 auto;
}


#page_header .logo {
    height: 50px;
}

#page_sidebar {
    background-color: #555;
    color: #DDD;
    font-size: 1.2em;
    overflow-x: hidden;
    overflow-y: hidden;
    display: block;
    position: fixed;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    width: 360px;
}

#page_personal_header {
	display: none;
	font-size: 1.2em;
	clear: both;
	margin-top: 1em;
}

#page_personal_header h1 {
	margin: 0;
}

#page_body_wrapper {
    margin-left: 360px;
    padding: 30px;
    clear: both;
}

#page_body_wrapper_simple {

}

#page_body {
    column-count: 2;
    column-gap: 2em;
}

#page_body_simple {
	margin: 30px auto;
	max-width: 960px;
}

#layout_dashboard #page_body .panel-wrapper {
    display: inline-block;
    margin-bottom: 2em;
    width: 100%;
}

#sidebar_photo {
    background: #888;
    height: 350px;
    width: 100%;
    overflow: hidden; 
}

#sidebar_photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sidepanel {
    padding: 20px 30px;
}

.sidepanel.title {
    padding-top: 8px;
    padding-bottom: 8px;
    background: #777;
}

.sidepanel.title h3 {
    margin: 0;
    padding: 0;
}

.sidepanel .description {
    overflow-y: scroll;
    height: 8em;
}

.sidepanel.actions {
    position: fixed;
    bottom: 0;
    background: #666;
    width: 100%;
}

.sidepanel .footer {
    margin-top: 1em;
}

#page_sidebar a.btn.compact,
#page_sidebar button.btn.compact,
#page_sidebar input.btn.compact {
    font-size: 12px;
    padding: 6px 10px 5px 10px;
    border: 1px solid #999;
    background: transparent;
    border-radius: 3px;
    margin-right: 4px;
}

#page_sidebar a.btn:hover {
    background: #999;
}

#page_sidebar .sidepanel.actions a.btn.compact {
    border: none;
    background: #88F;
}

#primary_nav a.btn.btn-action,
#page_sidebar .sidepanel.actions a.btn.btn-action {
    background: #7B7;
}

#page_sidebar .sidepanel.actions a.btn:hover {
    background: #AAF;
}

#layout_dashboard #facebox .popup {
    border: 16px solid white;
}

#layout_dashboard #facebox_overlay {
    opacity: 0.5 !important;
}



.panel {
	border-bottom: 0px solid #CCC;
    background: white;
    color: #222;
	padding: 24px;
	overflow: hidden;
    margin-bottom: 0;
    border-top: 0px solid #AAA;
}

.panel.panel-a {
    border-color: #9F9;
}

.panel.panel-b {
	border-color: #99F;
}

.panel.panel-c {
	border-color: #F99;
}

.panel.panel-d {
	border-color: #AAA;
}

.panel.panel-adminonly {
	background-color: #DDD;
}

.panel.panel-highlight {
	background-color: #FF9;
}


.panel-icon {
    margin-right: 7px;
    border-radius: 4px;
    color: white;
    padding: 4px 8px;
    display: inline-block;
    background-color: #CCC;
}

.panel.panel-basic .panel-icon {
    background-color: rgb(106, 106, 252);
}

.panel.panel-furtherinfo .panel-icon {
    background-color: rgb(153, 153, 250);
}

.panel.panel-restrictions .panel-icon {
    background-color: rgb(212, 100, 100);
}

.panel.panel-availability .panel-icon {
    background-color: rgb(77, 128, 77);
}

.panel.panel-postal .panel-icon {
    background-color: rgb(77, 128, 77);
}

.panel.panel-referee .panel-icon {
    background-color: rgb(184, 94, 196);
}

.panel.panel-prefs .panel-icon {
    background-color: rgb(79, 150, 79);
}

.panel.panel-work .panel-icon {
    background-color: rgb(241, 55, 55);
}

.panel.panel-education .panel-icon {
    background-color: rgb(77, 128, 77);
}

.panel.panel-quals .panel-icon {
    background-color: rgb(191, 113, 255);
}

.panel.panel-sports .panel-icon {
    background-color: rgb(146, 206, 34);
}

.panel.panel-adminonly .panel-icon {
    background-color: #777;
}

.panel.panel-job-offers .panel-icon {
    background-color: #F33;
}

.panel.panel-contracts h2 img {
    height: 40px;
}

.panel h1,
.panel h2 {
	margin: 0 0 10px 0;	
}

#layout_dashboard .panel a.btn {
    background: white;
    border: 1px solid #CCC;
    color: inherit;
}

#layout_dashboard .panel a.btn:hover {
	background: #CCC;
}



.panel ul {
	padding-left: 25px;
}

.panel .footer {
	margin-top: 16px;
}

.panel .item .links img {
	height: 16px;
	opacity: 0.5;
    margin: 2px 3px;
}

.panel .item .links img:hover {
	opacity: 1;
}



/* Media Rules Overrides */

@media only screen and (min-width : 1500px) {
    #page_body {
        column-count: 3;
    }
}

@media only screen and (max-width : 992px) {
    #page_sidebar {
    	display: none;
	}
	#page_personal_header {
		display: block;
	}
    #page_body_wrapper {
    	margin: 0;
    	padding: 0;
    }
	#layout_dashboard #page_header {
		margin: 0;
		padding: 10px;
	}
}

@media only screen and (max-width : 768px) {
    #page_body {
        column-count: 1;
	}
	#primary_nav {
		float: none;
	}
	#layout_dashboard #page_body .panel-wrapper {
		margin-bottom: 4px;
	}
	.panel {
		padding: 20px 30px;
	}
	
}