/* Stylesheet for KaroDesigns.com */

/* Reset browser defaults */
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* Structure */

.clearer {
	clear: both;
}

body {
	background-image: url('images/bg-hp.jpg');
	background-repeat: repeat;
	color: #005B7F;
}

#page {
	display: block;
	width: 800px;
	margin: 30px auto;
	position: relative;
	background: #F2F3F9;
	padding: 0 0 1em 0;
}

#wrap {
	margin: 5px 0;
	padding: 10px 0;
	overflow: hidden;
	border-top: 1px solid #B1C5CD;
	border-bottom: 1px solid #B1C5CD;
}

/* #sidebar {
	float: left;
	width: 180px;
}
*/

#content {
	width: 800px;
	float: left;
	margin: 5px 0;
}

#footer {
	width: 800px;
	margin-top: 30px;
}
/* Typography */

body {
	font-size: 62.5%; /* set 1em = 10px */
	line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Trebuchet MS', Trebuchet, Helvetica, Arial, sans-serif;
}

#page h1 {
	font-size: 2.4em;
	text-align: center;
}

ul, li, p {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1em;
}

a, a:link {
	color: #005B7F;
	text-decoration: underline;
}

a:active {
	color: #005B7F;
	text-decoration: none;
}

a:hover {
	color: #C75944;
}

a:visited {
	color: #A75649;
	text-decoration: none;
}

/* =Header
------------------------------------------------------------------------------*/
#page header {
	background-image: url('images/header-bg.jpg');
	overflow: visible;
	width: 100%;
	display: block;
	position: relative;
	padding: 0;
	margin: 0;
	height: 200px;
}


#page header h1, #page header h2 {
	text-align: center;
}

#page header h1 {
	font-size: 4em;
	font-weight: bold;
	color: #F2F3F9;
	padding: 1em 0 0;
	letter-spacing: .2em;
	text-shadow: 2px 2px 4px #005B7F;
}

#page header h2 {
	font-size: 1.8em;
	font-weight: normal;
	color: #005B7F;
	padding: 1em 0;
	letter-spacing: .1em;
	text-transform: uppercase;
}


/* =Sidebar
------------------------------------------------------------------------------

#sidebar {
	margin: 20px 10px 0 10px;
}

#sidebar ul {
	margin-left: 0;
}

#sidebar ul ul {
	margin-left: 1em;
}

#sidebar li {
	padding: .5em 0;
	width: 100%;
	border-bottom: 1px solid #A75649;
}

#sidebar li a:hover {
	color: #06C;
}

#sidebar li ul li {
	padding: 0;
}

#sidebar a {
	font-size: 1.4em;
	padding: 5px;
}

/* Current page status
#home li#karo-home,
#about li#karo-about,
#links li#karo-links,
#gallery li#karo-gallery,
#gallery li#karo-gallery-computer,
#gallery li#karo-gallery-painted {
	background: #A75649;
}

#home li:hover#karo-home a,
#about li:hover#karo-about a,
#links li:hover#karo-links a,
#gallery li:hover#karo-gallery a,
#gallery li:hover#karo-gallery-computer a,
#gallery li:hover#karo-gallery-painted a {
	color: #06C;
}
*/

/* =Navigation
------------------------------------------------------------------------------*/
nav#menu {
	display: block;
	position: absolute;
	bottom: 0;
	z-index: 23;
	width: 100%;
}

nav#menu ul li {
	text-align: center;
	background: #B1C5CD;
	font-size: 14px;
}

nav#menu li {
	position: relative;
	line-height: 30px;
}


nav#menu > ul {
	display: table;
	width: 100%;
}
nav#menu > ul > li {
	display: table-cell;
	width: 19%;
	border-left: 5px solid #F2F3F9;
	border-top: 5px solid #F2F3F9;
	position: relative;
}

nav#menu > ul > li div { position: relative; }

nav#menu > ul > li:first-child {
	border-left: 0;
}

nav#menu ul li ul {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 23;
}

nav#menu ul li ul {
	display: none;
}

nav#menu ul li:hover ul {
	display: block;
	z-index: 23;
	background: #A75649;
}

nav#menu ul li ul li {
	border-top: 1px dotted #F2F3F9;
}

nav#menu ul li:hover {
	background-color: #9aabb3;
	transition: background-color 1.25s;
	-moz-transition: background-color 1.25s; /* Firefox 4 */
	-webkit-transition: background-color 1.25s; /* Safari and Chrome */
	-o-transition: background-color 1.25s; /* Opera */
}

nav#menu a {
	padding: 0;
	color: #005B7F;
	text-decoration: none;
	text-transform: uppercase;
	display: block;
}

nav#menu a:hover,
nav#menu > ul > li:hover > a {
	color: #F2F3F9 !important;
}



/* =Content
------------------------------------------------------------------------------*/

#content h1 {font-size: 2.4em;}
#content h2 {font-size: 2.1em;}
#content h3 {font-size: 1.6em;}
#content h4 {font-size: 1.4em;}
#content h5 {font-size: 1.4em;}
#content h6 {font-size: 1.2em;}

#content img {
	display: block;
	margin: 0 auto;
	position: relative;
}


#content h1,
#content h2,
#content h3,
#content h4,
#content h5,
#content h6 {
	font-family: 'Trebuchet MS', Trebuchet, Helvetica, Arial, sans-serif;
	font-weight: normal;
	padding: .5em 0;
	margin: 0 20px;
	color: #005B7F;
}

#content h3 sup {
	font-size: 65%;
	vertical-align: top;
}

#content p {
	margin: 10px 20px;
	font-size: 1.2em;
	text-align: justify;
	line-height: 1.8;
	color: #005B7F;
}

/* Links */
.links {
	display: block;
	float: left;
	width: 50%;
}

.links h2 {
	text-align: center;
}

/* Gallery */

.gallery-wrap {
	padding: 7px;
	overflow: hidden;
}

.gallery-wrap a {
	text-decoration: none;
}

#content .thumbnail img { background: url('images/loading.gif') no-repeat 50% 50%; }

.thumbnail {
	width: 244px;
	height: 370px;
	padding: 4px;
	margin: 4px;
	float: left;
	display: block;
	border: 1px dotted #B1C5CD;
	background: #B1C5CD;
	transition: background-color .75s;
	-moz-transition: background-color .75s; /* Firefox 4 */
	-webkit-transition: background-color .75s; /* Safari and 9aabbChrome */
	-o-transition: background-color .75s; /* Opera */
}

.thumbnail p {
	text-align: left !important;
}

div.thumbnail:hover {
	background-color: #9aabb3;
	border-style: solid;
	border-color: #005B7F;

}

.thumbnail:hover h3,
.thumbnail:hover p {
	color: #F2F3F9 !important;
	text-decoration: none;
	font-weight: normal;
}

.thumbnail img {
	width: 234px;
	height: 234px;
	overflow: hidden;
}

/* =Footer
------------------------------------------------------------------------------*/

#footer h1 {
	text-align: center;
	font-size: 1.4em;
	color: #005B7F;
}

#footer p {
	text-align: center;
	color: #666;
}