/*
Template Name: Akono HTML Template
Description: A Business/Portfolio HTML Template
Author: Chris Creed
URL: http://www.chris-creed.com
*/	

@import "styles/reset.css";

/* -------------------- */
/* -- General Styles -- */
/* -------------------- */
#wrap { width: 960px; margin: 0 auto;  }
body { font-family: arial, sans-serif; background-color: #fff; color: #555; line-height: 24px; font-size: 14px; }
h1 { font-size: 38px; margin: 0 0 30px 0; }
h2 { font-size: 28px; margin: 40px 0 30px 0; }
h3 { font-size: 24px; margin: 40px 0 20px 0; }
h4 { font-size: 18px; margin: 30px 0 15px 0;}
h5 { font-size: 18px; margin: 30px 0 5px 0;}
p { margin: 0 0 15px 0; }
a { text-decoration: none; color: #2684cd; }
a:hover { color: #555; cursor: pointer; }
.home { background: url(images/bg.jpg) top center no-repeat; }
.page { background: url(images/page-bg.png) repeat-x; }
.hide { display: none; }
.title { margin-top: 0; }
.post-line { clear: both; border-bottom: 1px #ddd dotted; margin: 40px 0 45px 0; }
.cache-images { display: none }
#main li { background:url(images/right-arrow.png) no-repeat; height:55px; vertical-align:middle; padding-left: 30px; font-style:italic;}


/* ------------ */
/* -- Header -- */
/* ------------ */
#header { height: 150px; padding: 45px 0 0 0; }
#header img, #header h1 { float: left; }
#header h1 { font-size: 50px; margin: 32px 0 0 5px; }

/* --------- */
/* -- Nav -- */
/* --------- */
#nav { float: right; margin: 25px -15px 0 0;  }
.menu {	padding: 7px 6px 0 0; }
.menu li { margin: 0 5px; padding: 0 0 8px;	float: left; position: relative; }
.menu a { display: block; padding:  8px 15px; margin: 0; color: #555; text-decoration: none; font-size: 20px; }
.menu .current a, .menu li:hover > a { color: #2684cd; }
.menu ul li:hover a, .menu li:hover li a { color: #555; }
.menu ul a:hover { background: #2684cd !important; color: #fff !important; }
.menu ul { background: #eee; display: none; margin: 0; padding: 0; width: 250px; position: absolute; top: 35px; left: 20px; border: solid 1px #ddd; }
.menu li:hover > ul { display: block; }
.menu ul li { float: none; margin: 0; padding: 0; }
.menu ul a { font-size: 16px; }
.menu ul ul { left: 250px; top: -3px; }
.menu li.current_page_item a { color: #2684cd; }
.menu .sub-menu li.current_page_item a { color: #2684cd; }

/* ---------------------- */
/* -- Featured Section -- */
/* ---------------------- */
#featured-section { float: left; margin: 10px 0 0 0; }
#featured-section h2 { background: url(images/featured-title.png) no-repeat; width: 953px; height: 56px; text-indent: -9999px; margin-top: 0; }
#circles { float: left; margin: 10px 0 0 0; }
#circles img { float: left; border: none !important; margin: 0 0 0 36px; width: 213px; height: 205px; }
#featured-section .circle-red { background: url(images/circle-red.png) no-repeat; }
#featured-section .circle-pink { background: url(images/circle-pink.png) no-repeat; }
#featured-section .circle-orange { background: url(images/circle-orange.png) no-repeat; }
#featured-section .circle-yellow { background: url(images/circle-yellow.png) no-repeat; }
#featured-section .first { margin-left: 0; }


/* ---------------- */
/* -- Front Page -- */
/* ---------------- */
#frontpage-main { float: left; margin: 115px 0 50px 0; background-color: #fff; }
#frontpage-main h3 { margin-top: 0; }
#frontpage-content { float: left; width: 379px; padding: 0 100px 0 0; border-right: 1px #ddd dotted; }
#frontpage-content p { font-size: 16px; line-height: 24px; }
#frontpage-sidebar { float: right; width: 380px; padding: 0 0 0 100px; }
#frontpage-sidebar .meta, #frontpage-sidebar .meta a  { color: #aaa; font-size: 18px; }
#frontpage-sidebar .blog-title { font-size: 18px; }
#frontpage-sidebar .read-more { display: block; background: url(images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; }
#frontpage-sidebar .read-more:hover { background: url(images/red-button-bg.png) no-repeat; }
.blue-bullets { float: left; margin: 10px 0 0 0; }
.blue-bullets li { background: url(images/blue-bullet.png) no-repeat; height: 21px; position: relative; padding: 0px 0 18px 35px; }

/* ------------- */
/* -- Content -- */
/* ------------- */
#main { float: left; margin: 90px 0 50px 0; width: 100%; }
#content { float: left; width: 480px; padding: 0 165px 0 0; }

/* ---------- */
/* -- Page -- */
/* ---------- */
.page-headline { font-size: 36px; margin: -5px 0 0 0;}
.page-headline2 { font-size: 28px; margin: -5px 0 0 0;}

/* --------------- */
/* -- Portfolio -- */
/* --------------- */
#porfolio-content { margin: auto; padding-left:50px;  }
.portfolio-item { float: left; margin: 0 0 20px 20px; }
.first { margin-left: 0; }


/* ------------- */
/* -- Project -- */
/* ------------- */
#project-content { float: left; width: 480px; }
#project-header { margin: 0 0 25px 0; }
#project-content h3 { margin: 0 0 10px 0; }
#project-content h3 span { color: #888; }
#project-image-large img { float: right; border: 1px #ddd solid; }
#project-content .read-more { display: block; background: url(images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; }
#project-content .read-more:hover { background: url(images/red-button-bg.png) no-repeat; }

/* ----------- */
/* -- Posts -- */
/* ----------- */
.post-title { margin: 0; }
.post-title a { font-size: 24px; color: #555; }
.post-title a:hover { font-size: 24px; color: #2684cd; }
.post-meta, .post-meta a { margin: 5px 0 20px 0; font-size: 18px; color: #888; }
.more-link { display: block; background: url(images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; }
.more-link:hover { background: url(images/red-button-bg.png) no-repeat; color: #fff; }

/* ------------- */
/* -- Sidebar -- */
/* ------------- */
#sidebar { float: left; width: 315px; margin: 0; }
#sidebar .sidebar-title { margin-top: 0; }
#sidebar .sidebar-button { clear: both; display: block; background: url(images/orange-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; }
#sidebar .sidebar-button:hover { background: url(images/black-button-bg.png) no-repeat; }
.recent-projects { clear: both; }
#sidebar .portfolio-item { clear: both; margin: 0 0 20px 0; }

/* ------------------ */
/* -- over images  -- */
/* ------------------ */

div.nav-romantic {
height: 166px;
width: 280px;
margin:0;
padding:0;
background-image:url(images/romantic-over.png);
}

div.nav-rainbow {
height: 166px;
width: 280px;
margin:0;
padding:0;
background-image:url(images/rainbow-over.png);
}

div.nav-central {
height: 166px;
width: 280px;
margin:0;
padding:0;
background-image:url(images/ce-over.png);
}

div.nav-exclusive {
height: 166px;
width: 280px;
margin:0;
padding:0;
background-image:url(images/ex-over.png);
}

div.nav-krk {
height: 166px;
width: 280px;
margin:0;
padding:0;
background-image:url(images/krk-over.png);
}

div.nav-bonjour {
height: 166px;
width: 280px;
margin:0;
padding:0;
background-image:url(images/bonjour-over.png);
}


div.nav-rainbow a, div.nav-rainbow a:link, div.nav-rainbow a:visited,
div.nav-romantic a, div.nav-romantic a:link, div.nav-romantic a:visited,
div.nav-central a, div.nav-central a:link, div.nav-central a:visited,
div.nav-exclusive a, div.nav-exclusive a:link, div.nav-exclusive a:visited,
div.nav-krk a, div.nav-krk a:link, div.nav-krk a:visited,
div.nav-bonjour a, div.nav-bonjour a:link, div.nav-bonjour a:visited {
display:block;
}

div.nav-rainbow img,
div.nav-romantic img,
div.nav-central img,
div.nav-exclusive img,
div.nav-krk img,
div.nav-bonjour img {
width:100%;
height:100%;
border:0;
}

div.nav-rainbow a:hover img,
div.nav-romantic a:hover img,
div.nav-central a:hover img,
div.nav-exclusive a:hover img,
div.nav-krk a:hover img,
div.nav-bonjour a:hover img {
visibility:hidden;
}







/* ------------------ */
/* -- Contact Form -- */
/* ------------------ */
#contact-details { float: left; width: 300px; padding: 0 120px 0 0; }
#contact-details .title { margin-top: 0; }
#contact-details h4 { margin: 0 0 5px 0; }
#contact-details span { color: #888; }
#contact-form-container { float: left; width: 450px;  }
#contact-form input { background: url(images/textinput-bg.png) repeat-x; border: 1px #ddd solid; padding: 15px; width: 250px; margin: 0 0 15px 0; font-size: 12px; color: #555; font-family: arial, sans-serif; }
#contact-form textarea { background: url(images/textarea-bg.png) repeat-x; border: 1px #ddd solid; padding: 15px; width: 350px; margin: 0 0 15px 0; font-size: 12px; color: #555; line-height: 18px; height: 150px; font-family: arial, sans-serif; }
#contact-form .submit { display: block; background: url(images/blue-button-bg.png) no-repeat; width: 141px; height: 34px; color: #fff; text-align: center; padding: 5px 0; margin: 25px 0 0 0; border: none; cursor: pointer; font-size: 12px; margin: 0 0 0 0; }
#contact-form .submit:hover { background: url(images/red-button-bg.png) no-repeat; color: #fff; }
#response { background-color: #eee; border: 1px #ddd solid; padding: 10px; color: #ff0000; }

/* ------------ */
/* -- Footer -- */
/* ------------ */
#footer { float: left; border-top: 1px #ddd dotted; margin: 20px 0 0 0; padding: 15px 0 50px 0; width: 100%; }