@charset "utf-8";
/* CSS Document */
body {
margin: 0pt auto;
background-position: center;
background-image:url("../Images/abstract_cat_ext.jpg");
background-repeat: repeat-y;
background-attachment: fixed;
background-color:#7561a0;	
}

.header {
width:90%;
margin:auto;
	display: flex;
	align-items: left;
	justify-content:space-between;
	position: relative;
	background: transparent;
	z-index: 10;		
	}
	
.logo {
	width:200px;
	margin:10px 0;	
}
	
.navbar {
width: 65%;
margin-left:10%;
position:relative;
margin-top: 50px;
z-index: 200;
}
	div.navbar li.selected a {text-decoration: underline;} 
		
	
.user img{
	width:50px;
	margin-top:50px;
	margin-right:80px;
	display: flex;
	align-items: left;
	justify-content:space-between;
	position:relative;
	z-index: 10;
}

#container {
width:100%;
height:100%;
position: relative;
}	


#tales {
width:1300px;
height: auto;
margin-right: auto;
margin-left: auto;
position:relative;
padding-top:100px;
padding-bottom:200px;	
}
#title {
width:40%;
height:auto;
position:relative;
margin-top:50px;
margin-left:auto;
margin-right:auto;
	}
.note_one {
width: 550px;
height: 400px;
position: relative;
margin-top: 700px;
margin-left: 20px;
}
.note_two {
width: 550px;
height: 400px;
position: relative;
margin-top: -400px;
margin-left: 700px;
}
#star {
width:567px;
height:319px;
position:relative;
margin-top:200px;
margin-left:20px;
	}
.laptop {
width: 700px;
height: 389px;
position: relative;
margin-top: -200px;
margin-left: 600px;
}
.hazysummer {
width: 800px;
height: 582px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top:70px;
}
.note_three {
width: 550px;
height: 400px;
position: relative;
margin-top: 150px;
margin-left: 20px;
}
.note_four {
width: 550px;
height: 400px;
position: relative;
margin-top: -400px;
margin-left: 700px;
}
.rudolphhumphrey {
width: 600px;
height: 436px;
position: relative;
margin-top: 0px;
margin-left: 700px;
}
#fizzyfunnies {
width: 700px;
height: 100px;
position: relative;
margin-left: auto;
margin-right: auto;
margin-top:200px;
}
#scrapbook {
width: 550px;
height: 309px;
position: relative;
margin-top: 60px;
margin-left: 5%;
}
#cachito {
width: 550px;
height: 309px;
position: relative;
margin-top: -314px;
margin-left: 53%;
}
#funnyvidscoll {
width: 550px;
height: 309px;
position: relative;
margin-top: 100px;
margin-left: 5%;
}
#Leoteatime {
width: 550px;
height: 309px;
position: relative;
margin-top: -310px;
margin-left: 53%;
}

#copyright {
margin-left: 70%;
padding-top:20px;
padding-bottom:10px;
position:relative;
font-family:"Segoe Print", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
font-size: 30px;
color: #ffffff;
z-index: 20;
}
a:link {
    text-decoration: none;
}


@media only screen and (max-width: 1350px) and (min-width: 1201px) {
#tales {
width:1150px;
padding-bottom:400px;
	}
	
.note_one {
width: 40%;
height: auto;
position: relative;
margin-top: 650px;
margin-left: 7%;
}
.note_two {
width: 40%;
height: auto;
position: relative;
margin-top: -150px;
margin-left: 52%;
}	
#star {
width:400px;
height:225px;
position:relative;
margin-top:100px;
margin-left:0;
	}
.laptop {
width: 500px;
height: 278px;
position: relative;
margin-top: -200px;
margin-left: 53%;
}
.note_three {
width: 40%;
height: auto;
position: relative;
margin-top: 150px;
margin-left: 7%;
}
.note_four {
width: 40%;
height: auto;
position: relative;
margin-top: -150px;
margin-left: 52%;
}
.rudolphhumphrey {
width: 45%;
height: auto;
position: relative;
margin-top: 0px;
margin-left: 50%;
}	
#scrapbook {
width:250px;
height: 140px;
position: relative;
margin-top: 60px;
margin-left: 0;	
	}
	#cachito {
width:250px;
height: 140px;
position: relative;
margin-top: -145px;
margin-left: 52%;	
	}
	#funnyvidscoll {
width:250px;
height: 140px;
position: relative;
margin-top: 230px;
margin-left: 0;		
	}
	#Leoteatime {
width:250px;
height: 140px;
position: relative;
margin-top: -140px;
margin-left: 52%;		
	}
}