/* Custom styles for Reader */

body {
     background-color: #ececec;
}

/***************RICHEMENTS FLASH********************/

/*VÄLÄHDYKSEN PITUUS*/
.actionpoint.flash:after {
	-webkit-animation:actionpoint-flash 5s;
	animation:actionpoint-flash 5s;
}

/*animaatio*/
@-webkit-keyframes actionpoint-flash {
    0% {opacity: .0;}
	30% {opacity: .9;}
	100% {opacity: 0;}
}

@keyframes actionpoint-flash {
    0% {opacity: .0;}
	30% {opacity: .9;}
	100% {opacity: 0;}
}

/*VÄLÄHDYKSEN VÄRI ja ominaisuudet*/
.actionpoint:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    z-index: 10;
    pointer-events: none;
    outline: 2px solid #ffb;
    outline: 0px solid rgba(255, 255, 187, .65);
    background-color: #ffb;
    background-color: rgba(255, 250, 200, .70);
    opacity: 0;
}

/****************ActionBar*********************/
.actionbar {
    background-image:none;
    background-color: transparent;
}

.btn-primary {
    background-color: transparent;
    color: #ddd;
    border: 1px solid #999;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open > .btn-primary.dropdown-toggle {
    color: #333;
    background-color: #fff;
	border-color: #fff;
}

/*************** BUTTONS *************/

@media (max-width: 250px) {
	#thumbButton {
    display: none;
}
}

@media (max-width: 310px) {
	#printButton {
    display: none;
}
}

@media (max-width: 440px) {
	#spreadButton  {
    display: none;
}
	read-text h1  {
    font-size: 1.5em;
}
	read-text h4  {
    font-size: 1em;
}
}

#subPageIndicator, #actionpointButton {
    display:none;
}

/******************* POPUPS BACKDROP ****************/

.modal-backdrop {
    background-color: #000;
    opacity:0.8;
}

.modal-backdrop.in {
    opacity: .4;
}

.modal-body {
    background-color: #fff;
}

/************** when fitted by width ************/

.fit-width .modal-dialog
{
    width: 90%;
    max-width: 960px;
}
.fit-width .actionpoint.image show-picture img
{
    width: 100%;
}

/***************** IMAGE POPUP *********************/

.carousel-caption {
    text-shadow:none;
    color: #333;
}

.fit-zoomable .modal-dialog
{
    width: 100%;
}

.fit-zoomable .imageWrapper.zoomed
{
    width: 100%;
    height: 100%;
    overflow: auto;
}

.fit-zoomable .imageWrapper.zoomed img
{
    width:1280px;
    max-width: 200%;
    max-height: 3000px !important;
}

.carousel-control.left, .carousel-control.right {
	background-image: none;
}

.carousel-control.right:hover {
background-image: linear-gradient(to right,rgba(0,0,0,.0001)0,rgba(0,0,0,.3)100%);
}

.carousel-control.left:hover {
background-image: linear-gradient(to right,rgba(0,0,0,.3)0,rgba(0,0,0,.0001)100%);
}

.carousel-control .glyphicon-chevron-left {
	left: 35%;
}

.carousel-control .glyphicon-chevron-right {
	right: 35%;
}


/***************** Storybox text *******************/

read-text p {
    font-size: 1em;
}

@media (max-width: 440px) {
	read-text h1  {
    font-size: 1.5em;
}
	read-text h4  {
    font-size: 1em;
}
}

.carousel-caption {
	padding: 0px 15px 0px 15px;
}

/***************** Modal *******************/

.modal-header {
    background-image: none;
    background-color: #333;
}

.modal-content {
	box-shadow: 0 5px 40px rgba(0,0,0,.3);
}

.modal button.close {
    color: #f00;
}

.modal .close.positioned {
	top: 0;
}

.arrow.arrow-right {
    top:40%;
    bottom:40%;
}
.arrow.arrow-left {
    top:40%;
    bottom:40%;
}