@import 'base/reset.css';

/*************************************************************
layout for wamo_321 template
  instance characteristics such as:
    colors, typefaces, module specific css
  should be set in custom.css
**************************************************************/

body {}

#page {
  margin:0 auto;
  max-width:1250px;
  padding-bottom:20px;
  width:96.0000000000%; /*1200/1250*/
}

#page-inset {
  margin:0 auto;
  width:100.0000000000%; /*1200/1200*/
}

#area-0 {
  width:100%; /* of page-inset */
}

#area-0-inset {}

#area-1 {
  width:100%; /* of page-inset */
}

#area-1-inset {}

#area-2 {
  display:table-cell;
  vertical-align:top;
  width:25.0000000000%; /*300/1200*/
}

#area-2-inset {
  margin:0 auto;
  width:90.0000000000%; /*270/300*/
}

#area-3 {
  display:table-cell;
  vertical-align:top;
  width:50.0000000000%; /*600/1200*/
}

#area-3-inset {
  margin:0 auto;
  width:95.0000000000%; /*570/600*/
}

#area-4 {
  display:table-cell;
  vertical-align:top;
  width:25.0000000000%; /*300/1200*/
}

#area-4-inset {
  width:93.3333333333%; /*280/300*/
}

#area-5 {}

#area-5-inset {
  margin:0;
  padding:0;
  width:100.00000000000%; /*1170/1200*/
}

#area-6 {
  margin:0 auto;
  /*width:98.3051%;*/ /*1160/1180*/
}

#area-6-inset {}

/********************************************************
main menu
********************************************************/

ul.main-menu-module {
  /*background:#888;*/
  list-style:none;
  margin:0 0 0 0;
  /*padding:8px 0;*/
}

ul.main-menu-module li {
  display:table-cell;
  /*padding:0 1.25%;*/
  text-align:center;
  white-space:nowrap;
  /*transition:background 0.5s ease;*/
}

/* second level menus */
ul.main-menu-module ul {
  -moz-box-shadow:0 3px 3px rgba(0,0,0,0.2);
  -webkit-box-shadow:0 3px 3px rgba(0,0,0,0.2);
background:#888;
  box-shadow:0 3px 3px rgba(0,0,0,0.2);
  display:none;
  margin:0;
  padding:10px 0;
  position:absolute;
  top:80px;
  z-index:99999;
}

ul.main-menu-menu ul li {
  display:block;
}

ul.main-menu-module li a {
  color:#fff;
  display:block;
  font-size:1.1667em;
  font-weight:bold;
  line-height:36px;
  padding:0 5px;
  text-decoration:none;
  text-transform:uppercase;
/*
  display:block;
  line-height:40px;
  padding:0 15px 0 15px;
  text-decoration:none;
  outline:none;
*/

}

ul.main-menu-module li a:hover,
ul.main-menu-module li a:focus,
ul.main-menu-module li a:active,
ul.main-menu-module li.active a,
ul.main-menu-module li.current a {
  color:#236a8a;
}

ul.main-menu-module li:hover {
  background:#fff;
}

ul.main-menu-module li:hover > ul {
  display:block;
}

 /**********************************************************/

ul.module-list li.module {
  display:block;
  margin:0 0 10px 0;
  width:100%;
  /*white-space:nowrap;*/
}

.logo-module {
  max-width:230px; /*actual pixel width of logo image*/
  width:85.1851851852%; /*230/270*/
}

.logo-module img {
  width:100%;
}

/* modules on top and bottom of main content section */
.main-top,
.main-bottom {
  padding:10px 0;
}

/* list of category article titles */
.mod-articles-category-title {
  line-height:1.5em;
}

/* footer modules */
#area-5-inset {
  display:table;
}

#area-5-inset .modules-container {
  display:table-row;
  width:100%;
}

#area-5-inset .modules-container .module {
  display:table-cell;
  width:33.3333333333%; /* (1170/1200) /3 */
}

#area-5-inset .modules-container p {
  margin:0;
}


/********************************************************/
em {
  font-style:italic;
}

h1 {
  font-size:2.0em;
  font-weight:bold;
  line-height:normal;
  margin:0.67em 0;
}

h2 {
  clear:both;
  font-size:1.5em;
  font-weight:bold;
  line-height:normal;
  margin:0.75em 0;
}

h3 {
  font-size:1.17em;
  font-weight:bold;
  line-height:normal;
  margin:0.83em 0;
}

h4 {
  font-size:1.0em;
  font-weight:bold;
  line-height:normal;
  margin:1.12em 0;
}

h5 {
  font-size:0.83em;
  font-weight:bold;
  line-height:normal;
  margin:1.25em 0;
}

h6 {
  font-size:0.75em;
  font-weight:bold;
  line-height:normal;
  margin:1.67em 0;
}


p {
  margin:1.12em 0;
  /*margin:10px 0;*/
  /*padding:0.50em 0.750em;*/
}

b, strong {
  font-weight:bold;
}

.bold {
  font-weight:bold;
}

/**********/
.label {/*display:none;*/}

#area-0 .label,
#area-1 .label,
#area-2 .label,
#area-3 .label,
#area-4 .label,
#area-5 .label,
#area-6 .label {
  display:none;
  visibility:hidden;
}
/***********/

#component {
  padding-bottom:20px;
}

.item {
  clear:both;
  float:none;
  margin:20px 0;
}

/***********************************************************/
/*********************************************************/
@media only screen and (max-width:1020px) {
#area-3 {
  display:table-cell;
  vertical-align:top;
  width:75.0000000000%; /*900/1200*/
}

#area-3-inset {
  margin:0 auto;
  width:96.6666666667%; /*870/900*/
}

#area-4 {
  clear:both;
  display:block;
  float:left;
  vertical-align:top;
  width:100%; /*1200/1200*/
}

#area-4-inset {
  float:left;
  margin:0 1.2500000000%; /*15/1200*/
  padding:15px 0;
  width:97.5000000000%; /*1170/1200*/
}

#area-4-inset .module {
  float:left;
  padding-right:1.2820512821%;
}

#area-5 {
  clear:both;
}

}
/*media*/

@media only screen and (max-width:620px) {
#area-3 {
  display:block;
  vertical-align:top;
  width:100.0000000000%; /*1200/1200*/
}

#area-3-inset {
  margin:0 auto;
  width:97.50000000000%; /*1170/1200*/
}

#area-4 {
  clear:both;
  display:block;
  float:none;
  vertical-align:top;
  width:100%; /*1200/1200*/
}

#area-4-inset {
  float:none;
  margin:0 auto;
  width:97.0000000000%; /*1170/1200*/
}

#area-4-inset .module {
  display:block;
  float:none;
}

}
/*media*/