/* 
  ------------------------------------------------
  PVII Affinity
  Copyright (c) 2013 Project Seven Development
  www.projectseven.com
  04: 3 Col Flex Sidebar Right and Left
  ------------------------------------------------
*/

body {
	font-family: "Segoe UI", Optima, Helvetica, Arial, sans-serif;
	color: #000;
	background-color: #FFFFFF;
	margin: 0px;
	padding: 0px;
	font-size: 1em;
	padding-bottom: 4em;
}
img {
	vertical-align: bottom;
}
.masthead {
	text-align: center;
	background-color: #000;
	position: relative;
	z-index: 10;
	box-shadow: 0px 0px 30px #000;
}

.content-wrapper {
	margin: 4em 1.25em 0em 1.25em;
	overflow: hidden;
}
.columns-wrapper {
	overflow: hidden;
	background-color: #FFF;
	position: relative;
}
.columns-wrapper, .menu-top-wrapper {
	max-width: 1260px;
	margin: auto;
}

.main-content {
	float: left;
	width: 58%;
	position: relative;
	left: 21%;
}
.sidebar {
	width: 20%;
	float: left;
	position: relative;
	left: -58%;
}
.sidebar-right {
	width: 20%;
	float: right;
}

.main-content, .sidebar, .sidebar-right {
	-webkit-transition: all linear .35s .1s;
	transition: all linear .35s .1s;
}
.sidebar .content,
.sidebar-right .content {
	padding: 30px 20px;
	font-size: .9em;
	line-height: 1.5em;
	border: 1px solid;
	border-color: #333;
	border-radius: 5px;
}
.sidebar .content {
	background-color: #fff;
/*	background-image: -webkit-linear-gradient(#dedede, #FFF);
	background-image: linear-gradient(#dedede, #FFF); */
}
.sidebar-right .content {
	background-color: #fff;
/*	background-image: -webkit-linear-gradient(#0069b3, #FFF);
	background-image: linear-gradient(#0069b3, #FFF); */
}

.main-content .content{
	padding: 30px 30px;
	font-size: 1em;
	line-height: 1.5em;
	border: 1px solid;
	border-radius: 5px;
	border-color: #666;
}

/*Heading styles*/
h1, h2, h3, h4 {
	margin: 30px 0px 0px 0px;
	font-family: Federo, "Segoe UI", Optima, Helvetica, Arial, sans-serif;
	font-weight: normal;
}
h1 { font-size: 1.5em; line-height: 1.7em;}
h2 { font-size: 1.35em; margin-top:3.2em;}
h3 { font-size: 1.25em;  margin-top:3em;}
h4 { font-size: 1.1em;  margin-top:3em;}

/*A utility rule assigned to the first heading to remove top margins.*/
.content h1:first-child,
.content h2:first-child,
.content h3:first-child,
.content h4:first-child {
	margin-top: 0px;
}



/* Tvinger alle bilder skalerbare */
img {
	width: auto;
	height: auto;
	max-width: 100%;
}
/* Opprinnelig skalerbar-stil */
.scalable {
	width: auto;
	height: auto;
	max-width: 100%;
}
.fancy {
	border: 1px solid rgba(255,255,255,.2);
	box-shadow: 0px 0px 30px rgba(0,0,0,.65);
}
.sidebar ul, .sidebar ol, .sidebar-right ul, .sidebar-right ol {
	margin: 0 0 0 .5em;
	padding: 0 0 0 .5em;
	line-height: normal;
}
.sidebar li, .sidebar-right li { 
	margin-bottom: 4px; 
}

/*Ordinary Link Styles*/
.content a {
	color: #990000;
	text-decoration: none; 
	font-weight:bold;
/*	border-bottom-width: 1px;
	border-bottom-style: dotted; */
}
.content a:hover, .content a:focus {
	color: #000;
/*	border-bottom-style: solid; */
}
.footer a {
	color: #8C8C8C;
}
.footer a:hover, .footer a:focus { color: #FFF; }


#SPALTER-col a {
	color: #990000;
	text-decoration: none; 
	font-weight:bold;
/*	border-bottom-width: 1px;
	border-bottom-style: dotted; */
}
#SPALTER-col a:hover, #SPALTER-col a:focus {
	color: #990000;
	text-decoration: none; 
	font-weight:bold;
}

/*The DIVs that contains the horizontal menu bar at the top of your page.*/
.menu-top-wrapper .p7DMM01 {
	background-color: transparent;
	border: none;
	box-shadow: none;
	padding-bottom:20px;
}
.top-navigation {
	background-color: #990000;
/*	border-bottom: 1px solid #FFF;
	box-shadow: 0px 0px 30px #fff; */
	position: relative;
	z-index: 9;
	padding-top:20px;
}
.top-navigation:after {
	content: "\0020";
	font-size: 0px;
	display: inline;
	overflow: hidden;
	line-height: 0;
	clear: both;
}

/*The Footer*/
.footer {
	background-color: #222;
	box-shadow: inset 0px 16px 2px rgba(255,255,255,.025);
	border-top: 1px solid #000;
	padding: 15px 15px;
	font-size: 0.7em;
	color: #8C8C8C;
	text-align: center;
	clear: both;
/*	position: fixed; */
	z-index: 999;
	top: auto;
	bottom: 0px;
	width: 100%;
}
.footer p.copyright {
	text-transform: uppercase;
	margin: 0px;
}


/*1 Column for Narrow Browser Windows and Smartphones in both orientations*/
@media only screen and (min-width: 0px) and (max-width: 700px) {
body {
	padding-bottom: 0px;
}
.footer {
	position: static;
	width: auto;
}
.content-wrapper, .columns-wrapper {margin: 0px; border: none;}
.sidebar, .sidebar-right, .main-content {
	width: auto !important;
	float: none !important;
	position: static !important;
}
.main-content .content, .sidebar .content, .sidebar-right .content {
	padding: 20px 15px;
	border: none;
	height: auto !important;
	max-height: 888678px;
}
.p7DMM01 ul a, .p7DMM01 ul a:hover, .p7DMM01 ul a:focus, .p7DMM01 ul a.open {
	border-bottom: 1px solid !important;
	border-color: #89AEC9 !important;
}
.p7DMM01 ul li:last-child a {
	border-bottom: none !important;
}
}
/*Medium windows - reduce padding content padding*/
@media only screen and (min-width: 700px) and (max-width: 1280px) {
.main-content .content, .sidebar .content, .sidebar-right .content {padding: 20px 15px;}
.top-navigation {padding: 0px 10px;}
.content-wrapper {margin-left: 10px; margin-right: 10px;}
.main-content {width: 50%;left: 25%;}
.sidebar {width: 24%;left: -50%;}
.sidebar-right {width: 24%;}
}


/* ADDITIONS */
/* CTA */
.CTA-01 {
	margin:auto; 
	margin-top:60px;
	margin-bottom:60px;
	font-size:1.2em;
	line-height:1.9em;
	padding:1.4em;
	width:80%;
	max-width:700px;
	text-align:center;
	border-radius:8px;
	border:2px solid;
	box-shadow: 0px 0px 6px #4565ad;
	}
@media screen and (max-width:400px) {
.CTA-01 {
	margin:auto; 
	font-size:1.1em;
	line-height:1.5em;
	padding:0.5em;
	width:86%;
	text-align:center;
	}
		}

.CTA-02 {
	margin:auto; 
	font-size:1.1em;
	line-height:1.5em;
	padding:1.2em;
	width:80%;
	max-width:700px;
	text-align:center;
	}
	@media screen and (max-width:400px) {
.CTA-02 {
margin:auto; 
	font-size:1.1em;
	line-height:1.5em;
	padding:0.5em;
	width:86%;
	text-align:center;
	}
		}

.color-yellow {
	color:#fff002;
	}
.color-red {
	color:#ec1922;
	}
.color-grey {
	color:#d4d7de;
	}
.h3colorbox {
	margin:auto; 
	font-size:1.5em;
	line-height:1.9em;
	padding:1.2em;
	text-align:center;
	box-shadow: 0px 0px 5px #ec1922;
	}
@media screen and (max-width:400px) {	
	.h3colorbox {
	margin:auto; 
	font-size:1.5em;
	line-height:2em;
	padding:1.2em;
	text-align:center;
	box-shadow: 0px 0px 20px #ec1922;
	}
	}
	
	/* make YouTube videos responsive START */
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
	margin-top:20px;
    height: 0;
    overflow: hidden;
}
/* 
Setting the position to relative lets us use absolute positioning for the iframe itself, which we’ll get to shortly. The padding-bottom value is calculated out of the aspect ratio of the video. In this case, the aspect ratio is 16:9, which means that the height will be 56.25% of the width. For a video with a 4:3 aspect ratio, we set padding-bottom to 75%. The padding-top value is set to 30 pixels to allow space for the chrome — this is specific to YouTube videos. The height is set to 0 because padding-bottom gives the element the height it needs. We do not set the width because it will automatically resize with the responsive element that contains this div. Setting overflow to hidden ensures that any content protruding outside of this element will be hidden from view.
*/

.video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* 
    Absolute positioning is used because the containing element has a height of 0. If the iframe were positioned normally, we would have given it a height of 0 as well.     The top and left properties position the iframe correctly in the containing element. The width and height properties ensure that the video takes up 100% of the space used by the containing element (which is actually set with padding).
 
*/
/* make YouTube videos responsive STOP */

.internlenker {
	margin:auto; 
	margin-top:60px;
	margin-bottom:60px;
	font-size:1em;
	line-height:1.5em;
	padding:1.4em;
	width:80%;
	max-width:700px;
	text-align:center;
	border-radius:8px;
	border:2px solid;
	box-shadow: 0px 0px 6px #4565ad;
	}
@media screen and (max-width:400px) {
.internlenker {
	margin:auto; 
	font-size:1em;
	line-height:1.5em;
	padding:0.5em;
	width:86%;
	text-align:center;
	}
		}
.Byline1 {
	font-family: Georgia, Arial, Helvetica, sans-serif;
	font-size: 1.1em;
	font-weight: bold;
	text-decoration: underline overline;
	padding-top: 1.1em;
	padding-bottom: 1.1em;
	line-height: 1.3em;
}
.Question {
	font-weight:bold;
	font-size:1.2em;
	padding-top:2.2em;}
.infobox {
		margin:20px;
		padding:20px;
		border:1px;
		border-color:#dedede;
		}
.Kleintext {
			font-size:0.9em;
			}
.h3colorbox {
	margin:auto; 
	font-size:1.5em;
	line-height:1.9em;
	padding:1.2em;
	text-align:center;
	box-shadow: 0px 0px 5px #ec1922;
	}
@media screen and (max-width:400px) {	
	.h3colorbox {
	margin:auto; 
	font-size:1.5em;
	line-height:2em;
	padding:1.2em;
	text-align:center;
	box-shadow: 0px 0px 20px #ec1922;
	}
	}
	.TopOfPage {
	background-color: #DEDEDE;
	border: 1px solid #990000;
	text-align:center;
}
	.InternalLink {
	background-color: #DEDEDE;
	border: 1px solid #990000;
	text-align:center;
}
#FamousQuotes {
	background-image: url(../images/Quotes.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	border: 1px solid #900;
	padding-top: 28px;
	padding-right: 28px;
	padding-bottom: 28px;
	padding-left: 28px;
	margin-top: 36px;
}
.FamousQuotes {
	background-image: url(../images/Quotes.jpg);
	background-repeat: no-repeat;
	background-position: right top;
	border: 1px solid #900;
	padding-top: 38px;
	padding-right: 38px;
	padding-bottom: 38px;
	padding-left: 38px;
	margin-top: 50px;
	margin-bottom: 50px;
}
table {
	margin-top:20px;}
.LinksSpecial {
	background-color: #DEDEDE;
	margin: 12px;
	padding: 12px;
	border: thin solid #990000;
	width:100%;
	max-width:450px;
}
.InfoBox {
	background-color: #dedede;
	margin: 16px;
	margin-left:0px;
	padding: 16px;
	width: auto;
	border: thin dotted #E3E1E1;
}
.ingress {
	font-size:1.3em;
	font-weight:500;
}
img {
	height: auto !important;
	width: auto !important;
	max-width: 100%;
	border-radius: 5px;
}
.GULbkg {
	background-color: #FFFF00;
}
.RosaBKG {
	background-color: #FCF;
}
/*************Libretto*************/
.LibrettoCharacter {
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	background-color: #E9E9E9;
	height: 18px;
}
.LibrettoAnvisning {
	font-family: Arial, Helvetica, sans-serif, Verdana;
	font-size: 11px;
	line-height: 12px;
	padding-right: 55px;
	padding-left: 0px;
	font-style: italic;
}
.LibrettoText {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #2C2C2C;
	padding-right: 40px;
	padding-left: 20px;
}

.Libretto-Links {
		font-size: 1.1em;
	text-transform: uppercase;
	margin: 0px;
	padding: 16px;
	width: 90%;
	border: 2px solid #990000;
	}

/*************Libretto End*************/
/* LAGE TO SPALTER*/
#SPALTER-col {
    -webkit-column-count: 2; /* Chrome, Safari, Opera */
    -moz-column-count: 2; /* Firefox */
    column-count: 2;
	-webkit-column-gap: 4em; /* Chrome, Safari, Opera */
    -moz-column-gap: 4em; /* Firefox */
    column-gap: 4em;
	    -webkit-column-rule: 0.1em solid #999; /* Chrome, Safari, Opera */
    -moz-column-rule: 0.1em solid #999; /* Firefox */
    column-rule: 0.1em solid #999;
	font-size:0.9em;
}
@media screen and (max-width:400px) {
	#SPALTER-col {
     -webkit-column-count: 1; /* Chrome, Safari, Opera */
    -moz-column-count: 1; /* Firefox */
    column-count: 1;
		}
	}	
	/* LAGE TO SPALTER stop */
.stikktittel {
	font-variant:small-caps;
	font-size:0.9em;
	}