/*
CSS for PROJECT CLIQUE: A Clique Web Directory [ver. 1]
http://cliques.northstar.nu
Based on a design by Templated (https://templated.co/)
Modified by Ai~ [http://northstar.nu] (2019)
Background pattern from Toptal Subtle Patterns
Released for free under a Creative Commons Attribution 3.0 License
*/






















/*

LEARN

FROM

YOUR

OWN

SOURCES!


Feel free to learn from bits and parts of the css here, but do NOT just copy and paste the ENTIRE style and html markup here to get my layout. That's plagiarism, and it's just not cool. I put together a LOT of tutorials in the web to come up with the final design, so it would be nice if you could RESPECT my efforts a little. Learn from your own research, and give credit where credit is due!

*/
























body {
	background: #afd7d0 url(img/bg.gif) repeat top left;
	font: 19px/150% 'Muli', Verdana, sans-serif;
	color: #435f67;
	margin: 0px;
	padding: 0px;
	text-align: justify;
	overflow-x: hidden;
}

fieldset {
    border:0px;
    width: 60%;
    margin:auto;
}

input, textarea, select {
	border: 0px;
	border: 1px dotted #1B2F4F;
	font: 14px/100% Rubik, Verdana, Tahoma, sans-serif;
	text-transform: uppercase;
	background: #a0d3d4;
	padding: 5px;
	padding: 10px;
	-moz-border-radius: 20px;
    -webkit-border-radius: 20px;
    border-radius: 20px; 
    -khtml-border-radius: 20px; 
}

textarea {
overflow-x: hidden;
overflow-y: hidden;
width: 400px;
height: 200px;
}




/*h3 {
font: italic 24px/80% 'Rubik', Garamond, Georgia, Serif;
color: #a67797; 
}
*/

.right {
	float: right;
	padding: 10px;
	margin-left: 20px;
}

.left {
    float: left;
    padding: 10px;
	margin-right: 20px;
}

a {
	text-decoration: none;
	color: #568f75;
	border: 0px;
}

a:hover {
	text-decoration: none;
	color: #355c6b;
	/*border-bottom: #FFFFCC 1px dotted;
	border-bottom: 2px solid #bb4053;*/
    text-shadow: 1px 1px 2px #ccc, 0 0 25px #ffffcc, 0 0 5px #ccc;
}

a:visited {
    color: ;#ce5e6c;
}

a img {
	border: none;
}

img.left {
	float: left;
	margin-right: 20px;
}

img.right {
	float: right;
	margin-right: 20px;
}

img.trans {
filter:Alpha(opacity=50);
-moz-opacity:0.50;
opacity:0.50;
border:none;
}

img.trans:hover {
filter:Alpha(opacity=100);
-moz-opacity:1.00;
opacity:1.00;
border:none;
}

/*b, strong {
	color: #DB8183;
}

i, em {
	color: #a67797; 
}*/

abbr {
    color: #7ba9ba;
    line-height: 100%;
    padding: 0;
}

del, strike {
	color: #bbb; 
}

h4 {
font-size: 20px;
}

ul, li {
	margin: 0;
	padding: 0;
	list-style: none;
	line-height: 150%;
}


table {
	border-collapse:collapse;
	border:1px solid #9db9af;
	font:14px/145% 'Montserrat',helvetica,arial,verdana;
    text-align: center;
    margin:0 auto;
}

td, th {
	padding:5px;
}

th {
	background: #e2e3d7;
    text-transform: uppercase;
}


.odd {
background: #e9e8d8;
}

hr {
width: 75%;
border: 0;
height: 3px;
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), #85b3c9, rgba(0, 0, 0, 0));
}



/* Page */

#page {
    width: 1142px;
    margin: 0 auto;
    background: #9ed2d0;
}

/* Header */

#header {
	width: 1142px;
	height: 571px;
	margin: 0 auto;
	background: url(img/projclqhdr.png) no-repeat;
	/*margin-bottom: -500px;*/
}


/* Welcome Note */

#welcome {
    width: 420px;
	padding: 10px;
	position: relative;
	top: 200px;
	left: 80px;
	text-align: right;
	line-height: 120%;
	color: #fff;
	font: 'Montserrat', 'Century Gothic', Verdana, Sans-serif;
}

#welcome p {
	font-size: 18px;
}

#welcome h4 {
	font-size: 24px;
}

.smallcaps {
    font-variant: small-caps;
}

.stat {
text-align: center;
font: 12px/120% Rubik, Cambria, Sans-Serif;
letter-spacing: 1px;
text-transform: uppercase;
background: #64bdc2;
padding: 5px;
color: #0482a5;
}

.stat a, .stat a:active {
	color: #0482a5;
    text-shadow: 1px 1px 2px #ccc, 0 0 25px #fff, 0 0 5px #ccc;
}

.stat a:hover {
    color: #0e5d48;
}

/*EFFECTS*/
/*rounded corners*/
.corners {
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px; 
-khtml-border-radius: 20px; 
}

/* opacity */
.opacity {
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
filter: alpha(opacity=65);
opacity: 0.65;
}



#menu
	{
	margin: 0px auto;
	padding: 10px;
	background: #8dcccc;
	}
	
#menu ul	{
	text-align: center;
    list-style: none;
    margin: 0;
	padding: 0;
	}
	
#menu li	{
	display: inline-block;
	padding: 10px;
	}
	
#menu li a, #menu li span {
	margin-left: 1px;
	text-decoration: none;
	padding-bottom: 10px;
	font: bold 24px 'Philosopher', Garamond;
	text-transform: uppercase;
	outline: 0;
	color: #50a6ab;
}


	
#menu li:hover a, #menu li.active a, #menu li.active span {
    color: #41898d;
    border-bottom: 2px solid #bb4053;
    text-shadow: 1px 1px 2px #ccc, 0 0 25px #ffffcc, 0 0 5px #ccc;
    }
	



/* Content */

#content {
	width:85%; 
	margin: 0 auto;
	padding: 20px 0px;
}

#joinform {
    width: 50%;
    margin: 0 auto;
}

#linklist {
    padding: 20px;
    margin: 0 auto;
    width: 100%;
}

#linklist  ul {
/*columns: 3;
  -webkit-columns: 3;
  -moz-columns: 3;
*/
  padding-bottom:5px;
   -webkit-columns: 3 200px;
     -moz-columns: 3 200px;
          columns: 3 200px;
  -webkit-column-gap: 5px;
     -moz-column-gap: 5px;
          column-gap: 5px;
  -webkit-column-rule: 1px dotted #579a8a;
     -moz-column-rule: 1px dotted #579a8a;
          column-rule: 1px dotted #579a8a;

}

#linklist ul li {
    text-align: left;
    float: left;
    width: 250px;
    height: 150px;
}

.post {
	padding: 15px;
}

.post h1, .post h2 {
    font: 50px/100% 'Great Vibes', Garamond, Georgia, Serif;
    text-align: center;
	color: #bb4051;
	/*border-bottom: 2px dashed #DBBEBE;
    text-shadow: 1px 1px 2px #ccc, 0 0 25px #ffffcc, 0 0 5px #ccc;*/
	letter-spacing: 1px;
}

.post h1 {
    padding: 10px;
	width: 30%;
}

.post h2 {
    padding: 10px;
	width: 20%;
	height: 250%;
	float: left;
	margin-right: 10px;
}	


.post h3 {
	margin: 0;
	padding: 5px;
	color: #a67797;
	font: 16px/120%;
	text-transform: uppercase;
	text-align: left;
	letter-spacing: 5px;
	border-bottom: 1px solid rgba(255,255,255,0.08);
}


.post .entry {
	padding: 0 20px;
	text-align: justify;
	margin-top: -5px;
	margin-bottom: 2px;
	line-height: 150%;
}

.post .entry .p {
	text-align: justify;
	color: #1B4C4F;
}

.dropcap {
  color: #903;
  float: left;
  font-family: 'Parisienne', Georgia, Garamond, Serif;
  font-size: 75px;
  line-height: 60px;
  padding: 5px 8px 3px;
}




.legend {
font: 16px/100% 'Hind', Arial, Sans-serif;
color: #68998b;
text-align: center;
}

.cat {
color: #68998b;
font: 18px/100% 'Hind', Arial, Sans-serif;
}

.bq, blockquote {
margin: 0 auto;
width: 70%;
text-align: center;
padding: 15px;
color: #627372;
font: 14px/100% 'Questrial', Georgia, Garamond, Serif;
letter-spacing: 1px;
text-transform: uppercase;
}

.inset {
    border: 2px dashed #9ebaa0;
    width: 35%;
    float: right;
    font: 18px/150% 'Catamaran', Georgia, Serif;
    color: #68998b;
    padding: 0px 0px 5px 15px;
    margin-left: 10px;
    text-align: left;
}


.bq, blockquote {
    background: #b0d3d7;
-moz-box-shadow: 10px 8px #4ab6c2;
-webkit-box-shadow: 10px 8px #4ab6c2;
box-shadow: 10px 8px #4ab6c2; 
}

.imgcntr {
    height: 50px;
    position: relative;
}

#content ol {
    list-style-type: decimal;
    width: 85%;
}

#content ul, #updates ul {
    list-style-type: none;
    width: 95%;
    margin: 0 auto;
    padding-left: 30px;
    font: 18px/120% 'Rubik', Arial, Sans-serif;
}

#content ul li, #updates ul li {
    background: url(img/bullet3.gif) no-repeat 0 5px;
    padding-left: 25px;
}

#updates {
}


/* BUTTONS */
.button {
background: #f2f2da;
border: 1px dashed #95bfc4;
padding: 0px 10px;
font: 25px/150% Kurale, Garamond, Georgia, Serif;
text-transform: uppercase;
letter-spacing: 3px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.button:hover {
background: #d6e6e6;
border: 1px solid #95bfc4;
color: #ce5e6c;
padding: 0px 10px;
}




/* Footer */

#footer {
    width: 80%;
	clear: both;
	margin: 0 auto;
	padding: 10px;
    font: 12px/130% 'Rubik', Verdana, Sans-serif;
    color: #4d9f9b;
}

#footer .nav {
    font: 16px/150% 'Montserrat', Verdana, Sans-serif;
    text-align: center;
    letter-spacing: 5px;
}

#footer .text {
   padding: 10px;
   text-align: center;
}