/**
 * @file
 * beginning style
 *
 */

/* Layout */
/* Section are use for outermost part/element of the page. Section span horizontly entire width(100%) of the screen. It is useful to make horizontal strips span entire width. e.g. header, main and footer section create horizontal wide section
*
*
**/
.section {
  Padding:0 15px;//originaly it is margin.
}
.section:after {
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
.clearfix:after {
  clear: both;
  content: "";
  display: table;
  height: 0;
  visibility: hidden;
}
ul.links.inline li {
    display: inline;
}

/***Styling***/

/*General*/
img {
    max-width: 100% !important;
}
p {
  line-height: 1.34em;
}
p {
  margin: 2px 11px;
}

h2 {
  margin: 5px 2px;
}
.block-title{
	margin:15px 5px
}
hr {
  margin: 0 auto;
}
hr .width25 {
  width: 25%;
  margin: 0 auto;
}
hr .width50 {
  width: 50%;
  margin: 0 auto;
}
hr .width75 {
  width: 75%;
  margin: 0 auto;
}
.box {
  background: #f5f5f5;
  border: 1em solid #f8f8f8;
  border-radius: 11px;
  margin: 1em 3em;
}
.button {
  display: inline-block;
  padding: 5px 11px;
  border-top: 1px solid #aaa;
  border-right: 1px solid #aaa;
  border-bottom: 3px solid #777;
  border-left: 2px solid #555;
  border-radius: 11px;
  margin: 11px;
  color: #0000ff;
  font-weight: 700;
  text-align: center;
  background: #fafafa;
}
a.button {
  text-decoration: none;
}
.button:hover {
  border-top: 3px solid #777;
  border-bottom: 1px solid #aaa;
  border-radius: 11px;
}

/*Drupal elements styling*/
#site-logo {
  float: left;
  height: auto;
  margin: 0.2em;
  max-width:140px
}
#site-name,
#site-slogan {
  display:block;
  clear:right;
  margin:5px 0 5px 150px;/*left margin(last value) should be grater than #site-logo width*/
}
#site-name h1{
  margin: 0;  
}
a#site-name {
  font-size: 1.88em;
  text-decoration: none;
  color: #555;
}
.region-header a {
  text-decoration: none;
}
.region-header li {
  display: inline;
  background: #eee;
  padding: 5px 11px;
  border-radius: 7px;
}
.region-header ul.menu {
  margin: 10px 0;
  padding: 0;
}

/* Header Menu */
.region-header {
  width: 100%;
}
.region-header nav.menu--account {
    float: right;
    text-align: right;
    height: 50px;
}
.region-header nav.menu--account li {
  margin: 0 5px;
}

/* Navigation */
.navbar-toggle {
    background-color: rgba(199, 196, 196, 1) !important;
    border: 1px solid rgba(97, 82, 82, 1);
    border-radius: 4px;
}

#navigation {
  border:1px solid #ddd;
  border-radius:8px;
}
#navigation h2 {
  display:none;
}
#navigation ul.menu {
  margin-left: 0 !important;
}
#navigation .region-primary-menu {
  display:block;
  width:100%;
  height:40px;
  clear:both;
  line-height:40px;
}
#navigation .region-primary-menu li {
  float:left;
}
#navigation .region-secondary-menu {
  display:block;
  width:100%;
  height:40px;
  clear:both;
  line-height:40px;
}
#navigation .region-secondary-menu li {
  float:right;
}
#navigation li a {
  padding:5px 11px;;
}
#main-menu li.dropdown:hover .dropdown-menu{display:block}
#main-menu li.dropdown {
    padding-right: 4px;
}
#main-menu i.glyphicon.glyphicon-chevron-down {
    right: 0;
    top: 17px;
    position: absolute;
	font-size: 0.7em;
}

/*Breadcrumb*/
.breadcrumb {padding:4px 15px;margin-bottom:0px;background-color:transparent;}
.region.breadcrumb .block{padding:5px 22px;}
.breadcrumb ul{margin-bottom:0;}
.breadcrumb li{list-style:none; display:inline}
.breadcrumb li:last-child{display:none;}

/* Horizontal Tabs */
ul.primarytabs {
    list-style: none;
    display: table-row;
}
.primarytabs li {
    display: table-cell;
    padding: 4px 8px;
    border: 1px solid #aaa;
	background:#f5f5f5;
	border-radius: 5px 5px 0 0;
}
.primarytabs li.active {
    border-bottom: 0;
    background: transparent;
}

/* Page node-footer links */
ul.links.inline{
	display: block;
	padding: 0;
	margin: 15px 0;
}
article ul.nodefooter li {
    padding: 4px;
    list-style: none;
    margin: 4px;
}
ul.nodefooter li:last-child{display:none;}
ul.toolbar-menu.nodefooter .separator{display:none;}

/* Book */
nav.book-navigation{padding:1em; border-top:1px solid #ddd; border-bottom:1px solid #ddd; margin:1em;}
nav.book-navigation h2{text-align:center; font-size:1em;}
nav.book-navigation li{list-style:none;}
.book-navigation .page-links {
    border-top: 1px solid #888;
    border-bottom: 1px solid #888;
    text-align: center;
    padding: 0.5em;
}
.book-navigation .page-previous {
    text-align: left;
    width: 42%;
    display: block;
    float: left;
}
.book-navigation .page-up {
    margin: 0 5%;
    width: 4%;
    display: block;
    float: left;
}
.book-navigation .page-next {
    text-align: right;
    width: 42%;
    display: block;
    float: right;
}

/* tags */
.tagsnav ul.pager{text-align:left;}

/*Admin*/
.overlay-active #page-title,
.page-node-edit #page-title {
 font-size: 1em;
}
textarea, input {
  color: #649a3d;
  font-family: helvetica;
  font-size: 1.01em;
  line-height: 1.7em;
  background: #000000;
}
input[type="text"],
input[type="email"],
input[type="search"],
select {
  max-width: 100%;
}
.page-admin table {
  width: 95%;
  max-width: 1020px;
  margin: 0 auto;
}
.page-admin.page-admin-modules table {
  width: 95%;
  max-width: 95%;
}

tr.even td {
  background-color: #fafafa !important;
}  
#overlay-tabs a {
  line-height: 1.5em !important;
}

/* Sidebar */
aside .block:after {
  display: block;
  width: 98%;
  height: 1px;
  background: #fff;
  content: "";
  margin: 1em 0 2em;
  text-align: center;
  box-shadow: 0 2px 5px #ccc;
}
aside .block {
    background: #f8fbff;
    border-radius: 5px;
    padding: 0 8px;
}

/* Custom "Block Type" 
 * For example "blackbox" 'block type' templated is created into theme. 
 * Additionaly you need to create 'block type' through Drupal 8's admin/structure/block/block-content/types and 
 * then admin/structure/block/block-content/types/add for BlackBox 'block type' use name without space.
*/
.block.blackbox {
    background: #111;
	color: #eee;
}
.block.blackbox .block-title,
.block.blackbox a {
    color: #fff;
}

/* Footer */
.region-footer:before {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  content: "";
  margin: 1em 0;
  text-align: center;
  box-shadow: 0 4px 8px #aaa;
}
.region-footer .block {
  padding:5px 1em;
}