h1,
h2,
h3,
h4,
h5,
h6 {
   color:#422F3E;  
  /*color:#001212;
  color:#032525;*/
}

a {
  color:#234123;
  color:#FBCE00;
  color:#00BC50;
  color:#2032A7;
}


.signup {
  margin-top:0px;
  min-height: 40px;
  min-width: 200px;
  border: 2px solid silver;
  background-color: #0761b5;
  color: white;
  font-size: 130%;
  padding: 20px;
  cursor: pointer;
  
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+50,207cca+51,7db9e8+100;Blue+Gloss+Default */
background: #1e5799; /* Old browsers */
background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */  
  
  border-radius:12px;
}

a.btn {
  text-decoration: none;
  min-height: 40px; 
  min-width: 200px;
  border: 2px solid silver;
  background-color: #0761b5;
  color: white; 
  font-size: 130%;
  padding: 20px;
  cursor: pointer;
  border-radius:12px;
  text-align:center;


}

@keyframes pulsate_signup {
  from {
    background-color: #0761b5;

  }
  to {
     background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); 
  }
}

@keyframes example {
  0%   {box-shadow:none;}
  47% {box-shadow:none;}
  50% {
	box-shadow: 0px 0px 5px 2px yellow;
  }
  53% {box-shadow:none;}
  100% {box-shadow:none;}
}
  
a.btn-signup {
  min-height:auto;
  font-size:150%;
  margin: 10px auto;
  display:block;
  max-width:250px;
  padding:30px 10px;
  background: linear-gradient(to bottom, #1e5799 0%,#2989d8 50%, #1e5799 100%); 

  animation-name: example;
  animation-duration: 5s;
  animation-iteration-count: infinite;

}

#mainmenu li#me_4299 {
  position: fixed;
  top:30px;
  right:20px;
  z-index:100;
}

#mainmenu li#me_4299 a {
   font-size:103%;
}


#mainmenu li#me_4300 {
  position: fixed;
  top:30px;
  right:140px;
  z-index:100;
}

#mainmenu li#me_4300 a {
   font-size:103%;
}


#pricetag {
  margin-right:60px;
  margin:15px 60px 15px 15px;
  
}


#header #logo_image {
  max-width:80px;
  padding-left:1em;
}

body {
  background-color:transparent;
  font-family: StencilStd;
/*  background-repeat:repeat;
  background-size: initial;*/
}


#header h1 {
    padding-top: 0px;
    margin-left: 40px;
}


p {
  margin:1em 0;
  color:#514456;
  color:#422F3E;
  /*color:#0A4243;*/
}

#custom_footer p {
  color: #bbb;
}

#custom_footer a:hover {
  color:white;
}


#header {
  background:none;
  height:auto;
  font-family: 'Verdana', sans-serif;
  overflow: visible;
  /* background-color:white; */
}

#wrap {
  /*border:2px dashed red;*/
  width:100%;
  max-width:851px;
}


#wrap > div.container {
   	width: 100%;  
   background-color:white;
   background-color:rgba(255,255,255,0.5);  
}


#header h1 a {
  color:#D4EEEE;
  color:#0E5D0E;
  /*
  border:1px solid #D4EEEE;
  border:1px solid #DDD;
  */
 

  padding:2px 8px;
  
  background-color:#000C0C;
  background-color:white;
  background-color:rgba(255,255,255,0.6);
  
  /*
  text-shadow: -1px -1px 0px #999,
    		   -1px  1px 0px #888,
    	        1px -1px 0px #444,
    			1px  1px 0px #444;
  */
               
  /* background-color: rgba(255,255,255,0.3); */
  

}


.menubar {
  border:0px;
  background-color:transparent;
}


ul#mainmenu li.active {
    background-color: none;
}

ul#mainmenu li.active a {
    background-color: silver;
}


ul#mainmenu a {
   border: 1px solid #bbb;
   border-radius:15px;
   margin-left:10px;
   margin-bottom:10px;
   background-color:white;
}

#content li {
	/*  white-space: nowrap; Why was this rule here? */
}

#content ul {
  /*display:inline-block; */  /* Why? */
  padding-right:10px;  /* For the news elements */
}

.metadata_wrapper {
  margin-left:10px;
}

.tagline {
    text-shadow: -1px -1px 3px black, 1px 1px 5px black, 2px 2px 5px black;
    text-shadow:none;
    color: #004B85;
    /*color:#FFC600;*/
    margin-left: 00px;
    padding:3px 0 3px 60px;
    background-color:#CCD0E2;
    background-color: rgba(204, 208, 226, 0.75)  ;

}


#mainmenu ul {
  top:35px;
}

ul#mainmenu {
  padding:10px 0;
  margin:0px;
}

ul#mainmenu li {
  /* border-right:1px solid #bbb;*/
  line-height:inherit;

}

ul#mainmenu li.active a {
  background-color:#ccc;
}

ul#mainmenu li:hover a {
    background-color:#ddd;
}


ul#mainmenu a {
    color: #194A83;
  padding-top:19px;
  padding-bottom:1px;

  padding-top:10px;
  padding-bottom:10px;


  padding-left:10px;
  padding-right:10px;
  border-right:1px solid #bbb;
  border-bottom:1px solid #bbb;
  border-top:1px solid #bbb;  
}
  
ul#mainmenu a:hover {
    color: #4A7BB2;
    text-decoration:none;
}

div.container > #content {
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 0em;
    padding-right: 1em;
}

#page_content {
  background-color:white;
  background-color:rgba(255,255,255,0.8);
  margin:0px;
  padding:10px 20px 10px 20px;
}

#page_content img {
  max-width:100%;
}
  


div.subprod {
    box-sizing: border-box;
    max-width: 100%;
    width: 360px;
}
div.subprod {
    border: 1px solid #aaaaaa;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(99, 99, 99, 0.4);
    float: left;
    height: 260px;
    margin: 0 50px 50px 0;
    overflow-y: auto;
    padding: 10px;
    width: 290px;
}
* {
    margin: 0;
    padding: 0;
}
body {
    font-family: StencilStd;
}
body {
    color: #333333;
    font-family: Verdana,sans-serif;
}
body {
    color: #333333;
    font-family: Verdana,sans-serif;
}

.big-button {
    background-color: #efefef;
    border: 2px solid silver;
    clear: both;
    margin: 40px auto 0;
}

#footercontainer {
  /*background-color:white !important;*/
}

#content, #footer {
    background-color: transparent;
}


/* The avainlippu icon in the footer */
#avainlippu {
  border:2px dashed red;
}



@media all and (max-width: 1024px) {


#header {
    height: auto;
}


div.container > #content {
    padding-top: 0em;
    padding-left: 0em;
    padding-bottom: 0em;
    padding-right: 0em;
}
  
  
#page_content {
    margin:0px;
}


  
}

@media all and (max-width:767px) {

body {
    background-image: none;
    background-color: #94aa2f;
  }

  
#header {
    background-color:#f4f6ea;
    background-color:white;
    background-color:#fdfef3;
    box-shadow:0 0 5px rgba(0,0,0, 0.3);
    border-bottom:1px solid #aaa;
  }
  
#header h1 a {
    font-size:18px;
  }
  
  div.subprod {
    width:360px;
    max-width:100%;
    box-sizing:border-box;
  }
  

#header #logo_image {
    max-width: 60px;
    padding-top:0.4em;
    padding-bottom:0.4em;
  }
  
#product_images {
	max-width:100%;   
    box-sizing:border-box;
    border:0px dashed magenta;
}
  
  
#images {
    border:0px dashed blue;
  }
  
#large_image {
    max-width:100%;
    border:0px dashed green;
    display:block;
    height:260px;
    box-sizing:border-box;
}
  
#large_image_css_scaler {
    max-width:95%;
  }
  
  
.large_product_image {
    max-width:50%;
}
  
  
}


@media all and (max-width:360px) {

#header {
   height:auto;
   padding-bottom:1em;    
}
  
#header #logo_image {
  max-width:70px;
  padding-left:1em;
}
}