/* This file will hold styles for the mobile version of your website (mobile first). */
/* This also can include ANY global CSS that applies site-wide. Unless overwritten by a more specific style rule, CSS declarations in global.css will apply site-wide. */

/* header fonts */

@import url('//fonts.googleapis.com/css?family=Pridi:400,600');



/* zone header color */

#zone-user-wrapper {
  background: #fcb560; /* #ff9c01 */
  padding: 0.5em 0;
  font-size: 0.8em;
}
#zone-branding-wrapper {
  background: #124272;
  padding: 0;
}
#zone-menu-wrapper {
  background: #02182f;
  padding: 0;
  font-size: 0.8em;
}

@media screen and (min-width:720px) {
  #zone-user-wrapper {
    background: #fcb560; /* #ff9c01 */
    padding: 0.5em 0;
    font-size: 0.9em;
  }
  #zone-branding-wrapper {
    background: #124272;
    padding: 1em 0;
  }
  #zone-menu-wrapper {
    background: #02182f;
    padding: 0;
    font-size: 1em;
  }
}

body {
  font-size: 1em;
}

a:link {
  color: #069;
  text-decoration: none;
}
a:visited {
  color: #309;
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
  font-family: 'Pridi', serif;
  letter-spacing: 1px;
  line-height: 1.2em;
  font-weight: normal;
}


/* top menu */
/* search form */
/* lang switch */

#block-menu-menu-top-menu,
#block-search-form {
  float: left;
}
#block-locale-language {
  float: right;
}

#block-menu-menu-top-menu ul,
ul.language-switcher-locale-url {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#block-menu-menu-top-menu ul li,
ul.language-switcher-locale-url li {
  list-style: none;
  margin: 0 1.5em 0 0;
  padding: 0;
  float: left;
}
#block-menu-menu-top-menu ul li a,
ul.language-switcher-locale-url li a {
  color: #124272; /* #fff */
}



/* website logo */

#block-block-1 {
  /* float: left; */
  padding: 0;
  margin: 0 auto;
  width: 300px;
}
#block-block-1 .content * {
  padding: 0;
  margin: 0;
}

h1#website-logo a {
  display: block;
  width: 300px;
  height: 120px;
  text-indent: -5000px;
  background: url(../images/dsw-logo.png) no-repeat;
}


/* user menu */

#block-system-user-menu {
  float: right;
  margin-top: 5em;
}

#block-system-user-menu ul.menu {
  overflow: hidden;
  margin: 0;
  padding: 0;
}
#block-system-user-menu ul.menu li {
  list-style: none;
  margin: 0 0 0 1.5em;
  padding: 0;
  float: left;
}
#block-system-user-menu ul.menu li a {
  /* color: #fff; */
}


/* notice about password */

#block-block-6 {
  clear: right;
  float: right;
}
#block-block-6 .content a {
  color: #fff;
  text-decoration: none;
}
#block-block-6 .content a:hover {
  text-decoration: underline;
  font-weight: bold;
}


/* main menu */

#block-menu-menu-main-menu-2018 {
  padding: 3px 0;
}

@media screen and (min-width:760px) {
  #block-menu-menu-main-menu-2018 {
    width: 750px;
    margin-right: auto;
    margin-left: auto;
  }
}

#block-system-main-menu ul.menu,
#block-menu-menu-main-menu-2018 ul.menu {
  overflow: hidden;
  margin: 0;
}
#block-system-main-menu ul.menu li.first,
#block-menu-menu-main-menu-2018 ul.menu li.first {
  /* border-left: 1px solid #fff; */
}
#block-system-main-menu ul.menu li,
#block-menu-menu-main-menu-2018 ul.menu li {
  display: block;
  margin: 2px 4px 2px 0;
  padding: 0;
  /* border-right: 1px solid #fff; */
  border: 1px solid #999;
  float: left;
}
#block-system-main-menu ul.menu li a,
#block-menu-menu-main-menu-2018 ul.menu li a {
  color: #fff;
  padding: 0.5em 1em;
  display: block;
}



/* front contents left side */

#block-views-highlight-top-block {
  margin: 0 0 3em 0;
  width: 100%;
}
#block-views-highlight-top-block .views-row img {
  width: 100%;
  height: auto;
}
#block-views-highlight-top-block .views-row .views-field-title {
  /* margin-top: -90px; */
  padding: 15px 0;
  /* height: 60px; */
  /* background: url(/sites/default/files/bg80percent.png); */
  position: relative;
}
#block-views-highlight-top-block .views-row .views-field-title h3 {
  font-size: 1em;
  margin: 0;
}
#block-views-highlight-top-block .views-row .views-field-title h3 a {
  /* color: #fff; */
  color: #000;
}
#block-views-highlight-top-block .views-row .views-field-title .field-content {
  /* padding: 0 1em; */
  padding: 0;
}
#block-views-highlight-top-block .views-slideshow-controls-bottom {
  width: 125px;
  height: 15px;
  margin: 10px auto 0 auto;
}
#block-views-highlight-top-block .views-slideshow-controls-bottom .views-slideshow-pager-field-item {
  display: block;
  width: 5px;
  height: 15px;
  text-indent: -5000px;
  border-radius: 50%;
  background: #ccc;
  float: left;
  margin: 0 5px;
}
#block-views-highlight-top-block .views-slideshow-controls-bottom .views-slideshow-pager-field-item.active {
  background: #000;
}


@media screen and (min-width: 980px) {
  #block-views-highlight-top-block .views-row .views-field-title h3 {
    font-size: 1.2em;
  }
}

@media screen and (min-width: 1220px) {
  #block-views-highlight-top-block .views-row .views-field-title h3 {
    font-size: 1.5em;
  }
}





#block-views-blogs-front-block,
#block-views-archives-front-block,
#block-views-english-field-front-block,
#block-views-melayu-field-front-block {
  margin: 0 0 3em 0;
  /* background: #ccc; */
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}
/*
#block-views-blogs-front-block h2.block-title {
  background: #124272;
  padding: 10px 15px;
  margin: 0;
}
#block-views-archives-front-block h2.block-title {
  margin: 0;
  background: #663300;
  padding: 10px 15px;
}
#block-views-english-field-front-block h2.block-title {
  background: #487c65;
  padding: 10px 15px;
  margin: 0 !important;
}
#block-views-melayu-field-front-block h2.block-title {
  background: #6d5a14;
  padding: 10px 15px;
  margin: 0 !important;
}
*/

#block-views-blogs-front-block h2.block-title,
#block-views-archives-front-block h2.block-title,
#block-views-english-field-front-block h2.block-title,
#block-views-melayu-field-front-block h2.block-title {
  padding: 10px 15px;
  margin: 0;
  line-height: 1.5em;
  font-size: 1.3em;
  border-bottom: 10px solid #999;
}
#block-views-blogs-front-block h2.block-title a,
#block-views-archives-front-block h2.block-title a,
#block-views-english-field-front-block h2.block-title a,
#block-views-melayu-field-front-block h2.block-title a {
  color: #000;
}

#block-views-banner-display-block-1 {
  margin: 0;
  /* background: #ccc; */
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}
#block-views-banner-display-block-1 h2.block-title {
  margin: 0;
  /* background: #993333; */
  /* color: #fff; */
  padding: 10px 15px;
  color: #000;
  border-bottom: 10px solid #999;
  line-height: 1.5em;
  font-size: 1.3em;
}
#block-views-banner-display-block-1 h2.block-title a {
  color: #000;
}
#block-views-banner-display-block-1 .content {
  padding: 1em;
}
#block-views-banner-display-block-1 .content img {
  max-width: 100%;
  height: auto;
}
#block-views-dsid-front-block {
  margin: 0 0 3em 0;
  /* background: #ccc; */
  border-left: 1px solid #999;
}
#block-views-dsid-front-block .content {
  padding: 1em;
}
#block-views-dsid-front-block .views-field-field-blog-cover {
  width: 100%;
  height: 150px;
  overflow: hidden;
}
#block-views-dsid-front-block .views-field-field-blog-cover img {
  width: 100%;
  height: auto;
}
#block-views-dsid-front-block .views-field-title h3 {
  margin: 0.5em 0 1em 0;
}

#block-views-blogs-front-block .content,
#block-views-archives-front-block .content,
#block-views-english-field-front-block .content,
#block-views-melayu-field-front-block .content {
  padding: 1em;
}

#block-views-blogs-front-block .views-row .views-field-field-blog-cover,
#block-views-archives-front-block .views-row .views-field-field-paper-cover,
#block-views-english-field-front-block .views-row .views-field-field-blog-cover,
#block-views-melayu-field-front-block .views-row .views-field-field-blog-cover {
  float: left;
  margin-right: 10px;
}
#block-views-blogs-front-block .views-row h3 a,
#block-views-archives-front-block .views-row h3 a,
#block-views-english-field-front-block .views-row h3 a,
#block-views-melayu-field-front-block .views-row h3 a,
#block-views-dsid-front-block .views-row h3 a {
  color: #000;
}
#block-views-blogs-front-block .attachment-after ul,
#block-views-archives-front-block .attachment-after ul,
#block-views-english-field-front-block .attachment-after ul,
#block-views-melayu-field-front-block .attachment-after ul,
#block-views-dsid-front-block .attachment-after ul {
  margin-top: 1em;
}
#block-views-blogs-front-block .attachment-after ul li,
#block-views-archives-front-block .attachment-after ul li,
#block-views-english-field-front-block .attachment-after ul li,
#block-views-melayu-field-front-block .attachment-after ul li,
#block-views-dsid-front-block .attachment-after ul li {
  /* list-style: disc; */
  /* padding: 0.25em 0 0.25em 0.5em; */

  list-style: none;
  padding: 0.5em 1em;
  margin: 0 0 10px 0;
  border-top: 3px solid #ccc;
  border-left: 1px solid #ccc;
  /*  border: 1px solid #ccc;
  border-top: 3px solid #ccc; */
}
#block-views-blogs-front-block .attachment-after ul li a,
#block-views-archives-front-block .attachment-after ul li a,
#block-views-english-field-front-block .attachment-after ul li a,
#block-views-melayu-field-front-block .attachment-after ul li a,
#block-views-dsid-front-block .attachment-after ul li a {
  color: #333;
}



/* front contents right side */

#block-views-blogs-hilight-block,
#block-views-blog-update-block {
  margin: 0;
}
#block-views-event-front-block {
  margin: 0 0 3em 0;
}

#block-views-blogs-hilight-block,
#block-views-blog-update-block,
#block-views-event-front-block {
  background: #ffcc99;
}
#block-views-blogs-hilight-block h2.block-title,
#block-views-event-front-block h2.block-title {
  background: #ff9c03;
  padding: 10px 15px;
  margin: 0 !important;
}
#block-views-blogs-hilight-block .content,
#block-views-blog-update-block .content, 
#block-views-event-front-block .content {
  padding: 1em;
}

/* event black-white */

#block-views-event-front-block {
  background: none;
  border-top: 1px solid #999;
  border-left: 1px solid #999;
}
#block-views-event-front-block h2.block-title {
  background: none;
  font-size: 1.3em;
  line-height: 1.5em;
  border-bottom: 10px solid #999;
}
#block-views-event-front-block h2.block-title a {
  color: #000;
}

#block-views-blogs-hilight-block .content > .view-blogs-hilight > .view-header {
  background: #fddcaa;
  padding: 5px;
  font-size: 0.8em;
  margin: 0 0 15px 0;
  border: 1px solid #666;
}
#block-views-blogs-hilight-block .content > .view-blogs-hilight > .view-header p {
  margin: 0;
}
#block-views-blogs-hilight-block .content .views-row .views-field-field-blog-review-cover {
  float: left;
  margin-right: 10px;
}
#block-views-blogs-hilight-block .content h3 a {
  color: #000;
}
#block-views-blogs-hilight-block .content > .view-blogs-hilight > .attachment-after > .view-display-id-attachment_1 > .view-header,
#block-views-blog-update-block .content .view-header {
  padding: 1em 0 0 0;
  border-bottom: 1px solid #999;
  margin: 1em 0;
}
#block-views-blogs-hilight-block .content .attachment-after ul li {
  list-style: disc;
  padding: 0.25em 0 0.25em 0.5em;
}
#block-views-blogs-hilight-block .content .attachment-after ul li a {
  color: #333;
}

#block-views-blog-update-block .views-row {
  overflow: hidden;
  border-bottom: 1px solid #999;
  padding: 1em 0;
}
#block-views-blog-update-block .views-row .views-field-picture {
  float: left;
  width: 120px;
}
#block-views-blog-update-block .views-row .views-field-title h3 {
  margin: 0;
}
#block-views-blog-update-block .views-row .views-field-title h3 a {
  color: #000;
}
#block-views-blog-update-block .views-row .views-field-field-full-name,
#block-views-blog-update-block .views-row .views-field-name {
  font-size: 0.8em;
}


/* blog page */

.view-blogs-display .views-row {
  overflow: hidden;
  padding: 1em 0;
  border-bottom: 1px solid #999;
  margin: 1em 0;
}
.view-blogs-display .views-field-field-blog-cover {
  float: left;
  width: 150px;
}
.view-blogs-display .views-field-field-blog-cover img {
  width: 100%;
  height: auto;
}
.view-blogs-display .views-field-title h2 {
  margin: 0;
}
.view-blogs-display .views-field-created {
  color: #999;
}
.view-blogs-display .views-field-title,
.view-blogs-display .views-field-name,
.view-blogs-display .views-field-field-full-name,
.view-blogs-display .views-field-body,
.view-blogs-display .views-field-created {
  padding-left: 160px;
}
.view-blogs-display .views-field-name,
.view-blogs-display .views-field-field-full-name,
.view-blogs-display .views-field-created {
  font-size: 0.8em;
}
.view-blogs-display .views-field-name .field-content {
  min-width: 100px;
  background: #999;
  padding: 0.2em 0.5em;
  color: #fff;
}

/* term page */

.view-taxonomy-term .views-row {
  overflow: hidden;
  padding: 1em 0;
  border-bottom: 1px solid #999;
  margin: 1em 0;
}
.view-taxonomy-term .views-field-field-blog-cover {
  float: left;
  width: 150px;
}
.view-taxonomy-term .views-field-field-blog-cover img {
  width: 100%;
  height: auto;
}
.view-taxonomy-term .views-field-title h2 {
  margin: 0;
}
.view-taxonomy-term .views-field-created {
  color: #999;
}
.view-taxonomy-term .views-field-title,
.view-taxonomy-term .views-field-created {
  padding-left: 160px;
}
.view-taxonomy-term .views-field-created {
  font-size: 0.8em;
}

.view-footer .item-list {
  clear: both;
  margin: 3em 0;
  padding: 2em 0;
}

/* diablog */

#block-views-top-diablog-block .view .view-header h2.recent-blog,
#block-views-top-diablog-block-1 .view .view-header h2.recent-blog,
.view-diablog .view-header h2.recent-blog {
  background: #ff9c03;
  color: #fff;
  margin: 0 !important;
  padding: 10px 15px;
}

#block-views-top-diablog-block,
#block-views-top-diablog-block-1 {
  float: left;
  width: 50%;
  background: #ffcc99;
}
#block-views-top-diablog-block .view .view-content,
#block-views-top-diablog-block-1 .view .view-content {
  padding: 10px;
  min-height: 880px;
}
#block-views-top-diablog-block .view .view-content .views-row,
#block-views-top-diablog-block-1 .view .view-content .views-row {
  overflow: hidden;
  border-bottom: 1px solid #666;
  padding-bottom: 10px;
  margin-bottom: 10px;
}
#block-views-top-diablog-block .view .view-content .views-row .views-field-picture,
#block-views-top-diablog-block-1 .view .view-content .views-row .views-field-picture {
  float: left;
  width: 100px;
  height: 100px;
  margin-right: 15px;
}
#block-views-top-diablog-block .view .view-content .views-row .views-field-title h3, 
#block-views-top-diablog-block-1 .view .view-content .views-row .views-field-title h3 {
  margin: 0;
}
#block-views-top-diablog-block .view .view-content .views-row .views-field-title h3 a,
#block-views-top-diablog-block-1 .view .view-content .views-row .views-field-title h3 a {
  color: #000;
}

.view-diablog {
  clear: both;
  background: #ffcc99;
}
.view-diablog .views-row {
  float: left;
  width: 20%;
  min-height: 350px;
}
.view-diablog .views-row-6,
.view-diablog .views-row-11,
.view-diablog .views-row-16,
.view-diablog .views-row-21,
.view-diablog .views-row-26 {
  clear: both;
}
.view-diablog .views-row-odd {
  background: #ffc081;
}
.view-diablog .views-row-even {

}
.view-diablog .views-field-picture {
  float: left;
  width: 50px;
  padding: 10px;
}
.view-diablog .views-field-picture img {
  width: 50px;
  height: auto;
}
.view-diablog .views-field-title {
  padding: 10px 10px 10px 70px;
}
.view-diablog .views-field-title h3 {
  margin: 0;
  word-wrap: break-word;
}
.view-diablog .views-field-title h3 a {
  color: #000;
}
.view-diablog .views-field-created {
  padding: 0 10px 5px 70px;
  font-size: 0.8em;
  color: #666;
}
.view-diablog .views-field-body {
  padding: 0 10px 10px 70px
}



/* pager fixed */

.pager li.pager-first a, .pager li.pager-previous a, .pager li.pager-next a, .pager li.pager-last a {
  width: 75px;
}
.pager li.pager-next {
  right: 75px;
}



/* login block */

#block-user-login {
  float: right;
  width: 27%;
}
#user-login-form {
  display: block;
  overflow: hidden;
}
#user-login-form .form-item-name,
#user-login-form .form-item-pass {
  float: left;
  margin-top: 0;
  margin-right: 1em;
}
#user-login-form .form-item-name label,
#user-login-form .form-item-pass label {
  color: #fff;
}
#user-login-form .item-list {
  clear: both;
  float: left;
  margin: 0;
  padding: 0;
}
#user-login-form .item-list ul li a {
  color: #999;
}
#user-login-form .form-actions {
  float: right;
  margin: 0;
  padding: 0;
}
#user-login-form .form-actions {
  float: right;
  margin: 0;
}



/* blog profile on blog node */

#block-views-dbef577a7b918bc2a8caebb400b19259,
#block-views-user-profile-on-blog-node-block {
  width: 100%;
  height: 200px;
  overflow: hidden;
  margin: 2em 0 1em 0;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-field-profile-cover,
#block-views-user-profile-on-blog-node-block .views-field-field-profile-cover {
  width: 100%;
  height: 200px;
  overflow: hidden;
}

@media screen and (min-width:980px) {
  #block-views-dbef577a7b918bc2a8caebb400b19259,
  #block-views-user-profile-on-blog-node-block {
    width: 100%;
    height: 400px;
    overflow: hidden;
    margin: 2em 0 1em 0;
  }
  #block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-field-profile-cover,
  #block-views-user-profile-on-blog-node-block .views-field-field-profile-cover {
    width: 100%;
    height: 400px;
    overflow: hidden;
  }
}

#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-field-profile-cover img,
#block-views-user-profile-on-blog-node-block .views-field-field-profile-cover img {
  width: 100%;
  height: auto;
}

#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-picture,
#block-views-user-profile-on-blog-node-block .views-field-picture {
  width: 150px;
  height: 150px;
  padding: 10px;
  margin-top: -170px;
  float: left;
  position: relative;
  background: #000;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-picture .user-picture,
#block-views-user-profile-on-blog-node-block .views-field-picture .user-picture {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-picture .user-picture img,
#block-views-user-profile-on-blog-node-block .views-field-picture .user-picture img {
  width: 150px;
  height: auto;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-name,
#block-views-user-profile-on-blog-node-block .views-field-name {
  margin-top: -130px;
  margin-left: 170px;
  padding: 10px;
  height: 30px;
  background: url(/sites/default/files/bg80percent.png);
  color: #fff;
  position: relative;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-name a,
#block-views-user-profile-on-blog-node-block .views-field-name a {
  color: #fff;
  font-size: 1.5em;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-field-full-name,
#block-views-user-profile-on-blog-node-block .views-field-field-full-name {
  margin-left: 170px;
  padding: 10px;
  height: 20px;
  background: url(/sites/default/files/bg80percent.png);
  color: #fff;
  position: relative;
}
#block-views-dbef577a7b918bc2a8caebb400b19259 .views-field-field-description,
#block-views-user-profile-on-blog-node-block .views-field-field-description {
  margin-left: 170px;
  padding: 10px;
  height: 20px;
  background: url(/sites/default/files/bg80percent.png);
  color: #fff;
  position: relative;
}


body.page-user .field-name-field-profile-cover {
  width: 100%;
  height: 400px;
  overflow: hidden;
}
body.page-user .field-name-field-profile-cover img {
  width: 100%;
  height: auto;
}


#breadcrumb {
  margin: 1em 10px 2em 10px;
}
article .user-picture {
  display: none;
}
article .submitted {
  margin-bottom: 1.5em;
}
article img {
  max-width: 100%;
  height: auto !important;
}
article iframe {
  max-widtH: 100%;
}



/* right sidebar */

#block-views-edit-other-user-profile-block,
#block-views-edit-other-user-profile-block-1 {
  border: 5px solid #999;
  padding: 15px;
  margin: 0 0 1.5em 0;
}
#block-views-edit-other-user-profile-block .content h3,
#block-views-edit-other-user-profile-block-1 .content h3 {
  margin: 0.5em 0 0 0;
}


/* banner */

#block-views-banner-display-block {
  overflow: hidden;
  margin: 0 0 3em 0;
}
/*
#block-views-banner-display-block .views-row-odd {
  float: left;
  width: 280px;
  height: 95px;
  margin-bottom: 10px;
}
#block-views-banner-display-block .views-row-even {
  float: right;
  width: 280px;
  height: 95px;
  margin-bottom: 10px;
}
#block-views-banner-display-block .views-row img {
  width: 278px;
  height: 93px;
  border: 1px solid #999;
}
*/

#block-views-banner-display-block .views-row {
  float: left;
  width: 48%;
  margin: 0.25em 1%;
}
#block-views-banner-display-block .views-row img {
  width: 100%;
  height: 58px;
}

@media screen and (min-width:980px) {
  #block-views-banner-display-block .views-row img {
    width: 100%;
    height: 88px;
  }
}

@media screen and (min-width:1220px) {
  #block-views-banner-display-block .views-row img {
    width: 100%;
    height: 93px;
  }
}


#block-block-2 .content p {
  line-height: 0;
}


.view-malay.view-display-id-page .views-row,
.view-english.view-display-id-page .views-row {
  padding: 0.5em 0;
  border-top: 1px solid #999;
}
.view-malay.view-display-id-page .views-row .views-field-title h3,
.view-english.view-display-id-page .views-row .views-field-title h3 {
  margin: 1em 0 0.25em 0;
  font-size: 1.5em;
}
.view-malay.view-display-id-page .views-row .views-field-title h3 a,
.view-english.view-display-id-page .views-row .views-field-title h3 a {
  color: #000;
}
.view-malay.view-display-id-page .views-row .views-field-body,
.view-english.view-display-id-page .views-row .views-field-body {
  margin: 0.25em 0;
}