/* cmsms stylesheet: SS stylesheet modified: 01/25/21 12:55:19 */
/*

CSS for StoryStack website
created by ClockTowerWeb Ltd

Logo red #EF1E00
   new logo red #FF5C1B
Logo blue #2436F8

*/

@import url(https://fonts.googleapis.com/css?family=Roboto); /* Muli:300 */

body {
	background-color: #F0F0F0;
	font-family: 'Roboto', sans-serif;
}
hr {
border-top-color: #ccc;
}
.container {
	background-color: White;
}
.rowheader {
	border-top: 10px solid Black;
}
.collogo {
	text-align: center;
}
.collogo img {
	padding: 15px;
}
h1, h2, h3, h4, h5, h6 {
	font-family: 'Roboto', sans-serif;
}
h1 {
padding-bottom: 10px;
}
.colstrapline h2 {
	text-align: center;
	font-weight: bold;
	line-height: 45px;
	padding-bottom: 15px;
margin-top: 0px;
font-size: 40px;
color: #2436F8;
}
.rowdivider {
	border-top: 10px solid #FF5C1B;
	height: 21px;
	border-bottom: 10px solid #2436F8;
}
.rowmain {
min-height: 500px;
}
.rowhomeintro {
	text-align: center;
}
.rowhomeintro h3 {
	font-family: 'Roboto', sans-serif;
	line-height: 35px;
}
.buttonmore {
	font-weight: bold;
	background-image: url(/uploads/images/sitestructure/BackgroundButton.png);
	background-repeat: repeat-x;
	margin: 0px 0px 40px 0px;
}
.buttonmore:hover {
opacity: 0.9;
}

.colnav {
	color: White;
font-size: 1.2em;
padding: 0;
}
.colnav ul {
padding-left: 0;
	list-style-type: none;
margin-bottom: 0px;
}
.colnav ul li a
{
  display: block;
  background-color: #dbdbdb;
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #eeeeee;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #c5c5c5;
  height: 1.6em;
  line-height: 1.6em;
  text-decoration-line: none;
  text-decoration-style: solid;
  color: #333333;
  padding-left: 1em;
}
.colnav ul li a:hover, .colnav a.currentpage
{
  background-color: #FF5C1B; /* #cacaca; */
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #FF8353; /* #d9d9d9; */
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #DF3E00; /* #b2b2b2; */
text-decoration: none;
}
.navbar {
border-radius: 0;
}
.navbar-collapse {
padding-right: 0;
padding-left: 0;
}
.colcontent {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 30px;
}
.colcontent a {
color: #2436F8;
text-decoration: underline;
}
.colcontent a:hover {
color: #0006C8;
}
.colcontent img {
          display: block;
          height: auto;
          max-width: 100%;
}
.colcontent h3 img { /* Packaging page */
display: inline;
}
.buttontext {

}
.buttontext a {
background-color: #2436F8;
padding: 0.5em;
border-radius: 10px;
text-align: center;
font-size: 1.4em;
margin-top: 1em;
margin-bottom: 1em;
color: White;
display: block;
}
.buttontext a:hover {
background-color: #5A66FA;
color: White;
}
.rowchardetail {
margin-top: 20px;
}
.charitem {
/* characters page summary */
border: 6px solid #FF5C1B;
background-color: #FF5C1B;
border-radius: 5px;
width: 170px;
float: left;
margin: 13px 26px 13px 0px;
height: 153px; /* 170px */
}
a .charitem {
color: #333;
}
a .charitem:hover, a .charitemcurrent { /* show current item or hover */
/* background-color: #EFEBD0; */
border: 6px solid #333;
}
.charitem img {
/* width: 57%; */
height: 141px;
/* border: 1px solid #ddd; */
float: left;
margin: 0px; /* 10 */
margin-right: 17px;
}
.colchardetail1 img {
   padding:4px;
   border:1px solid #999;
   background-color:#fff;
margin-bottom: 20px;
}
.colchardetail2 {
padding-right: 30px;
}
.chararrows {
margin-bottom: 70px;
}
.chararrowprev:hover {
opacity: 0.8;
}
.chararrownext {
margin-left: 10px;
}
.chararrownext:hover {
opacity: 0.8;
}
.rowstory hr {
margin-top: 40px;
}
.rowstory h2 {
margin-top: 0;
}
.rowstoryfieldslast {
margin-bottom: 20px;
}
.storyfieldname {
color: #999;
text-align: right;
padding-top: 5px;
padding-bottom: 5px;
}
.storyfielddata {
font-style: italic;
padding-top: 5px;
padding-bottom: 5px;
}
.storyintro {
padding: 20px;
background-color: #F2E3E1;
border-radius: 10px;
font-size: 0.9em;
margin-bottom: 30px;
}
.colstoryimage img {
   padding:2px;
   border:1px solid #999;
   background-color:#fff;
margin-bottom: 20px;
}
.colfullwidthbottom {
	padding-right: 0px;
	padding-left: 0px;
}
.colfullwidthbottom img {
	width: 100%;
}
.theme-default1 .nivoSlider {
margin-bottom: 0 !important; /* reset what showtime sets, don't need it */
}
.rowfooter {
	background-color: #6B645F;
	color: White;
	padding-top: 15px;
	padding-bottom: 15px;
}
.colfooter1 {
	padding-left: 30px;
}
.colfooter1 ul {
list-style-type: none;
padding-left: 0;
margin-bottom: 0;
}
.colfooter1 li {
padding-top: 10px;
}
.colfooter1 a {
color: White;
text-decoration: none;
}
.colfooter1 a:hover, .colfooter1 a.menuactive {
text-decoration: underline;
}
.colfooter2 {
	padding-left: 30px;
}
.colfooter2 ul {
list-style-type: none;
padding-left: 0;
}
.colfooter2 li {
padding-top: 10px;
}
.colfooter2 a {
color: White;
text-decoration: none;
}
.colfooter2 a:hover, .colfooter2 a.menuactive {
text-decoration: underline;
}
.colfooter3 {
	text-align: right;
	padding-right: 30px;
	font-size: 0.8em;
}
.websitedev {
	
}
.websitedev a {
	color: White;
	text-decoration: underline;
}
.websitedev a:hover {
	color: #ddd;
}
.contactform td {
padding: 10px;
}
.cms_textarea {
width: 200px;
}
/* CGBlog */
.CGBlogSummaryPostdate {
font-size: 0.9em;
font-style: italic;
color: #666;
}
.cms_submit {
padding: 5px;
	background-image: url(/uploads/images/sitestructure/BackgroundButton.png);
	background-repeat: repeat-x;
font-weight: bold;
}
.cms_submit:hover {
opacity: 0.9;
}
.clearall {
clear: both;
}


/*
Speech bubble quotes
from https://ilikepixels.co.uk/drop/bubbler/
*/
.rowstorybubbles {
margin-top: 30px;
}
.colstickman {
margin-top: 75px;
}
.bubble 
{
position: relative;
width: 280px;
height: 100px;
padding: 22px;
background: #F7F7F7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #FF5C1B solid 6px;
font-weight: bold;
text-align: center;
float: left;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent #F7F7F7;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
right: -15px;
top: 64%;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent #FF5C1B;
display: block;
width: 0;
z-index: 0;
margin-top: -20px;
right: -26px;
top: 64%;
}

/* right hand version */

.bubble2 
{
position: relative;
width: 290px;
height: 100px;
padding: 22px;
background: #F7F7F7;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: #FF5C1B solid 6px;
font-weight: bold;
text-align: center;
float: right;
}

.bubble2:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 15px 15px 0;
border-color: transparent #F7F7F7;
display: block;
width: 0;
z-index: 1;
margin-top: -15px;
left: -15px;
top: 64%;
}

.bubble2:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 20px 20px 20px 0;
border-color: transparent #FF5C1B;
display: block;
width: 0;
z-index: 0;
margin-top: -20px;
left: -26px;
top: 64%;
}

.error_message {
color: red;
}

.youtubevideo {
  width: 100%    !important;
  height: 400px !important;
}


/*

RESPONSIVE CHANGES

*/

/*
***************************************************
SMALL DEVICES sm
***************************************************
*/

@media (min-width: 768px) {
	.collogo {
		text-align: none;
	}
	.rowhomeintro h3 {
		margin: 30px;
	}
	.colstrapline h2 {
		margin-top: 40px;
	}
.colchardetail1 img {
float: right;
}
.colchardetail2 {
padding-right: 60px;
}
	.colchardetail2 p {
		height: 350px;
	}
.chararrows {
margin-bottom: 20px;
}
	.colfooter2 {
		padding-left: 0px;
	}
	.colfooter3 {
		padding-top: 85px;
	}
}

/*
***************************************************
MEDIUM DEVICES md
***************************************************
*/

@media (min-width: 992px) {
	.rowhomeintro h3 {
		/* margin-top: 130px; */
		/* margin-left: 50px; */
	}
	.colstrapline h2 {
		margin-top: 80px;
	}
	.rowmain {
		background-image: url(/uploads/images/sitestructure/backgroundrowmain_md.png);
		background-repeat: repeat-y;
		
	}
	.storyintro {
		margin-bottom: 0;
	}
}

/*
***************************************************
LARGE DEVICES lg
***************************************************
*/

@media (min-width: 1200px) {
	.rowmain {
		background-image: url(/uploads/images/sitestructure/backgroundrowmain.png);
		background-repeat: repeat-y;
	}
}




/*
Bootstrap 3 Navbar Collapse
https://stackoverflow.com/questions/18192082/bootstrap-3-navbar-collapse
*/

@media (max-width: 991px) {
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .navbar-text {
        float: none;
        margin: 15px 0;
    }
    /* since 3.1.0 */
    .navbar-collapse.collapse.in { 
        display: block!important;
    }
    .collapsing {
        overflow: hidden!important;
    }
}