/* 8. CUSTOM LAYOUT & TYPOGRAPHY (Daddy bear)
----------------------------------------------------------------------------------------*/
#container {
	padding: .809em 0 .809em 0;
	margin: 0 auto; 
	max-width: 62em;
	}

.main-body {
  margin-top: 2em; 
  }

.tabcontainer { 
  text-align:center; 
  margin: 0;
  vertical-align: top;
}

.tab {
  vertical-align: top;
  display: inline-block;
  border-radius: 0px 0px 2mm 2mm;
  margin: 0 0 0 -1px;
  border-width: 0 1px 1px 1px;
  padding: 2mm;
  width: 30%;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(15%, rgb(231,231,231)), color-stop(85%, rgb(231,231,231)), color-stop(100%, rgb(160,160,160))); 
  background: -moz-linear-gradient(top, white 0%, rgb(231,231,231) 15%, rgb(231,231,231) 85%, rgb(160,160,160) 101%); 
}

.activetab {
  padding-top: 3mm;
  padding-bottom: 3mm;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(15%, rgb(241,218,233)), color-stop(85%, rgb(241,218,233)), color-stop(100%, rgb(221,146,202))); 
  background: -moz-linear-gradient(top, white 0%, rgb(241,218,233) 15%, rgb(241,218,233) 85%, rgb(221,146,202) 101%); 
}

p.abstract { font-size: 1.309em; line-height: 1.3em; margin-bottom: 1em; max-width: 100%; text-align: left; }

.wide2 { 
  max-width: 100%;
  vertical-align: top;
  column-count: 2; column-gap: 2em; 
  -moz-column-count: 2; -moz-column-gap: 2em; 
  -webkit-column-count: 2; -webkit-column-gap: 2em; 
}

.wide, .wide p, .wide ul, .wide ol { 
  max-width: 100%;
  vertical-align: top;
}

.optdivider {
    font-size: 1.836em;
    margin: 0.2em 0 .6em 0; 
    color: #86328c;
    text-align: center;
    width: 100%;
    display: block;
    clear: both;
}
  
aside { margin-top: 0; float: right; clear: right; width: 30em; }

footer { 
  padding: 1.618em 5em 1em 5em;
  clear: both;
  }




/* 9. CUSTOM LAYOUT & TYPOGRAPHY (Mummy bear)
----------------------------------------------------------------------------------------*/
@media screen and (min-width: 30em) and (max-width: 66em) {

#container { width: 30em; 
	padding: .809em 0 .809em 0;
}

.tabcontainer { 
  text-align:left; 
  margin: 0 0 0 -2em;
}

.tab {
  display: block;
  border-radius: 0px 2mm 2mm 0px;
  margin: -1px 0 0 0;
  border-width: 1px 1px 1px 0;
  padding: 2mm 2mm 2mm 2em;
  width: 80%;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(5%, rgb(231,231,231)), color-stop(98%, rgb(231,231,231)), color-stop(100%, rgb(160,160,160))); 
  background: -moz-linear-gradient(left, white 0%, rgb(231,231,231) 1.5em, rgb(231,231,231) 98%, rgb(160,160,160) 101%); 
}

.activetab {
  padding-left: 3em;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, white), color-stop(5%, rgb(241,218,233)), color-stop(98%, rgb(241,218,233)), color-stop(100%, rgb(221,146,202))); 
  background: -moz-linear-gradient(left, white 0%, rgb(241,218,233) 1.5em, rgb(241,218,233) 98%, rgb(221,146,202) 101%); 
}

p.abstract { text-align: left; }

.wide2 { 
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}

.wide { 
  column-count: 1;
  -moz-column-count: 1;
  -webkit-column-count: 1;
}

.optdivider {
    margin: 0;
    height: 0;
    border-bottom: none;
    display: none;
}
  
aside { float: none; }

footer { 
  padding: 1.618em 0 1em 0;
  clear: both;
  }


}