/*test*/  
/*get the page to go to the bottom of the viewport*/
html {
    height:100%;
}

body {   
    min-height:100%;   
}

/*cos border-box just rox.  This allows borders to fit in a reponsive way*/
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


h1, h2, h3, h4, h5, h6 {
    font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
    color: #000099;
    margin:0px;
    padding:0px;
}

h1 { font-size: 200%; }
h2 { font-size: 180%; }
h3 { font-size: 160%; }
h4 { font-size: 140%; }
h5 { font-size: 120%; }
h6 { font-size: 100%; }

ul { 
    list-style-position:inside;
}

p, blockquote, a, li {
    font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
    font-style:normal;
    font-size:100%;
    color: #000099;
    margin: 0px;
    padding: 0px 0px 10px 0px; 
    text-align:justify;
}

.small-note{
    font-style: italic;
    font-size: 85%;
}
a:hover{
    color:#fecf37;
}


/*-----------------------------------------------------------------------------*/
/*-----------------------------summary-------------------------------*/
/*

designed for viewport widths from infinity down to 320px (iphone to iphone 5)
there are six buttons in the menu, which are images and so the layout is built around those
arrangement    width required
1row 6col      940px
2row 3col      475px
3row 2col      320px
6row 1col       
anything less than 500px is considered a smartphone and changes to single column mode
for viewports greater than 980px wide the left and right sides are filled with black

box-a covers the viewport.  
provides a top and bottom background color if viewport is taller than the page.
provides left and right background color if viewport is wider than 980px

box-b is inside box-a.  max-width is 980px.  this is enough for our layout.  
box-b provides a background colour behind the four major elements of each page :

#logo-panel
.menu-panel (May be 2 of these, one at top, one at bottom)
#content-panel
#footer-panel

those elements may be the width:100% (full width of box-b), but they need not be that wide.  box-b provides a background

#logo-panel contains the logo and keeps it centred and sized appropriately

.menu-panel contains the menu buttons.  the buttons are images, 150px x 30px.  they need a 5px margin all round to make them distinct
so spacing required is 
BORDER  GAP BUTTON GAP BUTTON 
        5px 150px  5px 150px
there are four buttons so the possible arrangements are
row x column
1x4   5+4*155 = 625px
2x2   5+2*155 = 315px
4x1   5+1*155 = 160px

#content-panel
provides a background for the articles.
content-panel has 1% padding left and right
articles must take care of their own top / bottom margins
articles are a single full width column below viewport width 935
935 and up articles can split to a 2 column format

there is also a special article type for the splash image on index.php

#footer-panel

*/

#box-a {
    width:100%;
    height:100%;
    margin:0px auto;
    padding:20px 0px;
    background-color: #fff3cc;
    background-color: #306354;
    
}
 
#box-b {
    position:relative;
    width:100%;
    max-width:980px;
    margin:0px auto;
    padding:0px 0px 10px 0px;
    background-color: #fecf37;
    background-color: #478E75;

    /*background-color: pink;*/
    border-radius:10px;
    /*border:2px solid green;*/
    overflow:visible;
}

#logo-panel {
    width:100%;
    max-width:400px;
    margin:0px auto;
    padding-top:10px;
    overflow:visible;
    /*border:1px solid green;*/
}

#logo-panel a{
    margin:0px auto;
    padding:5px;
    /*background-color:white;
    border:1px solid red;*/
}

#logo-panel img{
    width:100%;
    padding:0px;
    /*background: radial-gradient(ellipse, white 5%, #fecf37, #fecf37);*/
    z-index:4;
}

#phone-number {
    position:absolute;
    right:10px;
    top:0px;
    overflow:visible;
    /*border:2px solid black;
    background-color:orange;
    background-color:pink;
    */
}

#phone-number p{
    color:black;
    font-size:20px;
    font-weight:bold;
    text-align:right;
    font-family:"Calibri", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;   
}

.menu-panel{
    width:625px;
    margin:0px auto;
    background-color:#fecf37;
    overflow:visible;
    /*background-color:pink;
    border:1px dashed black;*/
}

@media screen and (max-width:625px) {.menu-panel {width:315px;}}
@media screen and (max-width:315px) {.menu-panel {width:160px;}}


/*
row x column
1x4   5+4*155 = 625px
2x2   5+2*155 = 315px
4x1   5+1*155 = 160px
*/

.menu-panel ul{
    list-style-type: none;
}

.menu-panel li{ 
    float:left;
    margin: 5px 0px 5px 5px;
    border-radius:10px;
    padding:0px;
    width:150px;
    background-color: #306354;
}

.menu-panel a{
    text-decoration: none;
    display:block; 
    width:100%;
    height:30px;
    text-align:center;
    color:white;
    font-style:italic;
    font-weight:bold;
    font-size:20px;
    font-family:  "Calibri", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

.menu-panel a:hover{
    background-color: #9bcabb; 
    border-radius:10px;    
}

#content-panel {
    float:left;
    width:98%;
    margin: 0px 0px 0px 1%;
    padding: 0px 1%;
    border-radius:10px;
    background-color:white;
    background-color: #9bcabb;
    background-color: #478E75;
}

.more-info{
    width:150px;
    float:right;
    
    border-radius:10px;
    padding:0px;
    width:150px;
    background-color: #306354;
    background-color:red;
}

.more-info a{
    text-decoration: none;
    display:block; 
    width:100%;
    height:30px;
    margin-top:20px;
    text-align:center;
    color:white;
    font-style:italic;
    font-weight:bold;
    font-size:20px;
    font-family:  "Calibri", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
    background: url(../images/button_0.png) center no-repeat;     
    
}

.more-info a:hover{
    background-color: #9bcabb; 
    border-radius:10px;    
}



#footer-panel{
    background-color:#478E75;
    width:100%;
    padding:10px 0px;
}

#footer-panel p {
    font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
    color:black;
    font-style:normal;
    font-weight:normal;
    font-size:85%;
    text-align:center;
}

/*---------------------------------------------------------------------*/
/*---------------SPECIFIC PAGES BELOW THIS-----------------------------*/

/*--------------index.php-----------------------------------------------*/
.splash{
    float:left;
    width:100%;
    margin: 5px 0px;
    border: 5px outset #fecf37;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    box-shadow:5px 5px 15px rgba(0,0,0,0.4);
    background-color: #fecf37; 
}   

.splash-header{
    margin: 10px auto;
    width:100%;
    max-width:600px;
    color:#000099;
    font-size:200%;
    font-weight:bolder;
    text-align:center;
    /*background-color:violet;*/
}

.splash-50pc-panel{
    float:left;
    width:50%;
}

article{  
    float:left;
    width:100%;
    margin:5px 0px;  
    border: 5px outset #306354;
    border-radius: 10px;
    -webkit-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    -moz-box-shadow: 5px 5px 15px rgba(0,0,0,0.4);
    box-shadow:5px 5px 15px rgba(0,0,0,0.4);
    background-color: white;
    background-color: #bcdcd2;
    background-color: #abd3c6;
    background-color: #9bcabb;
}
article h1{
    padding:0px;
    /*background: radial-gradient(ellipse, white 5%, #fecf37, #fecf37);*/
    border-radius: 5px 5px 0px 0px;
    background-color: #478E75;
    text-align:center;
    font-weight:bolder;
}

article p{
    text-align: left;
}

article .content-holder-100{
    float:left;
    padding:1%;
    width:100%;
}
article .content-holder-50{
    float:left;
    padding:1%;
    width:50%;
}
article .content-holder-33{
    float:left;
    padding:1%;
    width:33%;
}
article .content-holder-25{
    float:left;
    padding:1%;
    width:25%;
}

.centered_block{
    margin:0px auto;
    width:95%;
    height:450px;
}

.image-100{
    width:90%;
    border:2px solid black;
    margin:0px auto;
}

@media screen and (max-width:800px) {
    article .content-holder-100{}
    article .content-holder-50{}
    article .content-holder-33{}
    article .content-holder-25{width:50%;}
}
@media screen and (max-width:600px) {
    article .content-holder-100{}
    article .content-holder-50{}
    article .content-holder-33{width:100%;}
    article .content-holder-25{}
}
@media screen and (max-width:500px) {
    article .content-holder-100{}
    article .content-holder-50{width:100%;}
    article .content-holder-33{}
    article .content-holder-25{width:100%;}
}

article .captioned-image-25{
    float:left;
    padding:1%;
    width:25%;
    background-color:black;
}

article .captioned-image-25 img{
    margin:0px auto;
    width:95%;
    background-color:blue;
}

article .captioned-image-25 p{
    text-align:center;
    font-size: 85%;
    color:white;
}






div.clearer {clear: left; line-height: 0; height: 0;}



blockquote {
  background: #f9f9f9;
  border-left: 10px solid #ccc;
  margin: 1.5em 10px;
  padding: 0.5em 10px;
  quotes: "\201C""\201D""\2018""\2019";
}
blockquote:before {
  color: #ccc;
  content: open-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}
blockquote:after {
  color: #ccc;
  content: close-quote;
  font-size: 4em;
  line-height: 0.1em;
  margin-left: 0.25em;
  vertical-align: -0.6em;
}
blockquote p {
  display: inline;
}


/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/
/*------------------------------------------------------------*/



#buy-it-now-button{
    float:right;
    position:absolute;
    right:25px;
    bottom:80px;
    width:200px;
    height:50px;
    
    z-index:5;
    
   }
   
   #buy-it-now-button a{
    background: url(../images/pillbuyitnowblue-small.png) no-repeat;
    background-size:160px;
    text-decoration: none;
    display:block; 
    width:160px;
    height:60px;
    padding:0px;
    text-align:center;
    color:white;
    font-weight:bold;
    font-size:20px;
    font-family:  "Calibri", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}

#buy-it-now-button a:hover{
    background: url(../images/pillbuyitnowyellow-small.png) no-repeat; 
    color:white;
    background-size:160px;
}
      
   
#buy-it-now-button p{
       font-family:  "Calibri", Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
    text-align:center;
   font-size: 180%;
   color:white;
   margin:auto;
   padding-top:8%; 
   font-weight:bold;
}   


       
.blue-tick{
    background:url(/images/tick_blue.png) no-repeat left top;
    width:20px;
    float:left; 
}   

   

.puke-warning{
    padding:10px;
    border: 10px solid red;
    background-color:white;
    margin-bottom: 10px;
    width:95%;
}

.puke-warning p {
    padding:0px;
    margin:0px auto;
    text-align:center;
    font-size: large;
}