/*Global styles*/
html { font-size: 62.5%; } 
body {margin:0 auto; font-family: 'Open Sans', sans-serif; font-size:1.9rem; font-weight:lighter; background-color:#272822; color:#E6E6E6;}
.preload * {transition:none !important;}

#container {margin:0; auto;}
h1 {font-weight:normal; font-size:4.5rem;}
h2 {font-weight:lighter; font-size:3.5rem;} 
h3 {font-size:2.5rem; margin:0;}
#header {margin-top:0; margin-bottom:25px; }
#headerWrapper {transform: skew(-20deg); width:700px; margin:0 auto; box-shadow: #060606 0px 0px 50px;   margin-top:4rem;}
#mainTitle {
	padding:4px 0px;
  margin:0 auto;
	position:relative;
	font-weight:normal;
	margin-bottom:0;
	width:700px;
  text-align:center;
  transform:skew(20deg);   
}

#mainTitleText {
	white-space:nowrap; 
}

#mainTitleLink { display:inline-block; text-decoration:none; color:#272822; background-color:#E96F0C; transition: background-color 0.3s;}

#mainTitleLink:hover {
  background-color:#F4852A;
}

.siteDesc {
	font-size:1.5rem;
	color:#E6E6E6;
	position:relative;
	margin:0;
	padding:0px 10px 10px 0px;
  display:block;
}

#mainMenu {
  list-style: none; margin-top:0;
  width: 700px; 
  margin-bottom:3rem; text-align:center;
  margin-bottom:5rem;
  padding-left:0;
  background-color:#36372f;
}
#mainMenu li:first-child {border-left:0;}
#mainMenu li {display:inline-block; background-color:#36372f; line-height:30px; border-left:1px solid #5E5F57; transition:.30s;}
#mainMenu li:hover {background-color:#3E3F37; transition:.30s;}
#mainMenu li a {display:inline-block; transform: skew(20deg); text-decoration:none; color:#E6E6E6; padding:5px 4rem 5px 4rem;}

#mainSearchForm {display:inline-block;}

#mainSearchBoxOuter { 
	display:inline-block;
	position:relative;
	width:225px;
	padding-left:1rem;
	padding-right:6rem;
}
#mainSearchBox {
	transform:skew(20deg);
	border:0;
	height:25px;
	position:relative;
	background-color:#36372f;
	color:#E6E6E6;
	font-size:1.9rem;
	font-weight:lighter;
	padding-bottom:7px;
  padding-top:7px;
	background-image:url(../images/magnifyingGlass.png);
	background-repeat:no-repeat;
	background-size:23px;
	background-position:right 8px;
	padding-right:25px;
  padding-left:3rem;
	transition:.30s;
}

#grid {padding-top:3rem;}

::-webkit-input-placeholder {
    color:    #E6E6E6;
}
:-moz-placeholder {
    color:    #E6E6E6;
}
::-moz-placeholder {
    color:    #E6E6E6;
}
:-ms-input-placeholder {
    color:    #E6E6E6;
}

#mainMenu li:hover #mainSearchBox {background-color:#3E3F37; transition:.30s;}
#mainSearchBox:focus {outline:none;}

@media only screen and (max-width: 780px) {
  #header {overflow:hidden;}
	#mainTitleLink {width:100%; left:0; transform:none; padding-left:0; padding-right:0; margin-top:0;}
	#mainTitle {width:92%; transform:none; padding-top:1rem !important; padding-bottom:1.5rem !important;}
  #headerWrapper {transform: none; width:100%; margin-top:0;}
	#header {width:100%;}
  #mainMenu {display:inline-block; transform:none; width:60px; text-align:left; height:60px; padding:0; margin-left:0; margin-bottom:0; background-image:url(../images/menu.png); background-position:4px 4px; background-size:50px; background-repeat:no-repeat; background-color:#36372f; transition:.30s;}
  #mainMenu:hover {background-color:#3E3F37; transition:.30s;}
  #mainMenu.open {display:inline-block; width:100%; padding-top:60px; padding-bottom:120px; overflow: hidden;}
  #mainMenu li {display:none; transform:none; padding:10px 0px 10px 0px; opacity: 0; }
  #mainMenu li a {transform:none; width:100%;}
  #mainMenu.open li {display:block; width:100%; border-left:none;}

  #mainMenu li #mainSearchBox {transform:none; width:100%; padding-left:35px; background-position:left;}
  #mainMenu #mainSearchBoxOuter {padding-left:20px; width:100%;}
  #mainMenu #mainSearchForm { overflow:hidden;}

  .siteDesc { display:none; }

  .gridItemInner { padding:1rem 1rem 6rem 1rem !important; }
  .post {padding:1rem !important;}
}
  
 .bold {font-weight: bold}
  p {margin-top:2rem;}
 .imageLarge { float:left; margin: 5px 15px 5px 0; max-width:100%}
 .imageSmall { max-width:100%}
 .clearfix {clear:both;}

 .videoContainer{
    position: relative;
    padding-bottom: 500px;
    padding-top: 30px; height: 0; overflow: hidden;
    max-width:50%
  }

  .videoContainer iframe,
  .videoContainer object,
  .videoContainer embed {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }


/*Post Syles*/
.gridItem {/*background-color:#36372f; border:1px solid #36372f; margin-top:0.5%; margin-bottom:1%;*/ transition:.30s; transform: scale(1); overflow:hidden;}
.gridItem>a {text-decoration:none; color:#E6E6E6;}
.gridItemSmall:hover { cursor:pointer; cursor:hand; transition: 0.6s cubic-bezier(0.165, 0.840, 0.440, 1.000); box-shadow: inset #111 0px 0px 50px; }
.gridItemSmall:hover .gridItemInner * { transform:scale(0.94);}
.gridItemInner {padding:3rem 3rem 6rem 3rem; border-left:1px solid #36372f;}
.gridItemInner * { transition:0.6s; }
#gutter {display:block; width:1%;}
.postTitle {margin:0; margin-bottom:10px; font-weight:normal;}
.postDate {margin:0; font-size:1.2rem;}
.postContent {margin-top:15px; line-height:2.7rem; text-align:justify; overflow:hidden;}
.gridItemSmall .contentBrief { display:inline;}
.gridItemSmall .contentFull { display:none;}
.gridItemSelected .contentBrief { display:inline;}
.gridItemSelected .contentFull { display:none;}
.currentPost .contentFull {display:inline;}
.postThumb {float:right; max-width:200px; max-height:200px; margin:8px 0px 5px 20px;}

/*Post Page Styles*/
.post {color:#E6E6E6; /*padding:10px 20px 10px 20px;*/ padding:3rem; max-width:1300px; margin:0 auto;}

/*Tag Styles*/
.postTags {padding:0; margin-top:-6px; margin-right:3.5rem; transform: skew(-20deg); float:right; position:relative; transition:0.6s;}
.gridItem:hover .postTags {box-shadow: #111 0px 0px 50px;}
.gridItem:hover .postTag { border-top:1px solid #272822; }
.postTag:first-child {padding-left:4px;}
.postTag {display:inline-block; border: 1px solid #36372f; font-size:1.3rem; padding-right:8px; padding-left:7px; margin-left:-6px; transition:.30s; background-color:#272822; }
.postTag:hover {background-color:#E96F0C; color:#36372F; transition:0.35s;}
.postTag a {transform: skew(20deg); display:inline-block; color:#E96F0C; text-decoration:none; transition:.30s;}
.postTag:hover a {color:#272822; transition:.30s;}

/* Form Styling */
button {border:1px solid #1c1c1c;
		background-color:#272822;
		color: #E6E6E6;
		font-family: 'Open Sans', sans-serif;
		outline:none;
    transition:.3s;
}

button:hover {color:#272822; background-color:#A6A6A6; transition:.3s; }

button:active {background-color:#FFF;}

select {background-color: #1c1c1c;
		color: #E6E6E6;
		border: none;
		font-family: 'Open Sans', sans-serif;
		padding:1px;
    transition:.3s;
	}
select:hover {color:#272822; background-color:#A6A6A6; transition:.3s;}
select:focus {outline: none; color:#272822; background-color:#E6E6E6; transition:.3s;}
input:focus {outline: none;}

input[type=range] {
  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
  background-color:transparent;
  width: 90px; /* Specific width is required for Firefox. */
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
}

input[type=range]:focus {
  outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
  width: 90px;
  cursor: pointer;
  background: transparent; /* Hides the slider so custom styles can be added */
  border-color: transparent;
  color: transparent;
}

input[type=range] {
  -webkit-appearance: none;
  width: 90px;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 90px;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  background: #A6A6A6;
  border:1px solid #262626;
  border-radius: 3.5px;
  
}
input[type=range]::-webkit-slider-thumb {
  
  border: 1px solid #262626;
  height: 15px;
  width: 15px;
  border-radius: 7px;
  background: #E96F0C;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
}

input[type=range]::-moz-range-track {
  width: 90px;
  height: 7px;
  cursor: pointer;
  animate: 0.2s;
  background: #A6A6A6;
  border:1px solid #262626;
  border-radius: 3.5px;
  padding:0;
}
input[type=range]::-moz-range-thumb {
  border: 1px solid #262626;
  height: 15px;
  width: 15px;
  border-radius: 7px;
  background: #E96F0C;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 90px;
  height: 8.4px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 16px 0;
  color: transparent;
}
input[type=range]::-ms-fill-lower {
  background: #2a6495;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #3071a9;
  border: 0.2px solid #010101;
  border-radius: 2.6px;
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
  border: 1px solid #000000;
  height: 8px;
  width: 8px;
  border-radius: 3px;
  background: #ffffff;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #3071a9;
}
input[type=range]:focus::-ms-fill-upper {
  background: #367ebd;
}

input[type=text] {
	background-color: #1c1c1c;
	color: #E6E6E6;
	border: none;
	font-family: 'Open Sans', sans-serif;
	padding:2px;
  transition:.5s;
}

input[type=text]:hover {
  color:#272822; background-color:#A6A6A6; transition:.3s;
}

input[type=text]:focus {
  color:#272822; background-color:#E6E6E6; transition:.3s;
}

input[type=text][disabled] {background-color:#565656; transition:.3s;}

textarea {
	display:block;
	background-color: #1c1c1c;
	border:none;
	color:#E6E6E6;
	font-family: 'Open Sans', sans-serif;
	outline:none;
}
.formItem {
	margin-right:20px;
}

/*Visualiser Post*/
#AudioPlayer {display:block; width:100%;}
#canvas {width: 100%; height:100%; position:absolute;}
#canvasWrapper {position:relative; width:100%; padding-bottom:45%}

/*Admin Page*/
#postBriefInput {width:50%; height:10em;}
#postContentInput {width:50%; height:20em;}
#adminMenu {clear:both; list-style:none; padding:0; margin:20px}
#adminMenu li {display:inline; padding:10px; background-color:#1c1c1c;}
a {color:#A6A6A6;}
table, td ,th{ border:1px solid black; border-spacing:0; border-collapse:collapse;}
td {padding:5px;}
th {background-color:#1c1c1c; font-weight:lighter;}
#postList {margin:20px;}
#postList tr {background-color:#272822; transition:.3s;}
#postList tr:hover {background-color:#1c1c1c; transition:.3s;}

/*Image Library*/
.imageLibrary {margin-bottom:2rem;}
.imageLibImage {width:14%; margin-right:4%; margin-bottom:4%; float:left; border:1px solid #36372f; overflow-wrap:break-word;}
.imageLibImage img {max-width:95%; max-height:18%; display:block; margin: 0 auto;}
.imageLibImage .imageLibLabel {font-size:1.2rem;}
.imageUploadArea {width:20%; height:20rem; float:left; border:2px dashed #36372f; display:table-cell; border-radius:10px; text-align:center;  display:table; }
.imageUploadArea .dropzone {display: table-cell; vertical-align: middle; text-align:center; padding:2rem;}

/*Embedded Image Library*/
#lightbox {position:fixed; height:100%; width:100%; left:0; top:0; background:rgba(255,255,255,0.2); display:none;}
.innerLightbox {
  max-height:70%;
  width:70%;
  left:15%;
  top:15%;
  overflow-y:scroll;
  background-color:#272822;
  padding:2rem;
  position:absolute;
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.75);}
/*Grid*/
@media only screen and (min-width: 1600px) {
  #grid.section { /* Masonry container */
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
  }
}

/* Go two column at less than 1600 width */
@media only screen and (max-width: 1600px) {
  #grid.section { /* Masonry container */
    -moz-column-count: 2;
    -webkit-column-count: 2;
    column-count: 2;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
  }
}

@media only screen and (max-width: 780px) {
  body {font-size:1.7rem;}
  #grid.section { /* Masonry container */
    -moz-column-count: 1;
    -webkit-column-count: 1;
    column-count: 1;
    -moz-column-gap: 0;
    -webkit-column-gap: 0;
    column-gap: 0;
  }
  .postThumb {max-width:150px; max-height:150px;}
  .videoContainer{max-width:100%; padding-bottom: 250px;}
}

.gridItem {
    display: inline-block;
    width: 100%;
}

pre.prettyprint {
    word-wrap:break-word;
    padding:1rem 2rem;
    overflow-x: auto;
}

a[href^="http://"]:not([href*="maxbo.net"]):after,
a[href^="https://"]:not([href*="maxbo.net"]):after{
    content: " \2197" 
}