/* CSS Document */
/*tempstyles*/
td.colspan2 {
    column-span: 2;
}

html, body {
    height: 100%;
}

body {
    background-image: url("/assets/img/bg/bgvdPink.png"); 
    padding-bottom: 100px;
}

/* For Info Icons */
img.icon {
    float:left;
    width: 30px;
    height: 30px;
}

img.responsive {
  width: 100%;
  height: auto;
}
}

#Wrapper {
    border: 0;
    width: 100%;
    
}

#Container {
	column-count:auto;
    width: 100%;
    column-rule: 3px thick red;
}

#Content {
    column-count:auto;
    column-rule: 3px thick blue;
    
}
/*---------------------------------
     Main Menu Navigation
---------------------------------*/
.navbar {
    display: table;
    overflow: hidden;
    margin: auto;
    width: 100%;
    padding: 20px 0 20px 50px;
    font-size:0px;
    vertical-align: middle;
    text-align: center;
    background: url("/assets/img/bg/bgvdOpacity.png");
    
}

.navrow {
    vertical-align: middle;
    alignment-baseline: middle;
    background-position: center;
}
.navlinks {
    padding-top: 10px;
    display: table-cell;
    text-align: center;
    margin: auto;
    vertical-align: middle;
    alignment-baseline: middle;
    background-position: center;
}

.navlinks a {

   -moz-border-radius: 45px; 
   -webkit-border-radius: 45px; 
   border-radius: 45px;
    background: url("/assets/img/bg/bgvdRose.png");
    display: table-cell;
    margin: auto;
    background-position: center;
}

/* Add a new background color to navigation links on hover */
/* Images are oversized with transparency outside them to create effect */

.navlinks a:hover {
    background: url("/assets/img/bg/bgMediumGreen.gif");
   -moz-border-radius: 45px; 
   -webkit-border-radius: 45px; 
   border-radius: 45px;
    display: table-cell;
    margin: auto;
    background-position: center;
}


/****************************
        Adobe Fonts 
****************************/

p {
	font-family: english-grotesque,sans-serif;
	font-weight: 700;
	font-style: normal;
	}

.pageTitle {
    color: #ffCCEE;
    font-size: 24px;
    padding: 20px;
    font-family: "Lithos Pro Light", "EnglishGrotesque Light", "Bookmania Light", "Lucida Sans Unicode", Verdana, "sans-serif";
    font-weight: 900;
    font-style: normal;
    text-align: left;
    width: auto;
    background: #330022;
}

/* not used to full efficiency - Meed script */

.breadCrumbs {
    padding: 20px;
    text-align: left;
    font-family: "Lithos Pro Light", "EnglishGrotesque Light", "Bookmania Light", "Lucida Sans Unicode", Verdana, "sans-serif";
    font-size: 16px;
    background-color: #FFCCEE;
    color: #330022;
}


/***************************
      Download Display 
***************************/

.sbSknThumb {
    width: 100px;
    height: 145px;
}

/* for off-sized images in index */
.sbpeach {
    background-color: #FFCCCC;
    height: 145px;
}

td.evenoutThumb {
    height: 145px;
}

/* Section Titles */
.sectionTitle  {
    col-span: all;
    display: block;
    padding: 20px;
    overflow: auto;
    background-image: url(/assets/img/bg/bgvdOpacity.png);
    margin: auto;
    position: static;
    
}

.outer {
    display: flex; /* To contain Flex-box */
    justify-content: space-around;
    flex-wrap: wrap;
    flex-basis: calc(20% - 30px);
    overflow: auto;
    padding: 20px 20px 100px 20px;
    background-image: url("/assets/img/bg/bgvdOpacity.png");
    width: auto;
    margin: auto;
    position: static;  
    -ms-flex: 1; /* IE 10 */
    flex: 1;
    
}


/*--
.springload {
    col-span: 1;
    position: static; /* To keep flex contained in block */
/*--    display: flex; 
*/

.inner {
    display: inline-flex;
    justify-content: space-around;
    flex-basis: calc(20% - 30px);
	float: left;
	margin: auto;
	alignment-baseline: center;
    vertical-align: top;
    position: static;
  flex: 1;
}



.navTable {
    width: 150px;
    background: #99CCBB;
    border: 1px solid #330022;
    column-span: 1;	
   column-rule: 2px thick dashed green;
}

.navTitle {
    width: 150px;
    font: 18px bold;
    font-color: #FFCCEE;
    background-color: #CC99BB;
    font-family: anivers,sans-serif;
    font-weight: 700;
    font-style: bold;
    border: 1px solid #330022;
    padding: 5px;
}


.dlPara {
	border: 2px solid #330022;
	margin: 10px;
	padding: 14px;
	font-family: Baskerville, 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif';
	font-size: 13px;
	
}

.dlTable {
    background-color: #CC99BB;
    border: 2px solid #330022;
    padding: 10px;
	margin: 10px;
    text-align: center;
	width: 220px;
	height: 220px;
}

.sbTableStylin {
    background-color: #CC99BB;
    border: 2px solid #330022;
    text-align: center;
    width: 200px;
    height: 200px;
    margin: auto;
}

.sbTableClassics {
    background-color: #CC99BB;
    border: 2px solid #330022;
    text-align: center;
    width: 135px;
    height: 285px;
    margin: auto;
}

.dlTitle {
    color: #330022;
    font-weight: bold;
    size: 14px;
    font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, "sans-serif";
    text-align: center;
    padding: 10px;
}


.dlSkins {
	width: auto;
	height: 150px;
	border: 0;
	font-family: "anivers, English Grotesque Medium", Candara, "Segoe UI Emoji", Verdana, "sans-serif";
	font-weight: 400;
	font-style: normal;
}

.artist {
    display: block;
	font-size: 20px;
	font-family: anivers, sans-serif;
	font-weight: 700;
	font-style: normal;
}

/* Zoom Dropdown */


.skinGroup {
    display: block;
	border: 2px dotted #FFCCEE;
    width: 100%;
}

.dropdown {
    display: inline-block;
    position: relative;
    margin: 10px;
}

.dropdown-content {
    display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
    background-color: #f9f9f9;
    border: 3px dotted #99CCCC;
    padding: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown:hover .dropdown-content {
    display:block;
    z-index: 100;
}

.sbdropdown {
    display: inline-block;
    position: relative;
    margin: 10px;
    padding: 10px;
    background-color: #FFCCCC;
}

.sbdropdown-content {
    display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
    background-color: #f9f9f9;
    border: 3px dotted #99CCCC;
    padding: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.sbdropdown:hover .sbdropdown-content {
    display:block;
    z-index: 100;
}

.nowrap {
    flex-wrap: nowrap;
}

.credit {
text-align: left;
    font-size: small;
    font-family:Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
    font-weight: bold;
    color: 330022;
}

.desc {
  padding: 15px;
  text-align: center;
}

img.sbZoom {
    position: relative;
    width: 129px;
    height: 340px;
    clip: rect(0px,60px,200px,0px);
}

/*End Zoom Dropdown */

img.dlZoom {
	width: 30px;
	height: 30px;
	border: 1px solid #330022;
}

.letter {
    col-span: 1;
	border: 2px solid #330022;
	margin: 10px;
	padding: 14px;
	font-family: 'Palatino Linotype', Palatino, 'Century Schoolbook L', 'Times New Roman', 'serif';
    font-size: large;
    width: 30%;    
    max-width: 500px;
    vertical-align: top;
    float:right;
}

.signature {
    font-family: bickham-script-pro-3, sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 36px;
}

.footer
{
     position: fixed;
    bottom: 0; /* the bottom edge of the element will
                  sit against the bottom edge of the window */
    font-size: small;
    text-align: center;
    background: url("/assets/img/bg/bgvdOpacity.png");
    width: 100%;
    padding: 10px;
    break-after: always;

}