/* - ploneCustom.css - */
@media all {
/*
 *  This is the file where you put your CSS changes. 
 *  You should preferrably use this and override the 
 *  relevant properties you want to change here instead 
 *  of customizing plone.css to survive upgrades. Writing
 *  your own plone.css only makes sense for very heavy 
 *  customizations. Useful variables from Plone are 
 *  documented at the bottom of this file.
 */
 
/*  (do not remove this :) */
/*  (not this either :) */

.element-invisible {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    overflow: hidden;
    height: 1px;
}

body {
font-family: Arial, sans serif;
text-align: center;
background-color: #EAEAE8;
}

#full-wrapper {
margin: 0 1rem 1rem 1rem;
}

#visual-portal-wrapper {
max-width: 960px;
margin: auto;
text-align: left;
display: flex;
flex-direction: column;
}

#portal-header {
background-color: black;
color: white;
}

#portal-header .hiddenStructure a {
background: #fff;
color: #000;
}

#portal-header .hiddenStructure a:focus {
position: absolute;
overflow: visible;
margin: .5rem;
padding: .5rem 1rem;
z-index: 100;
background: #fff;
top: .5rem;
left: .5rem;
}

#portal-logo {
display: block;
overflow: hidden;
height: 175px;
width: 100%;
position: relative;
}

#portal-logo img {
margin: 0;
padding: 0;
display: block;
position: absolute;
top: 0;
right: 0;
height: auto;
}

#portal-breadcrumbs {
background-color: #787672;
padding-top:0.5em;
padding-bottom:0.5em;
color: #000000;
line-height: 1.88em;
border: 0;
}

#portal-breadcrumbs a, 
#portal-breadcrumbs a:hover,
#portal-breadcrumbs a:focus {
color:white;
}

#portal-breadcrumbs a:hover,
#portal-breadcrumbs a:focus {
text-decoration:underline;
}

#portal-personaltools {
border-top: 0;
border-bottom: 0;
background-color: #C9D6B2;
}

#portal-personaltools li a {
color: #47680C;
}

#portal-column-one, #portal-column-two {
background-color: #DAD8D1;
width:20em;
}

#portal-column-one .portletHeader,
#portal-column-two .portletHeader {
display: none;
border: 0;
background-color: white;
background-repeat: no-repeat;
background-position: center top;
}

#portal-column-one .managedPortlet .portletHeader,
#portal-column-two .managedPortlet .portletHeader,
#portal-column-one .portletLogin .portletHeader {
display: block;
}

.portletLogin .portletHeader a {
visibility: hidden;
}

#portal-column-one .visualPadding, #portal-column-two .visualPadding {
padding:0 1em;
}

#portal-column-one .portlet, #portal-column-two .portlet {
border:0 none;
}

#portal-column-one .portlet .portletItem,
#portal-column-two .portlet .portletItem {
border:0 none;
}

#portal-column-one .portletNavigationTree a img,
#portal-column-two .portletNavigationTree a img {
/*display:none;*/
}

#portal-column-one .portlet,
#portal-column-two .portlet {
background-color: white;
background-repeat: no-repeat;
background-position: center bottom;
margin-top: 0;
padding-top: 0;
padding-bottom: 1.5em;
border-radius: 0 0 1rem 1rem;
}

#portal-column-one li.navTreeItem,
#portal-column-two li.navTreeItem {
padding: .8em .5em .5em .5em;
}

.portlet .navTreeItem a,
.portlet dd.portletItem .navTreeItem a {
display: inline;
background: none;
color: black;
font-size: 110%;
}

.navTreeItem a.state-published,
dd.portletItem .navTreeItem a.state-published {
color: black !important;
}

.navTreeItem a:hover,
.navTreeItem a:focus,
dd.portletItem .navTreeItem a:hover,
dd.portletItem .navTreeItem a:focus {
color: #47680C !important;
text-decoration: none;
background-color: transparent;
border-color: white;
border-bottom: 1px solid #CCCCCC;
}

.navTreeItem a.state-published:hover,
dd.portletItem .navTreeItem a.state-published:hover,
.navTreeItem a.state-published:focus,
dd.portletItem .navTreeItem a.state-published:focus, 
.navTreeCurrentItem:hover,
.navTreeCurrentItem:focus{
color: #47680C !important;
border-bottom: 1px solid #CCCCCC !important;
}

.navTreeCurrentItem {
border: 0 !important;
}

#portal-column-content {
background-color: white;
}

h1, h2, h3, h4, h5, h6 {
text-decoration: none;
border: 0;
}

h1.documentFirstHeading {
color: #47680C;
font-size: 150%;
}

#portal-footer {
margin: 0;
border-top: 0;
border-bottom: 0;
background-color: #787672;
background-repeat: no-repeat;
background-position: center bottom;
padding-bottom: 1.5em;
color: #000000;
text-align: right;	
border-radius: 0 0 1rem 1rem;
}

#portal-footer a, #portal-footer a:visited {
color: #FFFFFF;
}

#portal-footer ul {
    list-style: none;
    margin: 0;
    padding: 5px 20px 0 20px;
}
#portal-footer li {
    display: inline-block;
}
#portal-footer li {
    display: inline;
    padding: 0 5px;
}
.portal-footer-lfloat {
    float: left;
    border-left: 1px solid #333333;
}

#portal-footer .ucla-logo {
    max-width: 3.6rem;
}

#portal-colophon {
background-color: #EAEAE8;
padding: 1em;
}

#portal-colophon ul {
margin: 0;
}

.colophonWrapper {
display:none;
}

.context, .formControls .actionButtons .button, .documentEditable * .context {
background-color: #EAEAE8;
}

.fieldRequired {
color: red;
}

ul.no-bullet {
list-style-type:none;
}

#content a[href^="mailto:"], #content a.link-mailto, #content a[href ^="http:"], #content a.link-external {
background:none;
padding:0;
}

table#prog-schedule {
width:95%;
}

table#prog-schedule td {
font-size:1.2em;
vertical-align:top;
}

#legend {
clear: both;
}

#legend .image-left {
float: none;
clear: both;
margin: .5em 1em;
}

table#prog-schedule-det td {
color:#444444;
}

table#prog-schedule-det td a {
color:#000;
}

table#prog-schedule-det td.in-person {
background:#E2873A;
color:#000000;
vertical-align:middle;
}

#legend .in-person {
background: #E2873A;
color: #000000;
clear: both;
padding: .5em 1em .5em 0;
}

table#prog-schedule-det td.remote {
background:#F0CCA3;
color:#000000;
vertical-align:middle;
}

#legend .remote {
background: #F0CCA3;
color: #000000;
clear: both;
padding: .5em 1em .5em 0;
}

table#prog-schedule-det td.in-person img.image-left {
margin-top:0;
}

table#prog-schedule-det td.remote img.image-left {
margin-top:0;
}

table#prog-schedule-det td.in-person a {
color:#000;
}

table#prog-schedule-det td.remote a {
color:#000;
}

#content a[href^="https:"], #content a.link-https {
padding-left:0;
background:none;
}

table#rfp_list thead th {
text-align:center;
}

table#rfp_list tbody tr {
border-bottom:1px solid gray;
border-top:1px solid gray;
}

table#rfp_list td {
vertical-align:top;
border-bottom:1px solid gray;
padding:2px;
}

.highlight { background:#ffee00; padding:0 5px;}

p.bigbuttonp {
padding: 0;
margin: 1.3em;
font-size: 2em;
}

p.bigbuttonp a#bigbutton {
background:#cde2a7;
color:#000;
font-weight:bold;
padding: 0.8em;
margin: 0;
border:outset;
text-decoration:none;
}

p.bigbuttonp a#bigbutton:hover, p.bigbuttonp a#bigbutton:focus {
background:#E2873A;
color:#000;
}

.documentContent p a {
    text-decoration: underline;
    border-bottom: none;
}

/*  */

/* DOCUMENTATION ON PRE-DEFINED PROPERTIES FROM PLONE */

 /* You can insert colors and other variables from Plone's 
    base_properties by doing:
    
    & dtml-variableName ; (without the spaces, excluded here to not make it render)
    
    Example:
    
    myLink {
        color: & dtml-fontColor ;   (again, without the spaces)
    }
 
   This means you can generate your own elements that use Plone's defaults,
   and respect any customizations people have done. See base_properties for
   the default values.
 
   These are the available properties:
   
   logoName - the file name of the portal logo
   
   fontFamily - the font family used for all text that is not headers
   
   fontBaseSize - the base font size that everything is calculated from
   
   fontColor - the main font color
   
   fontSmallSize - used for various elements like buttons and discreet text
   
   discreetColor - the font color of discreet text

   backgroundColor - the background color 
   
   linkColor - the color used on normal links

   linkActiveColor - color used on active links

   linkVisitedColor - color used on visited links
   
   borderWidth - the width of most borders in Plone
   
   borderStyle - the style of the border lines, normally solid
   
   borderStyleAnnotations - style of border lines on comments etc
   
   globalBorderColor - the border color used on the main tabs, the portlets etc
   
   globalBackgroundColor - background color for the selected tabs, portlet headings etc
   
   globalFontColor - the color of the font in the tabs and in portlet headings
   
   headingFontFamily - font family for h1/h2/h3/h4/h5/h6 headlines
   
   contentViewBorderColor - the content view tabs border color
   
   contentViewBackgroundColor - the content view tabs background color
   
   contentViewFontColor - the font color used in the content view tabs
   
   inputFontColor - the font color used for input elements
   
   textTransform - whether to lowercase text in portlets, tabs etc.
   
   evenRowBackgroundColor - the background color of even rows in listings
   
   oddRowBackgroundColor - the background color of even rows in listings
   
   notifyBorderColor - border color of notification elements like the status message, the calendar focus
   
   notifyBackgroundColor - background color of notification elements like the status message, the calendar focus
   
   helpBackgroundColor - background color of information pop-ups (currently not used)
          
 */



}

@media screen and (max-width: 600px) {
#portal-logo {
min-height: 100px;
height: inherit;
}
#portal-logo img {
height: auto;
width: 170%;
}

#portal-column-one {
width: auto;
}

#portal-column-one .visualPadding {
padding: 1em;
}

#portal-footer ul {
text-align: center;
}

#portal-footer ul li {
display: block;
float: none;
}
}