/*
------------------------------------------------------------------------------------------------------------------------------

Theming Notes

------------------------------------------------------------------------------------------------------------------------------

DRUPAL CSS Namespacing Model

	.component-name{}
	.component-name--variant{}
	.component-name__sub-object{}
	.component-name__sub-object--variant{}

Drupal 8 follows a SMACSS-style categorization of its CSS rules:

    Base - CSS reset/normalize plus HTML element styling.
    Layout - macro arrangement of a web page, including any grid systems.
    Component - discrete, reusable UI elements.
    State - styles that deal with client-side changes to components.
    Theme - purely visual styling ("look-and-feel") for a component.


------------------------------------------------------------------------------------------------------------------------------
	
    Official UMass Amherst color palette. (Use named colors and abbreviate when possible.)

    Primary Colors:
    maroon: #881c1c  rgb( 136, 28, 28 )
    black  rgb( 0, 0, 0 )
    white  rgb( 255, 255, 255 )

    Secondary Colors:

    #94795d  rgb( 148, 121, 93 )
    #a89968  rgb( 168, 153, 104 )
    #63666a  rgb( 99, 102, 106 )
    #aca39a  rgb( 172, 163, 154 )
    #c69214  rgb( 198, 146, 20 )
    #b86125  rgb( 184, 97, 37 )
    #a8431e  rgb( 168, 67, 30 )
    #b3b995  rgb( 179, 185, 149 )
    #76881d  rgb( 118, 136, 29 )
    #003b5c  rgb( 0, 59, 92 )
    #5b7f95  rgb( 91, 127, 149 )
    #71b2c9  rgb( 113, 178, 201 )
    #5d2a2c  rgb( 93, 42, 44 )
    #41273b  rgb( 65, 39, 59 )

    Accent Colors
 
    #333     rgb( 51, 51, 51 ) 
    #666     rgb( 102, 102, 102 ) 
    #999     rgb( 153, 153, 153 ) 
    #aaa     rgb( 170, 170, 170 )
    #ccc     rgb( 204, 204, 204 )
    #eee     rgb( 238, 238, 238 )
    #beb395  rgb( 190, 179, 149 ) 
    #dbd3ba  rgb( 219, 211, 186 )
    #ece9d4  rgb( 236, 233, 212 )

/*
------------------------------------------------------------------------------------------------------------------------------
	
    Base - CSS reset/normalize plus HTML element styling.

------------------------------------------------------------------------------------------------------------------------------
*/

h1,.alpha, 
h2,.beta,
h3,.gamma,
h4,.delta { color: #666; }

h1, h2, h3 { 
  font-family: inherit; 
  font-weight: bold;
}

#footer h2, #footer p { color: #ccc; }

input, select, textarea {
  font-family: inherit;
  font-size: 1em;
  border: 0;
  box-shadow: 0px 0px 0.1em #7F7F7F inset;
  border-radius: 0;
  margin: 0px;
  padding: 0.25em;
  min-height: 1em;
  max-width: 100%;
  line-height: normal;
}

input.form-submit, input.form-text { border-radius: 0; }

input[type="submit"] {
  max-width: 100%;
  font-size: 1em;
  border: 0;
  margin: 0;
  padding: 0.25em 1em;
  display: inline-block;
  min-height: 1em;
  background: linear-gradient(to bottom, #EEE 0%, #CCC 100%) repeat scroll 0% 0% transparent;
  }

input[type="submit"]:hover {
  box-shadow: 0px 0px 1em #999 inset;
  background: linear-gradient(to bottom, #EEE 0%, #CCC 100%) repeat scroll 0% 0% transparent;
}

input[type="radio"],
input[type="checkbox"] { box-shadow:none; }

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

img[style*="left"]  {margin-right:1em;} /* gives default margins to inline images */
img[style*="right"] {margin-left:1em;}

.sidebar img { /* make images fill the sidebar if large enough */
	height: auto !important;
	max-width: 100% !important;
}


/*
------------------------------------------------------------------------------------------------------------------------------
	
    Layout - macro arrangement of a web page, including any grid systems.

------------------------------------------------------------------------------------------------------------------------------
*/

.region-featured-content { padding-top: 15px; }
.region-featured-content .block { margin: 0; }

#columns { 
  margin-top: 1.5em; 
  padding-top: 1.5em;
}

.article,
.block { margin-bottom: .75em; }

#footer { padding: 1em 0; }

/*
------------------------------------------------------------------------------------------------------------------------------
	
    Component - discrete, reusable UI elements.

------------------------------------------------------------------------------------------------------------------------------
*/



/*
------------------------------------------------------------------------------------------------------------------------------
	
    State - styles that deal with client-side changes to components.

------------------------------------------------------------------------------------------------------------------------------
*/



/*
------------------------------------------------------------------------------------------------------------------------------
	
    Theme - purely visual styling ("look-and-feel") for a component.

------------------------------------------------------------------------------------------------------------------------------
*/

/* Site Name */

#site-name {
  background: url("images/CWC_drupal_banner_top.jpg") no-repeat center 22px;
  background-size: contain;
  text-indent: -9999px;
  height: 140px;
  padding-top: 1em;
}

#site-name a:hover { text-decoration: none; }


/* Main menu */

.nav .block { margin: 0; }

.nav ul,
.nav ul.menu { 
  padding: 0; 
  margin: 0;
}

.nav ul li {
  float: left;
  margin: 0 1px;
  padding: 0;
  list-style: outside none none;
}

.nav li a:link,
.nav li a:visited {
  color: #333;
  background: #eee;
  display: block;
  padding: .5em 1em;
}

.nav li a:hover,
.nav li a:focus,
.nav li a:active,
.nav li a.active,
.nav li a:visited:hover,
.nav li.active-trail a {
  color: #881c1c;
  background: none rgba(255, 255, 255, 0.9);
  text-decoration: none;
}

.nav .expanded ul { display: none; }


/* Responsive Menus */

.responsive-menus.responsified .responsive-menus-simple li a { text-transform: capitalize; }

.nav .responsive-menus.responsified li a.active,
.nav .responsive-menus.responsified li a:link,
.nav .responsive-menus.responsified li a:visited { background: inherit; }

.nav .responsive-menus.responsified li a:hover { color: white; }


/* Flexslider */

.flexslider {
	border: none;
	box-shadow: none;
	margin: 0;
}

.flexslider ul.slides { padding: 0; }

.flexslider .slides li { margin: 0; }

.flexslider .slides img { 
  border: none; 
  padding: 0;
}

.flex-direction-nav a:link,
.flex-direction-nav a:visited {
  color: white;
  opacity: .1;
  border: none;
  text-shadow: none;
}

.flex-caption { 
	background-color: rgba(136, 28, 28, 0.5);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
	padding: 1%;
	position: absolute;
	bottom: 0;
	width: 100%;
	color: white;
  text-align: right;
}

.flex-caption.Left { text-align: left; }

.flex-caption h2 {
	color: white; 
	margin-bottom: 0; 
	font-size: 1.4em; 
	text-decoration: none;
}

.flex-caption p { 
  margin: .5em 0; 
  line-height: 1.2;
}

.flex-caption a:link,
.flex-caption a:visited { 
  color: white; 
  text-decoration: underline;
}


/* Menu Blocks */

.block-menu-block ul { 
  padding: 0; 
  margin: 0;
}

.block-menu-block ul li { list-style: none; }

.block-menu-block li a { 
  display: block; 
	padding: .5em 10px;
	color: black;
	letter-spacing: .02em;
	border: none;
	border-radius: 4px;
	line-height: 1.2;
}

.block-menu-block li a:hover,
.block-menu-block li a:active,
.block-menu-block a.active-trail {
	text-shadow: 0 1px 1px white;
	background: #eee;
	color: #881c1c;
}
.block-menu-block a.active-trail { font-weight: bold; } 

.block-menu-block a.active-trail:hover {text-decoration: none;}


/* Social Media */

.socialmedia ul { 
  padding: 1em 0;
}
 
.socialmedia ul li {
 list-style-type: none;
 float: left;
 padding-right: .5em;
}
 
.socialmedia li a {
  border-radius: 5px; 
	font-size: 2em;
  line-height: 1;
}

.fa-facebook-square,
.fa-facebook { color: #3B5998; } 

.fa-twitter-square,
.fa-twitter { color: #00A0D1; }

.fa-linkedin-square,
.fa-linkedin { color: #4875B4; } 

.fa-pinterest-square,
.fa-pinterest { color: #910101; }

.fa-youtube-play { color: #C4302B; } 

.fa-instagram { color: #4B85B7; }


/* Print links */

li.print_html,
li.print_mail { 
  float: right; 
  margin-left: 0;
}

.fa-print,
.fa-envelope-o { 
  color: #999; 
  font-size: 1.3em;
}

/* Calendar */

table.fc-header { border: none; }

/* Footer */

#footer a { color: white; }


/* Content Images */

/*
.node-content img,
.view-content img {
	border: 1px solid silver;
	padding: .5em;
}
*/

/* Background colors */

#page { background-color: #f6f6f6; }

#header-wrapper { background-color: #eee; }

#nav-wrapper { background-color: #eee; }

#breadcrumb-wrapper { background-color: #edeeee; }

#messages-help-wrapper { background-color: #edeeee; }

#featured-content-wrapper { background: linear-gradient(to bottom, #eee 50%, #aaa 100%);}

#featured-content-wrapper, 
#featured-content-wrapper .image-overlay,
#content-wrapper-beta, 
#content-wrapper-beta .image-overlay { min-height: 0; }

#featured-content-wrapper div.container,
#content-wrapper-beta div.container { 	
  background: none rgba(255, 255, 255, 0.9);
	padding: 0; 
}

#content-wrapper { background-color: white; }

#content-wrapper-beta,
#content-wrapper-gamma { background: #eee; }

#footer-wrapper { background: linear-gradient(to bottom, #333 50%, #444 100%); }

#umass-footer { background: none; }