/* - - - - - - - - - FONTS - - - - - - - - - */

@font-face {
	font-family: "Viner Hand ITC";
    src: url(img/VINERITC.TTF);	
}	
	
#siteTitle {
	text-shadow: 0 0 15px #000000;
	font-family: "Arial";
    font-size: 48px;
	margin: auto;
	text-align: center;
}		

#pageTitle {
	font-family: "Arial";
    font-size: 2em;
	text-shadow: 0 0 15px #000000;
	text-align: center;
}		

#pagesubTitle, #pagesubTitle p{
	font-family: "Arial";
    font-size: 1.5em;
	text-shadow: 0 0 15px #000000;
	text-align: center;
}		


#formLabel {
	font-family: "Arial";
    font-size: 1.2em;
	text-shadow: 0 0 15px #000000;
	text-align: center;
}		

* {
	font-family: "Arial";
	font-weight:bold;
}	
	
/* - - - - - - - - - HTML ELEMENTS GENERAL - - - - - - - - - */

html,body { 
	margin:0; 
	padding:0; 
	height: auto;
	background-color: #f7e7ce;
	}

hr { 
    color: black;
    display: block;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
    margin-left: auto;
    margin-right: auto;
    border-width: 2px;
	}

table {
	border-collapse: collapse;
}

.roundp
{
	border-radius: 33px;
	background-color: #000000;
	padding: 10px;
	border: 5px solid #FFFFFF;
}

/* - - - - - - - - - LINKS - - - - - - - - - */

.fancylink {
    text-decoration: none;
	font-family: "Arial";
}

.tinylink {
    text-decoration: none;
	font-family: "Arial";
	font-size: small;
}

a:link {
    text-decoration: none;
	font-family: "Arial";
}

option {
    text-decoration: none;
	font-family: "Arial";
}


form {
	 display: inline; 
	 margin: 0;
}

iframe{
    overflow:hidden;
	border:none;
}

.centerMe {
  text-align: center;
}

/* - - - - - - - - - MAIN LOGO - - - - - - - - - */

.mainLogo {
	max-width:90% vw;
	text-shadow: 0 0 15px #000000;
	font-family: "Arial";
    font-size: 48px;
	margin: auto;
	text-align: center;
}

.mainLogo a {
	text-decoration: none;
	text-shadow: 0 0 15px #000000;
	font-family: "Arial";
    font-size: 36px;
	margin: auto;
	text-align: center;
}

.mainLogo img {
	max-width:90vw;

}

#mainPageContent {
	border: 5px solid #FFFFFF;
}

#homepageBlock  {
	width:45vw;
	display:inline-block;
	
}

#homepageBlock img {
	max-width:45vw;
}



/* - - - - - - - - - SITE BUTTON - - - - - - - - - */

.dropdown {
	left: 10px;
    top: 10px;
    z-index: 99;
    position: fixed;
    display: inline-block;
}

#sitemenu{
	font-family: "Arial";
    font-size: 24px;
    width: 90%;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
	font-size: 18px;
    background-color: #f7e7ce;
	color: #000000;
	text-shadow: 0 0 15px #000000;
}

/* - - - - - - - - - MAIL BADGE - - - - - - - - - */

.mailbadge {
	left: 10px;
    top: 10px;
    z-index: 99;
    position: fixed;
    display: inline-block;
	-border: 5px solid  #FFFFFF;
	-border-radius: 25px;
    -padding: 5px 5px;
	-background-color: #f7e7ce;
	text-align: top;
	background-image:url(img/mail.png);
	background-repeat:no-repeat; 
	background-size:100% 100%; 
}

.maillink {
    text-decoration: none;
	font-family: "Arial";
	color: #FFFFFF;
	font-size: 24px;
}

/* - - - - - - - - - MAIN CONTAINER - - - - - - - - - */

#mainContainer 
	{ 
	width: 90vw;
    padding: 5px;
	border: 5px solid  #FFFFFF;
	border-radius: 50px;
	background: rgba(255, 255, 255,0.8);
    z-index: 1;
	margin: auto;
	}

/* - - - - - - - - - FOOTER - - - - - - - - - */

#footer { 
overflow: hidden; 
background:white;
position: fixed; 
bottom: 0; 
width: 100%; 
}

.footeritem {
	display: inline-block;
}

/* - - - - - - - - - STORE - - - - - - - - - */

#catList, #subcatList, #brandList {
	font-family: "Arial";
    font-size: 24px;
    width: 90%;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
	font-size: 18px;
    background-color: #f7e7ce;
	color: #000000;
	text-shadow: 0 0 15px #000000;
}

#optionlist {
	font-family: "Arial";
    font-size: 14px;
    -width: 20%;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    background-color: #f7e7ce;
	color: #000000;
	text-shadow: 0 0 15px #000000;
}

.optionblock {
	    display: inline-block;
}

.adSubjectBox {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 18px;
	font-family: "Arial";
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

#adSubjectarea {
    width: 90%;
    height: 100px;
    padding: 15px 15px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    -border-radius: 25px;
    background-color: #f7e7ce;
    font-size: 18px;
	font-family: "Arial";
    resize: none;
}

.storeshortbox {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 16px;
	font-family: "Arial";
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

.storetinybox {
    width: 100px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 16px;
	font-family: "Arial";
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

#itemSearch {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 18px;
	font-family: "Arial";
    background-color: #f7e7ce;
    background-image: url('../img/searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 5px 5px 5px 40px;
}

/* - - - - - - - - - LOGIN PAGE - - - - - - - - - */

#usernameField {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 18px;
	font-family: "Arial";
	text-align: center;
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

#passwordField {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 18px;
	font-family: "Arial";
	text-align: center;
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

/* - - - - - - - - - SIGNUP PAGE - - - - - - - - - */

.signupshortbox {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
    font-size: 18px;
	font-family: "Arial";
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

#signuptextarea {
    width: 90%;
    height: 100px;
    padding: 15px 15px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    -border-radius: 25px;
    background-color: #f7e7ce;
    font-size: 18px;
	font-family: "Arial";
    resize: none;
}
input[type=password] {
    width: 90%;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
	font-family: "Arial";
    font-size: 18px;
    background-color: #f7e7ce;
    padding: 5px 5px 5px 5px;
}

#countrylist{
    width: 90%;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
	font-size: 18px;
	font-family: "Arial";
    background-color: #f7e7ce;
}

/* - - - - - - - - - SUBMIT BUTTON - - - - - - - - - */

#submitButton {
    background-color: #000000; /* Green */
    border: none;
    color: #f7e7ce;
    padding: 10px 10px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
	font-family: "Arial";
    font-size: 18px;
	font-weight: bold;
}


/* - - - - - - - - - RECOMMENDATION - - - - - - - - - */

.recommendation {
    height:	250px;
    width:	250px;
    background-color: FFFFFF;
	display: inline-block;
	margin: 2px;
	border: 5px solid  #FFFFFF;
	overflow: hidden;
	position:relative;
	z-index: 0;

}

.recommendation img
{
  max-width:250px; 
  max-height:250px;
  margin:auto;
  display:block;
  z-index: -1;

}

#recommendationtitle
{	    
	background: rgba(212, 175, 55,0.8);
	max-width:250px; 
	max-height:250px;
	overflow: auto;
	position: absolute;
	top: 0x;
	font-size: medium;
	font-family: Arial;
}

/* - - - - - - - - - CONTACT FORM - - - - - - - - - */

#contactTopic {
	font-family: "Arial";
    font-size: 24px;
    width: 90%;
    padding: 5px 5px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    border-radius: 50px;
	font-size: 18px;
    background-color: #f7e7ce;
	color: #000000;
	text-shadow: 0 0 15px #000000;
}


#contacttextarea {
    width: 90%;
    height: 100px;
    padding: 15px 15px;
    box-sizing: border-box;
    border: 5px solid #FFFFFF;
    -border-radius: 25px;
    background-color: #f7e7ce;
    font-size: 18px;
	font-family: "Arial";
    resize: none;
}




/* - - - - - - - - - MAIL - - - - - - - - - */
#mailTable {
    width: 90%;
}

#mailTable tr:nth-child(even){
	background: rgba(255, 255, 255,0.6);
}

#mailTable tr:hover {
	background-color: #ddd;
}

#mailTable th {
    text-align: left;
    background-color: #000000;
    color: white;
}


/* - - - - - - - - - POSTING - - - - - - - - - */

.PostingBox {
    --height:	500px;
    width:	380px;
	display: inline-block;
	overflow: hidden;
	position:relative;
	z-index: 0;

}

.PostingTable {
		border-collapse: collapse;
	    font-size: 12px;
		margin: none;

	}
	
.PostingTable tr:nth-child(even) {background: rgba(255, 155, 0,0.3)}
.PostingTable tr:nth-child(odd) {background: rgba(102, 153, 255,0.6)}
	

#littlePostMsg {
	overflow: hidden;
	width: 350;
	font-size: 12px;
}

#littlePostTitle {
	overflow: hidden;
	width: 200;
	font-size: 12px;
}

.detailcontent {
    display: none;
	overflow: hidden;
	width: 350;
	font-size: 12px;
}

.collapsibleSmallPost {
	overflow: hidden;
    cursor: pointer;
    width: 350;
}

.activeSmallPost, .collapsibleSmallPost:hover {
	width: 350;
}

.contentSmallPost {
	width: 350;
    display: none;
    overflow: hidden;
}