/* === PUBWRITER ===*/

@import url(https://fonts.googleapis.com/css?family=Raleway:400,400italic,700,700italic&subset=latin);

@import url(https://fonts.googleapis.com/css?family=Open+Sans);


h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway';
    color: black; }

p, div {
    font-family: 'Raleway';
    color: black; }

/* Define site background color */

html body {
	background-color: #F0F0F0;
 }

div.black {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;
}

body {
  font-family: Raleway;
  font-size: 18px;
  line-height: 1.428571429;
  color: #333333;
  background-color: #ffffff;
}

/* Increase font size of bulleted and numbered lists */
li {
  font-size: 18px;
}
li span {
  font-size: 16px;
}


/* ====== Custom Button Color ======*/


.btn-warning {
  color: #000;
  background-color: #fcb056;
  border-color: #fcb056;
}


/* ====== PUBWRITER DIV ======*/

/*--Set Container Color--*/

.pubwriter {
  padding-top: 30px;
  padding-bottom: 30px;
  margin-bottom: 30px;
  color: black;
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
  background-color: #ffffff;
  opacity: 1;
}

.pubwriter h1,
.pubwriter .h1
  {
 font-family: 'Open Sans';
  text-align: center;
  color: #000;
  font-size: 32px;
  font-weight: bold;
  }

.pubwriter h2,
.pubwriter .h2
  {
 font-family: 'Open Sans';
  text-align: center;
  color: #000;
  font-size: 28px;
  font-weight: bold;
  }


.pubwriter p {
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 200;
}
.pubwriter > hr {
  border-top-color: #d5d5d5;
}
.container .pubwriter,
.container-fluid .pubwriter {
  padding-right: 50px;
  padding-left: 50px;
  border-radius: 6px;
}
.pubwriter .container {
  max-width: 100%;
}

/*--Set Container Width--*/

@media screen and (min-width: 768px) {
.pubwriter {
padding-top: 20px;
padding-bottom: 20px;
}
  .container .pubwriter,
  .container-fluid .pubwriter {
    padding-right: 60px;
    padding-left: 60px;
  }

/* Don't print link hrefs */
@media print {
  a[href]:after {
    content: none
  }
}

/* Blockquotes */

blockquote{
  display:block;
  background: #fff;
  padding: 15px 20px 15px 45px;
  margin: 0 0 20px;
  position: relative;

  /*Font*/
  font-family: Georgia, serif;
  font-size: 16px;
  line-height: 1.2;
  color: #000;
  text-align: justify;

  /*Borders - (Optional)*/
  border-left: 10px solid #fcb056;


  /*Box Shadow - (Optional)*/
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

blockquote::before{
  content: "\201C"; /*Unicode for Left Double Quote*/

  /*Font*/
  font-family: Georgia, serif;
  font-size: 60px;
  font-weight: bold;
  color: #000;

  /*Positioning*/
  position: absolute;
  left: 10px;
  top:5px;
}

blockquote::after{
  /*Reset to make sure*/
  content: "";
}

blockquote a{
  text-decoration: none;
  background: #fff;
  cursor: pointer;
  padding: 0 3px;
  color: #27a2d5;
}

blockquote a:hover{
 color: #666;
}

blockquote em{
  font-style: italic;
}


/* Make All Images Respnosive
=============================================================================*/

 img {
 display: inline-block;
 height: auto;
 max-width: 100%;
 }

/* bluylw DIV */

.bluylw{
  display:block;
  background: blue;
  padding: 20px 20px 20px 20px;
  margin: 0 0 20px;
  position: relative;

  /*Font*/
  font-size: 16px;
  line-height: 1.2;
  color: yellow;
  text-align: justify;

  /*Borders */
 border-top: 5px solid yellow;
 border-bottom: 5px solid yellow;
 border-left: 5px solid yellow;
  border-right: 5px solid yellow;

  /*Box Shadow */
  -moz-box-shadow: 2px 2px 15px #ccc;
  -webkit-box-shadow: 2px 2px 15px #ccc;
  box-shadow: 2px 2px 15px #ccc;
}

/*--Nav Bar Customization--*/

.pcolor {
  color: #FCAF56;
}
.top-nav {
  border:none;
}

/*--Nav Bar Icon--*/

.top-nav.navbar .navbar-brand  {
  padding-left: 55px;
  color: #fff;
}
.top-nav .navbar-right li {
  border-left:1px solid rgba(255,255,255,0.1);
}
.top-nav .navbar-nav .marked > a {
  background:#27A2D5;
  color: #fff;
}
body {
  font: 15px  "Roboto Condensed", Arial, sans-serif;
  line-height: 1.7em;
  color: #888;
  background: #fff;
}

footer {
  text-align:center;
  margin:60px auto 0 auto;
  padding:20px 0;
  border-top: 1px solid #ddd;
}
.content {
  max-width:750px;
}

header {
  text-align:center;
  margin:60px 0;
}

#slider {
  width: 400px;
  margin:15px auto 0 auto;
}

#val {
  color: #C21D2E;
  font-weight:bold;
}

.live-gutter >div:after {
  content: "";
  background: #ddd;
  height:150px;
  width:100%;
  display: block;
}

#css-box{
  width:100%;
  padding: 20px;
  border: 2px solid #ddd;
  height:300px;
  margin:30px 0;
}

/** RESPONSIVE YOUTUBE **/

.video-container {
	position: relative;
	padding-bottom: 25em;
	padding-top: 35px;
	height: 0;
	overflow: hidden;
}
.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	/*height: 100%*/
}