@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700,600|Oswald:300,400,700);
@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*
font-family: 'Source Sans Pro', sans-serif;
font-family: 'Oswald', sans-serif;
U-M Maize #FFCB05
U-M Blue #00274C
Arboretum Blue #0074bb
Light blue 1 #abe1fa
Light blue 2 #d4effc
Light blue 3 #e7f6fd
Light gray #d6dce2
Light gray #8e908c
Green #48c61a
Light Green #96e789
Gold #cfc096
*/

body {
font: 400 10pt/15pt 'Source Sans Pro', sans-serif;
color: #00274C;
}

main {
max-width: 1400px;
min-width: 850px;
padding: 0 3% 0 3%;
margin: 0 auto;
}

h1 {font: 400 1.75em/1.7em 'Oswald', sans-serif; color: #00274C;}
h2 {font: 300 2em/1.5em 'Oswald', sans-serif; margin: 0 0 .8em 0;}
h3 {font: 400 1.1em/1.5em 'Oswald', sans-serif; margin-top: .4em;}
h4 {font-weight: 700; line-height: 1.3em;}

tab1 {padding-left: 1em;}
tab2 {padding-left: 2em;}
tab4 {padding-left: 4em;}


a:link, a:visited {color: #00274C; text-decoration: none;}
a:hover, a:active {color: #0074bb; text-decoration: none;}

strong {font-weight: 700;}
em {font-style: italic;}
hr {border: 0; height: 0; border-top: 1px solid #00274C;}
::selection {background-color: #abe1fa; color: #00274C;}
::-moz-selection {background-color: #abe1fa; color: #00274C;}
.green {color: #48c61a;}
i.fa-lg {display: block; margin: 1.2em auto 1.6em auto;}

/* Header */

header {padding: 3% 0 2.5% 0; height: 90px;}

#site-logo {display: inline-block; max-width: 400px; float: left; clear: none; width: 50%;}
#site-logo img {width: 100%;}

nav.user-menu ul		{margin-top: 2.1em; float: right; clear: none;}
nav.user-menu ul li		{float: left; clear: none; margin-left: 1.4em;}
nav.user-menu a:link    {color: #00274C; text-decoration: none;}
nav.user-menu a:visited {color: #00274C; text-decoration: none;}
nav.user-menu a:hover   {color: #0074bb; text-decoration: none;}
nav.user-menu a:active  {color: #0074bb; text-decoration: none;}
nav.user-menu .dropdown-content {}

nav.site-menu {text-align:center; padding: 2.2em 0 2em 0;}
nav.site-menu ul {font: 300 2em/1.5em 'Oswald', sans-serif; display: inline-block;}
nav.site-menu li {float: left; margin: 0 .65em 0 .65em;}
nav.site-menu li a:link, nav.site-menu a:visited {color: #00274C; text-decoration: none;}
nav.site-menu li a:hover, nav.site-menu a:active {color: #0074bb; text-decoration: none;}

/* Sections */
section {padding: 5% 0 6% 0; overflow: auto; /*border-top: 1px solid #00274C;*/}
section p {font-size: 1.2em; line-height: 1.5em;}
section .align-left {text-align: right; padding: 5% 2.9% 5% 0; width: 46.9%; }
section .align-right {text-align: left; padding: 5% 0 5% 3.1%; width: 46.9%;
border-left: 1px solid #ddd; margin-bottom: 3%;}
.align-right form {max-width: 65%;}

.align-left   {float: left; clear: none; text-align: left; overflow:auto;}
.align-center {float: none; margin: 0 auto; text-align: center; overflow:auto;}
.align-right  {float: right; clear: none; text-align: right; overflow:auto;}

/* Tables */
.table {border-top: 1px solid #00274C;}
.table .row {overflow: auto; border-top: 1px solid #ddd;}

.table .row:first-of-type {border-top: none;}
.col {
float: left;
clear: none;
width: 17%;
padding: 1.4% 1.5% 1.4% 1.5%;
overflow: auto;
}
.col.span-three {width: 72%}
.col4 {
    float: left;
    clear: none;
    width: 22;
    padding: 1.4% 1.5% 1.4% 1.5%;
    overflow: auto;
}

/* Default Tables */
th {text-align: left;}

/* Flex Rows */
.row-flex {
display: -webkit-flex;
display: flex;
border-top: 1px solid #ddd;
}
.row-flex .col {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: visible;
}

/* Edit Mode */
.edit-mode {
padding: 1.5% 1.7% 1.45% 1.6%;
font-weight: 600;
color: #0074bb;
background-color: #d4effc;
overflow: auto;
}
.edit-mode p:nth-of-type(1) {float: left; clear: none; width: 50%;}
.edit-mode p:nth-of-type(2) {float: right; clear: none; width: 50%; text-align: right;}
.edit-mode a:link, .edit-mode a:visited {color: #0074bb;}
.edit-mode a:hover, .edit-mode a:active {color: #00274C;}

/* User Summary */
.row.user-summary .span-three {margin-top: .75em;}
.row.user-summary ul {overflow: auto; display: inline;}
.row.user-summary ul li {float: left; clear: none; margin-right: 1.4em;}

/* User Info */
.row.user-info {
overflow: visible;
display: -webkit-flex;
display: flex;
border-top: 1px solid #ddd;
}
.row.user-info .col {
overflow: visible;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
padding: 1.4% 1.5% 2.5% 1.5%;
}
.row.user-info a:link, .row.user-info a:visited {color: #0074bb; text-decoration: none;}
.row.user-info a:hover, .row.user-info a:active {color: #0074bb; text-decoration: underline;}



/* Sections */

#change-password {padding-top: 8%;}
#find-users {padding-top: 8%;}
#find-users .align-right form {margin-top: 2.4em;}

section input[type=text], section input[type=password] {
width: 100%;
border: 1px solid #ddd;
padding: .8em .8em;
margin-bottom: .65em;
box-sizing: border-box;
border-radius: 3px;
color: #00274c;
outline: none;
}

section input[type=text]:focus, section input[type=password]:focus {
border: 1px solid #0074bb;
background-color: #e6f5fd;
outline: none;
}

section select {
font-family: inherit;
/* border: 1px solid #d6dce2; */
/* border: 1px solid #00274C; */
border: 1px solid #dddddd;
border-radius: 3px;
outline: none;
margin: .6em 0 2.5em 0;
display: block;
width: 100%;
padding: .4em .5em;
color: inherit;
}

  section select:focus {
  border: 1px solid #0074bb;
  }

  section select option:hover {
  background-color: #d4effc;
  }

.col.align-right form {
overflow: auto;
max-width: 50%;	
}

/* Confirm Row */
.row.confirm {padding: 2% 1.5% 12% 1.5%; border: none;}
.row.confirm p {margin-top: .4em;}
.row.confirm .align-right {margin-left: 1.4em;}

/* Buttons */
a.button, input.button.submit, button.default {
display: block;
text-align: center;
width: 8em;
font: 400 .95em 'Oswald', sans-serif;
text-decoration: none;
padding: .45em 0 .5em 0;
margin-bottom: 2.25%;
border: 1px solid transparent;
border-radius: 3px;
-webkit-border-radius: 3;
-moz-border-radius: 3;
}
a.button.align-center, button.default.align-center {padding: .8em 2em .9em 2em; min-width: 8em; max-width: 8em;}
a.button.primary:link, button.default.primary:link {color: #ffffff; background-color: #00274C; border: 1px solid #00274C;}
a.button.primary:visited, button.default.primary:visited {color: #ffffff; background-color: #00274C; border: 1px solid #00274C;}
a.button.primary:hover, button.default.primary:hover {color: #ffffff; background-color: #0073bb; border: 1px solid #0073bb;}
a.button.primary:active, button.default.primary:active {color: #ffffff; background-color: #0073bb; border: 1px solid #0073bb;}
a.button.secondary:link, button.default.secondary:link {color: #00274C; background-color: #ffffff; border: 1px solid #00274C;}
a.button.secondary:visited, button.default.secondary:visited {color: #00274C; background-color: #ffffff; border: 1px solid #00274C;}
a.button.secondary:hover, button.default.secondary:hover {color: #0074bb; background-color: #e6f5fd; border: 1px solid #0074bb;}
a.button.secondary:active, button.default.secondary:active {color: #0074bb; background-color: #8e908c; border: 1px solid #0074bb;}  
input.button.submit, button.default.submit {margin-top: 2em; float: right; clear: none;}
input.button.submit, button.default.submit {color: #ffffff; background-color: #00274C;}
input.button.submit:visited, button.default.submit:visited {color: #ffffff; background-color: #00274C;}
input.button.submit:hover, button.default.submit:hover {color: #ffffff; background-color: #0074bb;}
input.button.submit:active, button.default.submit:active {color: #ffffff; background-color: #0074bb;}
.cancel {float: left; clear: none; display: inline; margin: 2.2em 0 0 0;}

/** Custom Checkboxes **/
input[type='checkbox'] {display: none;}
input[type='checkbox'] + label:before {
  display: inline-block;
  font-family: FontAwesome;
  font-style: normal;
  font-weight: normal;
  line-height: 1em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-right: 4px;
  width: 10px;
}
input[type="checkbox"] {content: "\f096"; letter-spacing: 10px;}
input[type="checkbox"] + label:before {content: "\f096"; /* Checkbox Unchecked */}
input[type="checkbox"]:checked + label:before {content: "\f046"; /* Checkbox Checked */}
.checkbox label {padding-left: 0;}

/* Dropdown Menus */
.dropdown {position: relative; display: inline-block;}
.dropbtn {border: none; cursor: pointer;}
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.2);
min-width: 100%;
}
.dropdown-content a {padding: .45em 1em .4em 1em; text-decoration: none; display: block;}
.dropdown-content a:hover {background-color: #d4effc;}
.dropdown:hover .dropdown-content {display: block; z-index: 1;}

/* Row text input */
.row-flex .col input[type=text] {
border: none;
background-color:#e7f6fd;
padding: .5em;
width: 100%;
margin: -1.4em -.5em -1em -.5em;
font-family: inherit;
}
.row-flex .col input[type=text]:focus {
border: none;
background-color: #e7f6fd;
outline: none;	
}

.alert {color: red;}

.hideMe {display: none;}

/* Footer */
footer {text-align: center; padding: 5% 0 6% 0; border-top: 1px solid #00274C;}
footer #michigan-medicine-logo {max-width: 110px; margin: 1% auto 3% auto;}
.support-text {font-size: .95em; line-height: 1.6em; color: #aaaaaa;}
.support-text a:link, .support-text a:visited {color: #aaaaaa;}
.support-text a:hover, .support-text a:active {color: #00274C;}

/* Checkboxes */

#user-roles {overflow: auto; padding-bottom: 4em;}
#user-roles .worksheet {
float: left;
clear: none;
background-color: #e6f5fd;
width: 29.33%;
padding: 1.4% 1.5% 2% 1.5%;
margin-right: 1.5%;
overflow: auto;
}
#user-roles .worksheet:nth-child(3) {margin-right:0;}
#user-roles h2 {text-align: center;}
#user-roles h4 {margin: 1.2em 0 .8em 0;}
#user-roles .worksheet ul {padding-bottom: 10px; border-bottom: 1px solid #d4effc;}

#user-roles .inner-col {
font-size: .9em;
float: left;
width: 46%;
padding-right: 2%;
}
#user-roles .inner-col:nth-of-type(2) {margin-left: 4%;}

/*Used in spotlight to scroll the internally nested tables.*/
.horizscroll {
    overflow-x: auto;
    width: 400px;
    padding-bottom: 10px;
    white-space: nowrap;
}

.note-editor.note-frame .note-editing-area .note-editable i {
    font-style: italic !important;
}

.note-editor.note-frame .note-editing-area .note-editable ul {
    list-style: disc outside none !important;
    padding-left: 40px;
}

.note-editor.note-frame .note-editing-area .note-editable ol {
    list-style: decimal outside none !important;
    padding-left: 40px;
}