/* CSS Document Viewport format */
/* wssmain.css to support multi-device css and new domain */
/* Renamed wssmain.css 180516 by TEKraft */



body { 
	background-color:#FFFFFF;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:18px;
}

/*Keeps browser from auto bullets */
ul li{list-style-type:none;}

/* locks font for footers  Note iframe must have link to css in head*/
#footer {font: normal 20px Arial;}

/* sets font and spacing for Lists on alpha-pages*/
#ListItem {
	font: normal 24px Georgia,serif;
}
#ListRow {
	padding: 10px 0px 10px 0px;
}
/* sets font and spacing for Lists on allvidspage*/
#allitem {
	font: normal 18px Georgia,serif;
	color: #000;
}

#allitem:hover {
	color:#000;
	background-color:lightsteelblue;
	font: normal 22px Georgia,serif;
	}
	
/* Sets button properties for vidbuttons on vid-pages */
.vidbutton {
    background-color: #fff; /* White */
    border: 2px solid #000; /* Black */
    color: #000; /* Black */
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    border-radius: 24px;
    width: 200px;
    
     -webkit-transition-duration: 0.2s; /* Safari */
    transition-duration: 0.2s;
    
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.vidbutton:hover {background-color: slategray; /* slategray */}

a {text-decoration:none;
		outline:none;}

.vidbutton a:link {text-decoration:none;color:#000;}
.vidbutton a:link:hover {color:#fff;}

/* for vidnavbutton */
.vidnavbtn{
	padding:5px 5px 5px 5px;
	display:inline-block;
	margin:auto;}

.vidnavbtn:hover {
	box-shadow: 3px 3px 3px 3px #A0A0A0; 
-moz-box-shadow: 3px 3px 3px 3px #A0A0A0; 
-webkit-box-shadow: 3px 3px 3px 3px #A0A0A0; 
-khtml-box-shadow: 3px 3px 3px 3px #A0A0A0;}
	


/* font header css */

h1 {
font: normal 36px Garamond,serif;
}

h2 {
font: normal 24px Garamond,serif;
}

h3 {
font: normal 18px Garamond,serif;
}

h4 {
font: normal 12px Garamond,serif;
}

h5 {
font: bold 22px Arial,serif;
background-color:#8ac7db;
color:#000000;
padding-left:15px;
}

.Limage:hover{
	box-shadow: 3px 3px 3px 3px #A0A0A0; 
-moz-box-shadow: 3px 3px 3px 3px #A0A0A0; 
-webkit-box-shadow: 3px 3px 3px 3px #A0A0A0; 
-khtml-box-shadow: 3px 3px 3px 3px #A0A0A0;
border: 1px solid #000;
}

/* Necessary for proper responsive design*/

* {box-sizing: border-box;}

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

/* Media Queries */

@media only screen and (min-width: 1101px) {
		.l1 {width: 8.33%;}
		.l2 {width: 16.66%;}
		.l3 {width: 25%;}
		.l4 {width: 33.33%;}
		.l5 {width: 41.66%;}
		.l6 {width: 50%;}
		.l7 {width: 58.33%;}
		.l8 {width: 66.66%;}
		.l9 {width: 75%;}
		.l10 {width: 83.33%;}
		.l11 {width: 91.66%;}
		.l12 {width: 100%;}

   	[class*="l"] {
    float: left;
    padding: 0px;
    /*background-color: violet; For testing*/
    }
    
    /* Change header img For various device sizes */
    #hdrimgL{display:block;}
    #hdrimgR{display:none;}
    #hdrimgS{display:none;}
    #hdrimgM{display:none;}
    
    /*Adjust TitleBar Pics for device size*/
    #artistpic{width:120%;}
    #vidtitlehdr{font: normal 24px Georgia,serif;}
    #albumpic{width:120%;}
    
    /* Adjust Videotable items for device size */
    #sd-bnr-lft-T{display:block;}
    #sd-bnr-lft-W{display:none;}
    #videoframe{width:90%; height:auto;}
    #sd-bnr-rt-T{display:block;}
    #sd-bnr-rt-W{display:none;}
    
    /* Adjusts the image in center index for device size */
    #indxcenter{display:block;}
    #indxcentersm{display:none;}

    
    #clickad{width:70%;
    	margin:auto;}
    	
    #vidnavbtn {
    	width:50%;
    }
    
    #promgif {width:60%;}
    	
}

    
@media only screen and (min-width: 801px) and (max-width:1100px) {
		/* for desktop */
		.d1 {width: 8.33%;}
		.d2 {width: 16.66%;}
		.d3 {width: 25%;}
		.d4 {width: 33.33%;}
		.d5 {width: 41.66%;}
		.d6 {width: 50%;}
		.d7 {width: 58.33%;}
		.d8 {width: 66.66%;}
		.d9 {width: 75%;}
		.d10 {width: 83.33%;}
		.d11 {width: 91.66%;}
		.d12 {width: 100%;}

   	[class*="d"] {
    float: left;
    padding: 0px;
    /*background-color: orange; For testing*/
    }
    
    /* Change header img For various device sizes */
    #hdrimgL{display:none;}
    #hdrimgR{display:block;}
    #hdrimgS{display:none;}
    #hdrimgM{display:none;}
    
    /*Adjust TitleBar Items for device size*/
    #artistpic{width:150%;}
    #vidtitlehdr{}
    #albumpic{width:150%;}
    
    /* Adjust Videotable items for device size */
    #sd-bnr-lft-T{display:block;}
    #sd-bnr-lft-W{display:none;}
    #videoframe{width:90%; height:60%;}
    #sd-bnr-rt-T{display:block;}
    #sd-bnr-rt-W{display:none;}
    
    /* Adjusts the image in center index for device size */
    #indxcenter{display:block;}
    #indxcentersm{display:none;}
   
   #clickad{width:70%;
   	margin:auto;}
   	
   #vidnavbtn {
    	width:50%;
    }
    
   #promgif {width:60%;} 
   
}

@media only screen and (min-width: 601px) and (max-width: 800px) {
    /* For tablets: */
		.t1 {width: 8.33%;}
    .t2 {width: 16.66%;}
    .t3 {width: 25%;}
    .t4 {width: 33.33%;}
    .t5 {width: 41.66%;}
    .t6 {width: 50%;}
    .t7 {width: 58.33%;}
    .t8 {width: 66.66%;}
    .t9 {width: 75%;}
    .t10 {width: 83.33%;}
    .t11 {width: 91.66%;}
    .t12 {width: 100%;}
    
    [class*="t"] {
    float: left;
    padding: 0px;
    /*background-color: green;For testing*/
    }
    
    /* Change header img For various device sizes */
    #hdrimgL{display:none;}
    #hdrimgR{display:none;}
    #hdrimgS{display:block;}
    #hdrimgM{display:none;}
    
    
    
        
    /* Adjust Videotable items for device size */
    #sd-bnr-lft-T{display:none;}
    #sd-bnr-lft-W{display:block;}
    #videoframe{width:90%; height:60%;}
    #sd-bnr-rt-T{display:none;}
    #sd-bnr-rt-W{display:block;}
    
    /* Adjusts the image in center index for device size */
    #indxcenter{display:none;}
    #indxcentersm{display:block;}
    
    #clickad{width:45%;
    	margin:auto;}
    	
    /*Adjust TitleBar Items for device size*/
    #artistpic{width:40%;}
    #albumpic{width:40%;}
    #videoframe{width:70%; height:45%;}
    
    #vidnavbtn {
    	width:50%;
    }
    
    #promgif {width:50%;}
    #wssfooterfb{width:40%;}
}

@media only screen and (min-width: 401px) and (max-width: 600px) {
    /* For  larger smartphones: */
		.s1 {width: 8.33%;}
    .s2 {width: 16.66%;}
    .s3 {width: 25%;}
    .s4 {width: 33.33%;}
    .s5 {width: 41.66%;}
    .s6 {width: 50%;}
    .s7 {width: 58.33%;}
    .s8 {width: 66.66%;}
    .s9 {width: 75%;}
    .s10 {width: 83.33%;}
    .s11 {width: 91.66%;}
    .s12 {width: 100%;}
    
    [class*="s"] {
    float: left;
    padding: 0px;
    /*background-color: red;For testing*/
    }
    
    /* Change header img For various device sizes */
    #hdrimgL{display:none;}
    #hdrimgR{display:none;}
    #hdrimgS{display:none;}
    #hdrimgM{display:block;}
    
    
    
    /* Adjust Videotable items for device size */
    #sd-bnr-lft-T{display:none;}
    #sd-bnr-lft-W{display:block;}
    #videoframe{width:90%; height:60%;}
    #sd-bnr-rt-T{display:none;}
    #sd-bnr-rt-W{display:block;}
    
    /* Adjusts the image in center index for device size */
    #indxcenter{display:none;}
    #indxcentersm{display:block;}
    
    #clickad{width:50%;
    	margin:auto;}
    
    /*Adjust TitleBar Items for device size*/
    #artistpic{width:50%;}
    #albumpic{width:50%;}
    #videoframe{width:70%; height:45%;}
    
    #vidnavbtn {
    	width:70%;
    }
    
    #promgif {width:50%;}
    
    /*#bottomfooter {display:none;}*/
    #footerrow{padding-top:200px;}
    #wssfooterfb{width:15%;}
}

@media only screen and (max-width: 400px) {
    /* For  larger smartphones: */
		.vs1 {width: 8.33%;}
    .vs2 {width: 16.66%;}
    .vs3 {width: 25%;}
    .vs4 {width: 33.33%;}
    .vs5 {width: 41.66%;}
    .vs6 {width: 50%;}
    .vs7 {width: 58.33%;}
    .vs8 {width: 66.66%;}
    .vs9 {width: 75%;}
    .vs10 {width: 83.33%;}
    .vs11 {width: 91.66%;}
    .vs12 {width: 100%;}
    
    [class*="vs"] {
    float: left;
    padding: 0px;
    /*background-color: yellow;For testing*/
    }
    
    /* Change header img For various device sizes */
    #hdrimgL{display:none;}
    #hdrimgR{display:none;}
    #hdrimgS{display:none;}
    #hdrimgM{display:block;}
    
		 /* Adjust Videotable items for device size */
    #sd-bnr-lft-T{display:none;}
    #sd-bnr-lft-W{display:block;}
    #videoframe{width:90%; height:auto;}
    #sd-bnr-rt-T{display:none;}
    #sd-bnr-rt-W{display:block;}
    
    /* Adjusts the image in center index for device size */
    #indxcenter{display:none;}
    #indxcentersm{display:block;}
    
    #clickad{width:70%;
    	margin:auto;}
    	
    /*Adjust TitleBar Items for device size*/
    #artistpic{width:50%;}
    #albumpic{width:50%;}
    #videoframe{width:70%; height:auto;}
    
    #vidnavbtn {
    	width:20%;
    }

		#promgif {width:50%;}
		
		/*#bottomfooter {display:none;}   */
		#footerrow{padding-top:200px;}
		#to-top{width:40px;}
		#wssfooterfb{width:30%;}
}




/*@media only screen and (max-width: 401px) {
    /* For mobile phones: makes all columns 100% below 401px*/
/*    [class*="vs,s,t,d,l"] {
    width: 50%;}
}



/* End Media Queries */

/* For Links Images on Links Page */

/*script for 3 column on allVids page*/


/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    
   /* height: 300px; /* Should be removed. Only for demonstration */
}


/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
    }
}