@charset "UTF-8";
/* WriterKey CSS Document */

html, body {
width:100%;
height:100%;
	    }
  
.full-page {
	  width:100%;
	  min-height:100%;
  }


.navbar-default {
    background-color: rgba(0, 129, 119,1);
    border-color: transparent;
    height: 100%;
    font-family: 'Roboto Slab', serif;
    width: 15%;
}
#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8 { background:#eee; min-height:100%; width:85%; margin-left:15%; padding:30px 70px;} 


#section3, #section4, #section5, #section6, #section7{ padding-bottom:0px;} 
#section3, #section5 { box-shadow:inset -10px 10px 10px rgba(0,0,0,0.1); }


@media (max-width: 767px) {
.navbar-default {
    height: auto;
    width: 100%;
}
.navbar-fixed-top .navbar-collapse, .navbar-fixed-bottom .navbar-collapse {
    max-height: 100%;
	padding:0 0 50px 0;
}

#section1, #section2, #section3, #section4, #section5, #section6, #section7, #section8 {min-height:100%; width:100%; margin-left:0%; padding:50px 15px 15px 15px;} 

#section3, #section4, #section5, #section6, #section7{ padding-bottom:0px;} 

}

#section1 p, #section2 p, #section3 p, #section4 p, #section5 p, #section6 p, #section7 p, #section8 p {color:#4e4e4e; line-height:1.8; font-size: 1.2em; font-family: "Roboto Slab", serif; font-weight: 300;}
  
#section1 h3, #section2 h3, #section3 h3, #section4 h3, #section5 h3, #section6 h3, #section7 h3, #section8 h3 {color:rgba(0,114,105,1); font-weight:700; font-family:'Roboto Slab', serif; line-height:1.8; font-size:2em;}


#section1, #section8 {text-align:center; background:#f2f2f2 url(../img/WK_pattern_home-01.png) bottom no-repeat;
background-size:100%; padding:0; color:#333; padding-top:100px;}
#section1 p.lead, #section8 p.lead {margin-top:24px;} 
#section8 p.lead {font-size:14px; margin:0 0 40px 0;} 
#section8 h2 {margin-top: 30px; font-size:25px; font-weight: 700; color: rgba(0,114,105,1);}
#section1 p, #section8 p {font-size:18px; margin-bottom:24px; font-family:'Roboto Slab', serif;}
#section1 image, #section8 image {max-width:580px; margin-top:0px; margin-bottom:10px;}
#section2 {text-align:center; color: rgba(0, 129, 119,1); padding-top:100px;}
#section2 h1 {color:#2a2a2a; margin-bottom:30px;}
#section2 h3 {font-size:1.5em;}
#section2 .col-md-4 {padding:20px;}
#section3 { text-align:left; color:#1a1a1a;}
#section4 .panel {background:transparent; border-color:whitesmoke;}
#section4 h3 {margin:20px 0px;}
#section3, #section5, #section7 {background:rgb(0, 114, 105) url(../img/WK_pattern-01.png) top center repeat; background-size:100%;}
#section3 h3, #section5 h3, #section7 h3, #section3 p, #section5 p, #section7 p {color:white;}


.inset-content {
max-width:900px;
margin:auto;
padding:100px;
}

.rollover-image {
	 margin: auto;
  position: relative;
 }

#footer-nav {
	max-width:1140px;
	margin-top:30px;
	margin-bottom:50px;
}


@media (max-width: 1024px) {
	#section1 p, #section8 p {font-weight:300; font-size:15px; line-height:1.6; margin-bottom:24px;}
	
.inset-content {
	padding:20px;
}

#section1 image, #section8 image {max-width:600px; margin-top:0px; margin-bottom:0px;}
}

.content, .browser {
	max-width:980px;
	margin:auto;
}

.browser-layered {
	position:absolute;
	max-width:70%;
}

.browser {
    background: white none repeat scroll 0% 0%;
    box-shadow: 15px -10px 15px rgba(0, 0, 0, 0.1);
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    margin-top: 40px;
}
 
.browser-gray {
	background-color:#efefef;
	padding-bottom:30px;
}

.browser-bar {
    background: #f7f8f7 none repeat scroll 0% 0%;
    height: 36px;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    display: block;
    width: 100%;
    padding: 7px 12px;
}

.browser-bar .dots {
    background: #dedede;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 5px;
}

.new-feature {
	max-width:240px;
}

.scroll-icon {
    color: rgba(0,129,119,1);
    border-radius: 50%;
    border: solid 2px rgba(0,129,119,1);
    height: 40px;
    width: 40px;
    display: inline-block;
    padding: 10px;
    box-shadow: 4px 4px 0px #006666;
    background-color: transparent;
}



/* Pulsing button */

.pulse-button {
    position: absolute;
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1px;
    color: white;
	text-shadow:none;
    border: none;
    border-radius: 50%;
    background: rgba(0, 129, 119,1);
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(0, 129, 119,1);
   	-moz-animation: pulse 1.5s infinite;
 	-webkit-animation: pulse 1.5s infinite;
	animation: pulse 1.5s infinite;
	border:2px solid white;
	padding-top:12px;
	font-weight:bold;
	font-style:normal;
}

/* Pulsing button static*/

.pulse-button-static {
    display: inline-block;
    width: 32px;
    height: 32px;
    font-size: 16px;
    font-family: 'Roboto Slab', serif;
    text-transform: uppercase;
    text-align: center;
    line-height: 1px;
    color: rgba(0, 129, 119,1);
	text-shadow:none;
    border: none;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    box-shadow: 0 0 0 0 white;
	border:2px solid rgba(0, 129, 119,1);
	padding-top:12px;
	font-weight:bold;
	font-style:normal;
	margin-right:5px;
}

.panel-title a.pulse-button {
	 text-decoration:none;
 }

.pulse-button:hover, 
.pulse-button:focus {
  -moz-animation:none;
   -webkit-animation: none;
   animation:none; 
   	 text-decoration:none;
	 background-color:white;
	 color:rgba(0, 129, 119,1);
	 border-color:rgba(0, 129, 119,1);
}
.pulse-button:active {
	-moz-animation:none;
   -webkit-animation: none;
   animation:none; 
   	 text-decoration:none;
}

.pulse-button:focus {
	-moz-animation:none;
   -webkit-animation: none;
   animation:none; 
   	 text-decoration:none;
}

@-webkit-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 121, 201, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 121, 201, 0);
  }
}

@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(0, 121, 201, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 121, 201, 0);
  }
}

@-o-keyframes pulse {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(0, 121, 201, 0);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 121, 201, 0);
  }
}
.popover {
		transition: all 0.3s fade-in;
}


.btn-expand {
	border-radius:50%;
	float:left;
	background-color:#2b72a5;
	color:white;
	font-size:12px;
	margin-right:10px;
text-align:center;
height:24px;
width:24px;	
padding:1px 0px;
vertical-align:middle;
}

.btn-expand a{
	content:"+";
}

.btn-expand:hover,
.btn-expand:focus {
color:#73b1db;}

.btn-expand a:active {
	border-radius:50%;
		content:"-";
}

.info-block {
	margin-bottom:20px;
}

.info-block > ul > li {
	color:#2b72a5;
	text-decoration:underline;
	margin-left:34px;
	margin-bottom:10px;
}

.info-block > ul.muted > li {
	color:#CCC;
}

.red {
	color:#e44525;
	font-weight:bold;
}

@media (max-width: 768px) {
	.info-block > ul > li {
	margin-left:0px;
}
}


/* Radio Buttons */

.radio-item {
	margin:10px 0px;
}

.radio-item .input-append {
	margin-bottom:0px;
}

input[type="radio"] {
  display: none;
    	
}

input[type="radio"] + label {
  color: #2b72a5;
  font-family: Arial, sans-serif;
  font-size: 14px;
  display: inline-block;
  margin-right:20px;
  vertical-align:middle;
  margin-bottom:0px;
}

input[type="radio"] + label span {
  display: inline-block;
  width: 30px;
  height: 30px;
  margin: -1px 8px 0 0;
  vertical-align: middle;
  cursor: pointer;
  -moz-border-radius: 50%;
  border-radius: 50%;
  text-align:center;
padding-top:2px;
}

input[type="radio"] + label span {
  background-color: white;
  border:solid 2px #accde2;
  -moz-animation: none;
 	-webkit-animation: none;
	animation: none;
}

input[type="radio"]:checked + label span {
background-color: white;
  border:solid 2px #accde2;
  -moz-animation: none;
 	-webkit-animation: none;
	animation: none;
}

input[type="radio"] + label span.answer, 
input[type="radio"] + label span.wrong  {
  -moz-animation: radio 1.5s infinite;
 	-webkit-animation: radio 1.5s infinite;
	animation: radio 1.5s infinite;
	 box-shadow: 0 0 0 0 rgba(115,177,219,1);
}

input[type="radio"]:checked + label span.answer {
  background-color: white;
  border:solid 2px #3ac68b;
  color:#3ac68b;
}


input[type="radio"]:checked + label span.wrong {
  background-color: white;
  border:solid 2px #e44525;
  color:#e44525;
}


input[type="radio"] + label span,
input[type="radio"]:checked + label span {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
}

input[type="radio"]:checked + label span.answer:after {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
  content: "\e013";
  font-family: 'Glyphicons Halflings';
}

input[type="radio"]:checked + label span.wrong:after {
  -webkit-transition: background-color 0.4s linear;
  -o-transition: background-color 0.4s linear;
  -moz-transition: background-color 0.4s linear;
  transition: background-color 0.4s linear;
  content: "\e014";
  font-family: 'Glyphicons Halflings';
}

input[type="radio"] + label span.answer:hover, 
input[type="radio"] + label span.answer:focus,
input[type="radio"] + label span.wrong:hover, 
input[type="radio"] + label span.wrong:focus  {
  -moz-animation:none;
   -webkit-animation: none;
   animation:none; 
   	 text-decoration:none;
	 background-color:white;
	 color:rgba(115,177,219,1);
	 border-color:rgba(115,177,219,1);
}
input[type="radio"] + label span.answer:active, 
input[type="radio"] + label span.wrong:active {
	-moz-animation:none;
   -webkit-animation: none;
   animation:none; 
   	 text-decoration:none;
}

input[type="radio"] + label span.answer:focus, 
input[type="radio"] + label span.wrong:focus 
{	-moz-animation:none;
   -webkit-animation: none;
   animation:none; 
   	 text-decoration:none;
}

@-webkit-keyframes radio {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 10px rgba(0, 121, 201, 0.2);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 121, 201, 0);
  }
}

@-moz-keyframes radio {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(0, 121, 201, 0.2);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 121, 201, 0);
  }
}

@-o-keyframes radio {
  0% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
  }
  70% {
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    box-shadow: 0 0 0 5px rgba(0, 121, 201, 0.2);
  }
  100% {
    -moz-transform: scale(0.9);
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 0 0 0 rgba(0, 121, 201, 0);
  }
}