/* GENERAL STYLES */
body { padding-top: 108px; background-color: #EEEEEE; font-family: Raleway,sans-serif; line-height: normal; overflow-y: scroll; }  /* normal = 1.2 */
a { color: #66CC66; }
/*.cngreen { color: #66CC66; }*/

/* HEADER STYLES */
#header { z-index: 10; position: fixed; top: 0; width: 100%; height: 60px; background-color: #333333; color: #EEEEEE; border-bottom: 1px dashed #444444; }
#subheader { z-index: 10; position: fixed; top: 60px; width: 100%; height: 48px; background-color: #333333; color: #EEEEEE; }
.headerlink { color: #FFFFFF; text-decoration: none; }
#headermobile,#menumobile { display: none; }
#logo { position: absolute; left: 10px; top: 15px; width: 245px; height: 32px; cursor: pointer; background: url('/images/iconlogo2017.png') center center no-repeat; }
#tagline { position: absolute; left: 265px; top: 32px; font-size: 14px; }
#usernode { position: absolute; right: 15px; bottom: 14px; }
#profilepic_icon { position: relative; top: 8px; width: 40px; height: 40px; margin: 0 20px; border-radius: 3px; }
input#search { width: 200px; height: 25px; padding-right: 10px; vertical-align: middle; border: 1px solid #CCCCCC; border-radius: 4px 0 0 4px; text-align: right; font-size: 16px; }
div#submitsearch { display: inline-block; padding: 5px 10px; color: #CCCCCC; font-size: 13px; vertical-align: middle; border: 1px solid #444444; border-radius: 0 4px 4px 0; cursor: pointer; }
#gridWrap { display: none; padding-bottom: 300px; }
.gridItem { float: left; width: 200px; margin: 20px 0 0 20px; border: 2px solid #DDDDDD; border-radius: 10px; background-color: #FFFFFF; }
.itemHead { margin-top: 10px; padding: 0 10px; font-size: 16px; cursor: pointer; }
.itemImg { margin: 10px auto; width: 180px; background-position: center; background-size: cover; cursor: pointer; }
.itemImg > .imgplaceholder { width: 180px; }
.itemSrc { padding: 0 10px; font-size: 12px; }
.itemDate { padding: 0 10px; font-size: 12px; }
.itemLike { float: left; width: 100px; margin: 10px 0; padding-left: 30px; font-size: 14px; color: #808080; background-position: 7px center; background-repeat: no-repeat; }
.itemLike.save { background-image: url('/images/icon-save.png'); }
.itemLike.saved,.itemLike.savehover { background-image: url('/images/icon-saved.png'); }
.itemShare { float: right; width: 20px; height: 16px; margin: 10px 10px 10px 0; background: url('/images/icon-share.png') center center no-repeat; cursor: pointer; }
#aboutPage,#sourcesPage,#profilePage { width: 100%; max-width: 480px; margin: 20px auto 60px auto; padding: 0 20px; }  /* margin-top = header + subheader height + 20 */
.pagetitle { font-size: 22px; color: #66CC66; font-weight: bold; }
.closex { width: 17px; height: 17px; border: 0; cursor: pointer; }
/* mobile only */
#menuicon { position: absolute; top: 0; right: 0; width: 60px; height: 75px; background: #333333 url('/images/menuicon.png') center 22px no-repeat; }
#menumobile { display: block; z-index: 5; position: fixed; top:-350px; right: 0; width: 240px; border-left: 1px solid #CCCCCC; }
#menumobile > div { padding: 20px; background-color: #FFFFFF; font-size: 15px; border-bottom: 1px solid #CCCCCC; }
#profilepic_icon_mobile { width: 40px; height: 40px; border-radius: 3px; vertical-align: middle; }
#profile_links_mobile { display: inline-block; vertical-align: middle; padding-left: 20px; }
input#searchmobile { width: 170px; height: 25px; padding: 0; border: 0; vertical-align: middle; font-size: 16px; }
div#submitsearchmobile { display: inline-block; opacity: 0; padding: 5px 10px; color: #EEEEEE; font-size: 13px; vertical-align: middle; background-color: #999999; border-radius: 4px; }

/* STYLE MODS FOR DEVICES UNDER 1024px WIDTH */
@media screen and (max-width: 1023px) {
  #header,#subheader { display: none; }
  #headermobile { display: block; z-index: 10; position: fixed; top: 0; width: 100%; height: 75px; background-color: #333333; color: #EEEEEE; border-bottom: 1px dashed #444444; }
  #logomobile { position: absolute; left: 10px; top: 15px; width: 245px; height: 32px; cursor: pointer; background: url('/images/iconlogo2017.png') center center no-repeat; }
  #taglinemobile { z-index: 10; position: absolute; left: 10px; top: 50px; font-size: 13px; white-space: nowrap; }  /* z-index keeps it above menuicon */
  #gridWrap { display: none; margin-top: -33px; }  /* headermobile height (75) minus body top padding (108) */
  #aboutPage,#sourcesPage,#profilePage { margin-top: -13px; }  /* headermobile height (75) minus body top padding (108) plus 20 */
}

/* STYLE MODS FOR DEVICES UNDER 640px WIDTH */
/* note: 640 = pad (20) + card (200) + pad (20) + card (200) + pad (20) */
@media screen and (max-width: 639px) {
  .gridItem { width: 90%; border-radius: 5px; }
  .itemImg { width: 100%; border-left: 10px solid #FFFFFF; border-right: 10px solid #FFFFFF; }
  .itemImg > .imgplaceholder { width: 100%; }
}

/* INPUT SIZE OVERRIDES */
input,select,textarea { font-size: 24px; padding-left: 4px; }
input,select { height: 46px; }
input[type=button] { padding: 2px 20px 0 20px; font-size: 20px; }
input[type=checkbox],input[type=radio] { width: 24px; height: 24px; margin-right: 6px; }