@charset "utf-8";
/* CSS Document for Viking catalog pages */


body {
	margin: 0;
	padding: 0;
/*	color: #F5F3D3;  */
	height: auto;
	width:auto;
	background-color: #F5F3D3;
	font-family: "Helvetica Neue", "Segoe UI", Segoe, Helvetica, Arial, "Lucida Grande", sans-serif;
}

.header {
	background-color: #e2e393;
	border-bottom: 3px solid black;
	text-align:center;
	clear:both;
/*	font-size:48px; */
	line-height: 2;
/*	font-family:Verdana, Geneva, sans-serif; */
	font-family:"HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande"
	margin: 10px;
}

.date {
  background-color: #F5F3D3;
}

.container {
	background-color:#F5F3D3;
	color:black;
	border:#000 thick;
	border-bottom-color:#000 ;
	padding-left: 100px;
	padding-right: 350px;
}

/*
p {
	color: black;
	line-height: 12.0px;
}
*/

/* Replaced above <p> section 34/3/20 spb */
p {
	color: black;
	display: block;
	font-size:16px;
	line-height: 18px; /* provides line spacing with word-wrapping */
}

.detail {
	font-size: 16px;
	margin-left:10px;
	line-height: 17px; /* provides line spacing with word-wrapping */
}

a:link {
	color:#00C;
}

a:visited {
	color:#09F;
}

/* ---------------- BottomBar Division --------------------- */
.BottomBar {
	position: fixed;
	bottom: 0px;
	height:auto;
	width: 100%;
	clear:both;
	background-color:#e2e393; 
}

.BottomBarCenter {
	color:#000;
	margin-top: 8px;
	margin-bottom: 8px;
	text-align:center;
}

/*==============================================================*/

/* Design for smallest display FIRST */

* {box-sizing: border-box;}

.mediasize	{background: #e2e393;
			padding: 20px;
			color: #FCF;
}

.header {
	font-size:18px;
}

b {font-size: 1em;}

.container {
	padding-left: 50px;
	padding-right: 50px;
}

.horizontal	{
    grid-column: span 2;
			}
			
.vertical {
    grid-row: span 2;
}

.big {
    grid-column: span 2;
    grid-row: span 2;
}

.row::after {
  content: "";
  clear: both;
  display: table;
}

html {
  font-family: "Lucida Sans", sans-serif;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li	{
	padding: 8px;
	margin-bottom: 7px;
	background-color: #33b5e5;
	color: #ffffff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
			}

.menu li:hover {background-color: #0099cc;}

.aside	{
  background-color: #33b5e5;
  padding: 15px;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		}


/*===============================================================*/


/*========  @media only screen and (min-width: 320px)  ========*/
@media only screen and (min-width: 320px)	{

.mediasize	{
	background: #e2e393;
	padding: 20px;
	color: #69F;
	border-top:#333 medium;
}

.header {
	font-size:16px;
}

b {font-size: 1em;}

.container {
	padding-left: 40px;
	padding-right: 40px;
}


/*==================================================*/

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px)	{
.mediasize	{
	 /* background: #e2e393; */
	padding: 20px;
	color: #C9C;
}

.header {
	font-size:20px;
}

.container {
	padding-left: 50px;
	padding-right: 50px;
}

/*  Add rightside bar when in 2 column mode. */
.column {
  border-right: #000  medium solid;
}


/*========   media screen orientation: landscape) =========*/

@media only screen and (orientation: landscape) {
/*  body {background-color: black; */}
}


/*========   media screen min-width: 768px =====================*/

@media only screen and (min-width: 768px)	{

.mediasize	{ /* background: #e2e393; */
			padding: 20px;
			color: black;
			}

.header {
	font-size:24px;
}

.container {
	padding-left: 110px;
	padding-right: 110px;
/*	clear: both; */
}

											}
/*========   media screen min-width: 992px ===============*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px)	{
.mediasize	{ /* background: #e2e393; */
			padding: 20px;
			color: black;
			}
.header {
	        font-size:48px;
            }

.container {
        	padding-left: 110px;
            }

/*=== Extra large devices (large laptops and desktops, 1200px and up)  ====*/
@media only screen and (min-width: 992px) {
.mediasize	{ /* background: #e2e393; */
			padding: 20px;
			color: black;
            }
.header {
        	font-size:48px;
            }

.container {
        	padding-left: 430px;
            }
			}