/*======================================

- DEAREST, a one true pairing (otp) clique
- Version 1
- Author: Shinju
- Author URI: http://snow-heart.net

======================================*/

/* GLOBAL LAYOUT AND STYLE */

html, body, div, span, h1, h2, h3,
p, blockquote, figure, figcaption, a, cite, dfn,
em, img, strong, b, i, 
ol, ul, li, table, tr, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

* {
	margin: 0;
	padding: 0;
}

header, section, footer, aside, nav, main, article, figure {
	display: block;
}

::-webkit-scrollbar {
	background: #e2ffff;
	width: 12px;
	height: 5px;
}

::-webkit-scrollbar-track {
	background: #e2ffff;
}

::-webkit-scrollbar-thumb {
	background: #cef8fd;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
}

::-webkit-scrollbar-corner {
	display: hidden;
}

::selection {
	background: #ccf8ff;
}

::-moz-selection {
	background: #ccf8ff;
}

body {
	background: #e3ffff url('imgs/v2_bg.png') center top repeat-x;
	margin: 0 auto;
	font: 13pt/170% 'Lato', sans-serif;
	color: #40869d;
	text-align: center !important;
}

#frame {
	margin: 0 auto;
	width: 960px;
	text-align: center;
}

header {
	background: url('imgs/v2_header01.png') center top no-repeat;
	width: 960px;
	min-height: 492px;
}

#content {
	background: url('imgs/v2_header02.png') center top no-repeat;
	min-height: 56px;
	padding: 0 160px;
}

nav {
	font: 18pt 'Yeseva One', cursive;
	color: #3eb3d7;
	text-transform: uppercase;
}

nav ul {
	margin: 0;
	padding: 0;
	list-style-type: none;
}

nav ul li {
	margin-right: 40px;
	display: inline;
}

nav ul li:last-child {
	margin-right: 0;
}

main {
	padding: 10px 0;
	text-align: left;
}

footer {
	background: url('imgs/v2_footer.png') center top no-repeat;
	padding: 40px 0 0 0;
	min-height: 29px;
	font: 9pt/110% 'Lato', sans-serif;
	text-transform: uppercase;
}

/* HEADERS & FONT STYLES */

h1 {
	font-size: 35pt;
}

h2 {
	font-size: 25pt;
}

h1, h2 {
	font-family: 'Dancing Script', cursive;
	color: #3884c5;
	text-transform: lowercase;
}

h1:first-letter, h2:first-letter {
	color: #006f92;
}

p {
	margin: 0 0 20px 0; 
}

.center, .codes {
	text-align: center;
}

b, strong {
	color: #1d7a97;
}

i, em {
	color: #2287ce;
}

.hearts {
	color: #a79dff;
}

.name {
	color: #bd8cbf;
}

blockquote {
	margin: 0 100px 10px 100px;
	font-size: 10pt;
	text-align: center;
	border-top: 1px double #44c3cb;
	border-bottom: 1px double #44c3cb; 
}

main ul {
	margin: 5px 0 5px 20px;
	list-style-type: none;
}

main ul li:before {
	padding-right: 0.25em;
	content: "\2605";
}

main ul li:nth-child(odd):before {
	color: #3ab3cf;
}

main ul li:nth-child(even):before {
	color: #2287ce;
}

#contact {
	margin: 0 auto !important;
	width: 400px;
}

#contact table {
	border: 0;
	border-collapse: collapse;
}

#contact td:nth-child(odd) {
	padding: 3px 0;
	width: 100px;
	text-transform: uppercase;
}

#contact td:nth-child(even) {
	width: 300px;
}

/* TEXT AREAS */

input {
	background: inherit; 
	margin: 0 0 5px 0; 
	padding: 2px 0 2px 5px;
	font: 13pt 'Lato', sans-serif;
	color: #40869d;
	border: 2px solid #44c3cb; 
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px;
}

input[type=text] {
	width: 97.5%;
}

input[type=submit] {
	width: 100%;
}

textarea {
	background: transparent;
	border: 2px solid #44c3cb; 
}

/* LINKS */
nav a, nav a:link {
	color: #64daff;
	text-decoration: none;
}

nav a:hover {
	color: #3eb3d7;
}

main a, main a:link, footer a, footer a:link {
	background: #ccf8ff; 
	color: #6295d3;
	padding: 0 2px; 
	text-decoration: none; 
}

main a:hover, footer a:hover {
	background: #efe0ff;
	color: #6295d3;
}

/* IMAGES */
img {
	background: transparent;
	border: 0;
}

.codes img, #links img {
	margin: 2px; 
	border: 5px solid #d0d8e2; 
	border-radius: 4px; 
	-moz-border-radius: 4px; 
	-webkit-border-radius: 4px; 
	opacity:0.5; 
	-webkit-transition: opacity .3s ease-in; 
	-moz-transition: opacity .3s ease-in; 
	-o-transition: opacity .3s ease-in; 
	transition: opacity .3s ease-in;
}

.codes img:hover, #links img:hover {
	border: 5px solid #a3cfe8; 
	opacity: 0.9;
}