/* CSS Document for thomasekraft.teknetvisions.com site */
/* msmain.css to support multi-device css  */
/* Renamed msmainvp.css 170510 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;}

/* Formats top header banner */
#top {
background:	#fff  ;/*Color:Ivory*/
margin:auto;
border: 2px solid black;
}

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

/* font header css */

h1 {
font: normal 28px Georgia,serif;
}

h2 {
font: normal 20px Georgia,serif;
}

h3 {
font: normal 16px Georgia,serif;
}

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

h5 {
font: bold 20px Georgia;
background-color:#fff;
color:#000000;
padding-left:15px;
border: 1px solid black;
}

/* images and text and section css */

.bimg {border-radius:3%;
	}



.bimg:hover {border-radius:3%;
	color:#000;background-color:#C0C0C0;
	border: 0px solid navy;
	box-shadow: 5px 5px 5px 5px #C0C0C0; 
-moz-box-shadow: 5px 5px 5px 5px #C0C0C0; 
-webkit-box-shadow: 5px 5px 5px 5px #C0C0C0; 
-khtml-box-shadow: 5px 5px 5px 5px #C0C0C0;}
	

	
#blkhdrtxt{
font: normal 36px Arial,Helvetica,san-serif;
font-weight:lighter;}


/* formats ad pics to proper size */
#dimgsq img {width:70%;height:auto;}
#dimgwd img {width:70%;}

/* Necessary for proper responsive design*/


/* Format content images at tablet size or smartphone size */
#tabimg img{
		height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;}
#tabimgsm img{
		height: auto; 
    width: auto; 
    max-width: 300px; 
    max-height: 300px;}
    
.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;
}

* {box-sizing: border-box;}

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

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


/* The following settings are for wss pages */

/* 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;}
	
.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;
}

/*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%;
    }
}



/* Media Queries */

@media only screen and (min-width: 1151px) {
		/* for large desktop */
		.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: 15px;
    /*background-color: lightgray; For testing*/
    }
    
    /* Change header img For mobile phones: */
    #hdrimglg{display:block;}
    #hdrimgsm{display:none;}
    /* Change table img For tablets: */
    #tabimglg{display:block;}
    #tabimg{display:none;}
    #tabimgsm{display:none;}
    #tabimgmini{display:none;}

 		#tvl{display:block;}
    #tvs{display:none;}
}
    
@media only screen and (min-width: 901px) and (max-width:1150px) {
		/* 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: 15px;
    /*background-color: dimgray; For testing*/
    }
    
    /* Change header img For mobile phones: */
    #hdrimglg{display:block;}
    #hdrimgsm{display:none;}
    /* Change table img For tablets: */
    #tabimglg{display:none;}
    #tabimg{display:block;}
    #tabimgsm{display:none;}
    #tabimgmini{display:none;}
}

 		#tvl{display:block;}
    #tvs{display:none;}

@media only screen and (min-width: 600px) and (max-width: 900px) {
    /* 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: 15px;
    /*background-color: cornsilk;For testing*/
    }
    
    /* Change header img For mobiles: */
    #hdrimglg{display:block;}
    #hdrimgsm{display:none;}
    /* Change table img For mobiles: */
    #tabimglg{display:none;}
    #tabimg{display:none;}
    #tabimgsm{display:block;}
    #tabimgmini{display:none;}

 		#tvl{display:block;}
    #tvs{display:none;}
}
    
@media only screen and (min-width:400px) and (max-width: 599px) {
    /* 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: 15px;
    /*background-color: lightblue;For testing*/
    }
    /* enlarges promo banners for small devices */
    .bimg {width:70%;}
    
    /* Change header img For smartphones: */
    #hdrimglg{display:none;}
    #hdrimgsm{display:block;}
    /* Change table img For smartphones: */
    #tabimglg{display:none;}
    #tabimg{display:none;}
    #tabimgsm{display:none;}
    #tabimgmini{display:block;}

 		#tvl{display:none;}
    #tvs{display:block;}
    
}
    
@media only screen and (max-width: 399px) {
    /* For mobile phones: makes all columns 100% below 768px*/
    [class*="s,t,d,l"] {
    width: 100%;}
}

/* Changes Ad images to wide at smartphone level */
@media only screen and (min-width: 767px) and (max-width:901px) {
	#dimgsq{display:none;}
	#dimgwd{display:block;}}

@media only screen and (min-width: 501px) and (max-width: 767px) {
	#dimgsq{display:none;}
	#dimgwd{display:block;}}
		
@media only screen and (max-width: 500px) {
	#dimgsq{display:block;}
	#dimgwd{display:none;}}

/* Hides bottom menu at smartphone level */
@media(max-width:768px){
	#bmb{display:none;}
	

@media only screen and (max-width: 767px) {
    /* 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*="s"] {
    float: left;
    padding: 15px;
    /*background-color: lightblue;For testing*/
    }
    /* enlarges promo banners for small devices */
    .bimg {width:110%;}
    
    /* Change header img For smartphones: */
    #hdrimglg{display:none;}
    #hdrimgsm{display:block;}
    /* Change table img For smartphones: */
    #tabimglg{display:none;}
    #tabimg{display:none;}
    #tabimgsm{display:none;}
    #tabimgmini{display:block;}

 		#tvl{display:none;}
    #tvs{display:block;}
}

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

/* Changes Ad images to wide at smartphone level */
@media only screen and (min-width: 767px) and (max-width:901px) {
	#dimgsq{display:none;}
	#dimgwd{display:block;}}

@media only screen and (min-width: 501px) and (max-width: 767px) {
	#dimgsq{display:none;}
	#dimgwd{display:block;}}
		
@media only screen and (max-width: 500px) {
	#dimgsq{display:block;}
	#dimgwd{display:none;}}

/* Hides bottom menu at smartphone level */
@media(max-width:768px){
	#bmb{display:none;}
	

/* End Media Queries */