/* imports */
@import url(styles/constant.css);

/* BODY stuff */

body {
	font-family: Verdana, sans-serif;
	font-size: 12px;
	margin: 0;
	padding: 6px;
    background: var(--bg);
    background-image: url(../images/home/img/2.gif);
    background-attachment: fixed;
    /*cursor stuff*/
    cursor: url(../images/cursor/NORMAL.cur), auto;
}

body.bodylog {
    background-image: url();
}

div .page {
    font-family: Times;
    background-image: url();
    background: var(--bg);
    color: var(--text);
    height: 1000px;
    width: 750px;
    overflow: scroll;
}

.outer {
	width: 1158px;
	height: 1220px;
	padding: 6px;
	background-image: url(../images/home/img/1.png);
	margin: auto;
    border: solid 1px black;    
}

#m {
    margin: 0px 35px;
}

#m2 {
    margin: auto; 
    display: block; 
    width: 85%; 
    text-align: justify;
}

/* WEBRING STUFF*/

#Widget {
    margin-top: 10px;
    height: 100px;
}

#Widget h2 {
    margin-top: 5px;
    background: var(--bg);
    background-image: url(../images/home/img/4.png);
}

#TRANSING {
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 15%;
}


/* TITLE Stuff */

.title {
	border: 1px solid #000;
	display: inline-block;
	vertical-align: top;
	width: 300px;
	height: 200px;
	margin-bottom: 6px;
	background-image: url(../images/home/img/GIFtitle.gif);
}

.banner-wrapper {
	display: inline-block;
	vertical-align: top;
	width: 540px;
	height: 200px;
}


.banner {
	border: 1px solid #000;
	display: inline-block;
	vertical-align: top;
	width: 735px;
	height: 170px;
	background-image: url(../images/home/img/banner.gif);
	background-size: cover;
	background-position: 20%;
}

.scroller {
	border: 1px solid #000;
	display: inline-block;
	vertical-align: top;
	width: 740px;
	height: 20px;
    color: var(--text);
	background: var(--bg);
	margin-top: 6px;
	overflow: hidden;
}

.marquee {
	overflow: hidden;
	display: flex;
	line-height: 20px;
}

.marquee span{
	white-space: nowrap;
}

/* LEFT BAR */

.left {
	display: inline-block;
	vertical-align: top;
	width: 200px;
}

.menu {
	border: 1px solid #000;
	display: inline-block;
	vertical-align: top;
	padding: 10%;
    background: var(--bg);
	background-image: url(../images/home/img/4.png);
}

.friends {
	display: inline-block;
	vertical-align: top;
	padding: 10%;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--text);
	width: 200px;
	margin-top: 12px;
}

.friends a {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
	background: var(--bg);
	text-decoration: underline;
	padding: 3px;
}

.friends h2 {
	font-size: 12px;
	letter-spacing: 2px;
	margin: 0;
	padding: 0;
	margin-bottom: 12px;
	border-bottom: 2px dotted var(--text);
}

#contacts {
    display: inline-block;
	vertical-align: top;
	padding: 24px;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--text);
	width: 200px;
	margin-top: 12px;
    margin-left: -0.5px;
}

/*! TEXT BOX !*/
.textbox {
    display: inline-block;
	vertical-align: top;
	padding: 24px;
	box-sizing: border-box;
	background: var(--bg);
	color: var(--text);
	width: 180px;
    margin-left: 4px;
	margin-top: 12px;
}

/*!!! MAIN FRAME !!!*/

.main {
    border: none;
	display: inline-block;
	vertical-align: top;
	width: 750px;
	height: 1000px;
	background: var(--bg);
}

.main #maincontainer {
    border: solid 5px var(--bg);
	height: 100%;
	width: 100%;   
}

#maincont {
    display: flex;
}

.content {
    padding: 6px;
}

/* RIGHT BAR */

.right {
	width: 286px;
	display: inline-block;
	vertical-align: top;
    position: absolute;
    margin-left: 10px;
}

.profile {
	border: 1px solid #000;
	width: 186px;
	height: auto;
    color: var(--text);
	background: var(--bg);
	padding: 6px;
    margin-left: 5px;
	box-sizing: border-box;	
}

.avatar {
	border: 20px solid var(--bg) ;
	width: 140px;
	height: 140px;
	margin-bottom: 12px;
	background-image: url(../images/home/img/d2avatar1.png);
}

/* MENU / SITEMAP STUFF*/

.menu a {
	border: 1px solid #FFF;
	height: 32px;
	line-height: 30px;
	width: 100%;
	display: inline-block;
	color: var(--bg);
	text-decoration: none;
	background: var(--text);
	text-align: center;
	position: relative;
	margin-bottom: 12px;
}

.menu a:before {
	content: " ";
	display: inline-block;
	height: 30px;
	width: 30px;
	background: var(--bg);
	border: 2px solid #FFF;
	position: absolute;
	left: -1px;
	top: -1px;
}

.menu a.home:before {
    background-image: url(../images/home/homebut.gif);
}

.menu a.blog:before {
    background-image: url(../images/home/blogbut.gif);
}
.menu a.shelf:before {
    background-image: url(../images/home/shelfbut.gif);
}
.menu a.journals:before {
    background-image: url(../images/home/journalbut.gif);
}
.menu a.about:before {
    background-image: url(../images/home/aboutbut.gif);
}

.menu a.chatbut:before {
    background-image: url(../images/home/chatbut.gif);
}   
    
.menu a.weekly:before {
    background-image: url(../images/home/weeklybut.gif);
    
}
.menu a.linksbut:before {
    background-image: url(../images/home/linksbut.gif);
    
}
.menu a.garden:before {
    background-image: url(../images/home/gardenbut.gif);
}
.menu a.follow:before {
    background-image: url(../images/home/followbut.gif);
}




/* TEXT STUFF */

a {
    color: blueviolet;
}

a:checked {
    color: blue;
}

h1 {
    font-family: Courier, monospace;
	background-image: url(../images/home/img/4.png);
	color: var(--text);
	margin: 0;
	font-size: 14pt;
	font-weight: bolder;
	letter-spacing: 1px;
	margin-top: -2px;
    text-align: center;
}

h2 {
    font-family: Courier, monospace;
    background-image: url(../images/home/img/4.png);
	color: var(--text);
	margin: 0;
	font-size: 14pt;
	font-weight: lighter;
	letter-spacing: 1px;
	margin-top: -2px;
    text-align: center;
}

h3 {
    font-family: Courier, monospace;
	color: var(--text);
	margin: 0;
	font-size: 13.5pt;
	font-weight: bolder;
	letter-spacing: 1px;
	margin-top: -2px;
    text-align: center;
    
}

li {
    font-family: Georgia, Times, serif;
}

p {
    font-family: Courier, monospace;
}

span {
     font-family: Courier, monospace;
}

/* TEXT CLASSES */

p.smallp {
    font-size: 7pt;
}


h2.dotted {
    border-bottom: 2px dotted var(--text);
}

.small {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}
.page p {
    font-family: Georgia, Times, serif;
    font-size: 12pt;
    font-weight: lighter;
    margin-left: 2px;
    margin-right: 2px;
    
}   

.page li {
    font-family: Georgia, Times, serif;
    font-size: 10pt;
    margin-left: 2px;
    margin-right: 2px;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

#ct {
    text-align: center;
}

#at {
    font-size: 12pt;
    text-align: left;
}

hr {
    color: var(--Dpurple1);
}

/* SITE LOG */

#sitelog {
    margin: auto; 
    display: block; 
    width: 100%;
    align-items: center;
    background-color: #000;
    color: #FFF;
}

#logframe {
    width: 75%; 
    height: 250px;
    border-width: 5px;
    border-color: var(--Dpurple1);
    border-style: none none none double;
    margin: 10px auto;
    display: block;
}


/* IMG CLASSES */

.img_prof {
    width: auto;
    height: 120px;
    float: left;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}

.img_thumb {
    width: auto;
    height: 120px;
    align-content: center;
    float: left;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
}


.postimg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  box-shadow: 5px 5px 0px #57175e; 
}


.buttoncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;  
}

.buttoncenter :hover {
    transform: scale(105%);
    cursor: url(../images/cursor/LINK%20SELECT.cur), auto;

}

.button:hover {
    transform: scale(105%);
    cursor: url(../images/cursor/LINK%20SELECT.cur), auto;

}

.themebut {
    background: var(--bg);
    border: var(--text);
}

.themebut:hover {
    transform: scale(105%);
    cursor: url(../images/cursor/LINK%20SELECT.cur), auto;

}

img.revolver {
    display: block; 
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 50%;
}

img {
	max-width: 100%;
}


/* Post stuff */

.datum {
  background: #7332a8;
  background-image: url(../images/home/img/1.png);   
  outline: 3px solid transparent;
  color: var(--text);
  width: 200px;
  height: 20px;
  padding: 0.5em 0.3em 0.1em 0.5em;
}

.logpost {
    background: var(--bg);
    background: linear-gradient(0deg, var(--text) 0%, var(--bg) 25%);
    outline: 3px solid #1e1f16;
    color: var(--text);
    width: 90%;
    padding: 0.1em 0.5em 0.2em 0.5em;
}

.blogposteo {
    margin: 40px;
    
}

.archivepost {
    margin: 40px;
}

.postbody p {
    margin-left: 75px;
    margin-right: 75px;
    text-align: justify;
}

.posttitle p {
    margin-right: 75px;
    text-align: justify;
}

.archivelink {
    width: auto;
    height: 80px;
    align-content: center;
    float: right;
    padding-left: 20px;
    padding-right: 20px;
}





/* CHAT STUFF */  
.chatbox {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: 700px;
}

/* Cursor */

a:hover {
    cursor: url(../images/cursor/LINK%20SELECT.cur), auto;
}

p:hover {
    cursor: url(../images/cursor/TEXT.cur), auto;
}

li:hover {
    cursor: url(../images/cursor/TEXT.cur), auto;
}


h1:hover {
    cursor: url(../images/cursor/TEXT.cur), auto;
}


h2:hover {
    cursor: url(../images/cursor/TEXT.cur), auto;
}

h3:hover {
    cursor: url(../images/cursor/TEXT.cur), auto;
}