/* VARIABLE BIN */

p.vb-header
{
font-family: Alegreya Sans;
font-size: 130%;
font-weight: bold;
font-style: normal;
letter-spacing: 0.09em;
margin-top: 0em;
margin-bottom: 0.25em;
}



.vb p.vb-header-b
{
font-family: Alegreya Sans;
font-size: 110%;
font-weight: bold;
font-style: normal;
letter-spacing: 0.09em;
margin-top: 0em;
margin-bottom: 0.0em;
background-color: #666;
border: solid 1px #333;
color:white;
margin-left:0;
padding-left:0.25em;
padding-top:0.1em;
padding-bottom:0.1em;
}

.vb p.vb-header-b a
{
color:white;
font-weight: bold;
}
.vb img
{
display:block;
overflow:hidden;
max-width:100%;
}

div.vb-pic
{
border-left: solid 1px #333;
border-right: solid 1px #333;
border-bottom: solid 1px #333;
}

p.vb-item
{
font-family: Alegreya Sans;
font-size: 110%;
font-weight: normal;
font-style: normal;
letter-spacing: 0.09em;
margin-top: 1.0em;
margin-bottom: 0.0em;
}

p.vb-item + p.vb-item
{
margin-top:0.75em;
padding-top:0.75em;
border-top: solid 1px #333;
}

p.vb-item a
{
font-weight:normal;
color:inherit;
}



.vb
{
font-family: 'Open Sans';
width: 25%;
font-size: 80%;
box-sizing: border-box;
display: inline-block;
margin:0em;
/*
border-bottom: solid 1px;
border-bottom-color: #999;
*/
padding-right:1.5em;
margin-bottom: 1.0em;
padding-bottom: 1.0em;
letter-spacing: 0.0em;
}

.vb p
{margin-left: 0.5em;}

.vb p.vb-header{margin-left: 0em;}

/* VARIABLE BIN MIDDLE COLUMN*/
.vbm
{
font-family: 'Open Sans';
width: 25%;
font-size: 80%;
box-sizing: border-box;
display: inline-block;
margin:0em;

border-bottom: none;
border-bottom-color: #999;
padding-right:1.5em;
margin-bottom: 1.0em;
padding-bottom: 1.0em;
}

.vbm p
{
margin-left:0.5em;  
}

.vbm p.vb-header
{
margin-left:0;  
}



/* VARIABLE BIN FOOTER*/
.vbf
{
font-family: 'Open Sans';
width: 20%;
font-size: 80%;
box-sizing: border-box;
display: inline-block;
margin:0em;
border-bottom: solid 1px;
border-bottom-color: #999;
padding-right:1.5em;
margin-bottom: 1.0em;
padding-bottom: 1.0em;
}

/* VARIABLE BIN menu item*/
.vbmenu
{
font-family: 'Open Sans';
width: 20%;
font-size: 80%;
box-sizing: border-box;
display: inline-block;
margin:0em;
border-bottom: solid 1px;
border-bottom-color: #999;
padding-right:1.5em;
margin-bottom: 1.0em;
padding-bottom: 1.0em;
}

/* VARIABLE BIN OPTIONS*/
.vbo
{
color:green;
font-family: 'Open Sans';
width: 20%;
min-width:12em;
font-size: 80%;
box-sizing: border-box;
display: inline-block;
margin:0em;
border-bottom: solid 1px;
border-bottom-color: #999;
padding-right:1.5em;
margin-bottom: 1.0em;
padding-bottom: 1.0em;
}

/* VARIABLE BIN OPTIONS menu item*/
.vbomenu
{
font-family: 'Open Sans';
width: auto;
font-size: 80%;
box-sizing: border-box;
display: inline-block;
margin:0em;
border-bottom: solid 1px;
border-bottom-color: #999;
padding-right:1.5em;
margin-bottom: 1.0em;
padding-bottom: 1.0em;
}

/* =========================================================== */
/* Width Adjustment Section: 1036 px                           */
/* =========================================================== */
@media screen and (max-width: 1036px) 
{
}

/* =========================================================== */
/* Width Adjustment Section: 960 px                            */
/* =========================================================== */
@media screen and (max-width: 960px) 
{
.vbm{width:33.33%;}
.vbmenu{width:25%;}
}

/* =========================================================== */
/* Width Adjustment Section: 768 px                            */
/* =========================================================== */
@media screen and (max-width: 770px) 
{
.vb{width:33%;font-size:90%;}
.vbm{width:50%;font-size:90%;}
.vbmenu{width:33.33%;}
.vb p.vb-header-b{font-size:100%;}
p.vb-item{font-size:90%;}

}

/* =========================================================== */
/* Width Adjustment Section: 550 px                            */
/* =========================================================== */
@media screen and (max-width: 550px) 
{
.vb{width:50%;} 
.vbm{width:100%;}
.vbmenu{width:50%;}
}

/* =========================================================== */
/* Width Adjustment Section: 440 px                            */
/* =========================================================== */
@media screen and (max-width: 440px) 
{
.vb{width:50%; } 
.vbmenu{width:100%;}
.vb p.vb-header-b{font-size:90%;}
p.vb-item{font-size:80%;}

}

/* =========================================================== */
/* Width Adjustment Section: 320 px                            */
/* =========================================================== */
@media screen and (max-width: 350px) 
{ 
  .vb{width: 100%;}
}