/*
THEME NAME: Caramel Ink
THEME URI: http://www.caramelink.com
DESCRIPTION: Created for Caramel Ink based on Sandbox
VERSION: 1.0
AUTHOR: <a href="http://www.caramelink.com">Carine & David</a>
AUTHOR URI: David & Carine Chung
TAGS: Design Portfolio
*/


/******* Home Page Specific Overrides *********/
body.home {
background:black url(images/bg.gif) repeat-x scroll center top;
}

body.home div#backgroundimage{
background:transparent url(images/header_bg.jpg) no-repeat scroll center top;
}

body.home div#header{
height:724px;
}

body.home div#blog-intro {
height:143px;
padding-top: 20px;
}

#blog-description {
padding-left:8px;
}

body.home #skip-link {
width:206px;
margin:20px 0 0 80px;
}

body.home div#skip-link>a {
width: 111px;
height:48px;
text-indent:-9999px;
display: inline-block;
background:transparent url(images/send-work-sprite.png) no-repeat scroll 0 0;
background-position: -156px 0;
float:left;
}

body.home div#skip-link>a:hover {
background-position: -269px 0;
}

body.home #container {
height:468px;
overflow:hidden;
background:transparent;
}

body.home #content {
margin:0;
}

body.home div.hentry { /* need all available space to display latest work */
padding-left: 0;
padding-right: 0;
}

body.home #page-title {
font-size:18px;
color:#c69c4c;
word-spacing:0.5em;
text-transform:none;
padding-left:8px;
}

body.home div.entry-content ul{
list-style-type:none;
width:960px;
padding:0;
}

body.home div.entry-content li{
display:block;
float:left;
padding:6px;
}

body.home div.entry-content img {
border-style:none;
text-decoration:none;
}

body.home #primary.sidebar {
display:none;
}

body.home h2.entry-title {
font-size:36px;
color:#000000;
text-transform: uppercase;
margin-top:30px;
}

/******** Portfolio-specific overrides (body.portfolio) ***********/
body.portfolio #primary.sidebar {
display:none;
}

body.portfolio img {
border:none;
}

body.portfolio div#content { 
margin:0px; /* no sidebar, use full available width */

}

body.portfolio div#container { 
background:transparent;
}

/* page div: top-most section in portfolio */
body.portfolio div.hentry.page { 
min-height:0; /* This section should be as short as possible, so override general min-height */
padding-right: 350px; /* text should not be too wide */
padding-top: 50px; /* Add some distance with 'arrow' */
margin-top: 0;
}

body.portfolio div.hentry.page h4 { /* portfolio sub-category nav buttons */
font-size:20px;
color:#000000;
text-transform: uppercase;
margin:0;
}

body.portfolio div.hentry.page h4 a {
color:#FFFFFF;
background-color:#c5c4c4;
padding: 6px 10px 6px 10px;
margin-right: 5px;
}

body.portfolio div.hentry.page h4 a:hover {
color:#FFFFFF;
background-color:#c69d4b;
padding: 6px 10px 6px 10px;
margin-right: 5px;
}

.entry-category {
color:#CCCCCC;
}

.entry-category a{
color:#CCCCCC;
}

/* .hentry.post: 1 container for each portfolio work */
body.portfolio div.hentry.post { /* one post per work */
padding: 0; /* no padding to allow borderless work-image-highlight */
}

body.portfolio div.hentry.post table, 
body.portfolio div.hentry.post td { /* 1 table per work, each containing work info + img highlight*/
padding: 0;
vertical-align: top;
border-style:none;
border-collapse:collapse; /* best way to remove white space in IE*/
}

body.portfolio div.hentry.post td { 
background: transparent url('images/left-shadow.png') repeat-y 0 0;
}

div.work-image-highlight { /* image representing the work */
margin: 2px;
padding: 0;
width: 620px;
height: 380px;
overflow: hidden;
}

/* .portfolio-entry: container for post content each portfolio work */
div.portfolio-entry { /* container for info on work */
width: 266px;
height: 330px;
padding: 25px 35px;
overflow: visible;
background: transparent url('images/left-shadow.png') repeat-y 0 0;
}

div.portfolio-entry h2.entry-title { /* work title */
margin: 0;
}

div.portfolio-entry div.entry-content{ /* description of the work */
color:#666666;
line-height:1.4em;
}

div.portfolio-entry div.portfolio-testimonial {
padding-top:30px;
}

div.portfolio-testimonial {
padding-bottom: 20px;
line-height:1.3em;
}

div.portfolio-testimonial span.testimonial-text{
display:inline-block;
margin: 0 15px; /* leave space for quotation marks */
font-size:12px;
font-style:italic;
color:#999999;
word-spacing:0.2em;
line-height:1.3em;
padding: 0;
}

div.portfolio-testimonial img.open-quote { /* quote around testimonial */
margin: 0 0 -17px -10px;
padding:0;
}

div.portfolio-testimonial img.close-quote { /* quote around testimonial */
margin: -18px 0 5px 255px;
padding:0;
}

div.portfolio-testimonial div.testimonial-author {
margin: 0; /* leave space for quotes */
font-size:12px;
font-style:italic;
color:#cc99cc;
word-spacing:0.2em;
line-height:1.3em;
text-align:right;
}

body.portfolio div.entry-meta {
text-align:right;
margin-top:-10px;
}

div.portfolio-entry-links {
position: relative; /* make absolutely positioned back-to-top button relative to this */
}

/******** View More button ***********/
div.portfolio-entry-view-more {
display: none;
height: 45px;
margin-left:50px;
} 

a.view-more-link {
display: inline-block;
background: transparent url('images/viewmore-sprite.png') no-repeat 0 0; /*** TODO: CHANGE IMAGE!! **/
height: 100%;
width: 126px;
}

a.view-more-link:hover {
background-position: -129px 0;
}

/******** back to top button ***********/
div.portfolio-entry-back-top {
display: none;
height: 45px;
position: absolute;
right: -48px; /* -35px to post edge and -13px 'overhang' */
top: 0px;
}

a.back-to-top-link {
display: inline-block;
background: transparent url('images/back-to-top-shadow-sprite.png') no-repeat 0 0;
height: 100%;
width: 126px;
}

a.back-to-top-link:hover {
background-position: -129px 0;
}


/******** Portfolio detailed Page (body.portfolio-post-template.portfolio) - specific overrides ***********/
body.portfolio-post-template.portfolio div.work-image {
    margin: 18px 2px 2px 2px; /* add gap above work image - if no work image present, image highlight above it is not affected */
}

body.portfolio-post-template.portfolio div.portfolio-entry-links {
position: static; /* reset from main portfolio page */
}

body.portfolio-post-template.portfolio div.hentry.post { /* one post per work */
position: relative; /* make absolutely positioned back-to-top-link relative to this */
}

/******** visit the site button : only in portfolio post ***********/
div.portfolio-entry-visit-site {
float:right;
display: inline-block;
height: 45px;
} 

a.visit-the-site-link {
display: inline-block;
background: transparent url('images/visit-the-site-sprite.png') no-repeat 0 0;
height: 100%;
width: 126px;
}

a.visit-the-site-link:hover {
background-position: -129px 0;
}

/******** back to top button overrides ***********/
body.portfolio-post-template.portfolio div.portfolio-entry-back-top {
  top: auto; /* reset portfolio settings */
  bottom:20px; /* push down almost all the way */
  right: -13px;
}

body.portfolio-post-template div.hentry.p1 {
margin-bottom: 0px;/* removes the last margin gap at bottom of page */
}


/******** Shared CSS ***********/
body {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:black url(images/bg_inner.gif) repeat-x scroll center top;
color:#000000;
font-family: Arial, Helvetica, sans-serif;
font-size:14px;
line-height:1.5em;
text-align:left;
word-spacing:0.3em;
margin:0;
}

div#backgroundimage {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:transparent url(images/header-inner_bg.jpg) no-repeat scroll center top;
min-width:960px;
}

div#wrapper {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
margin:auto;
position:relative;
width:960px;
}

/******** Menu ***********/
div#menu {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
position:absolute;
top:0;
background: transparent repeat-x scroll center top;
height:34px;
font-size:14px !important;
text-transform: uppercase;
line-height:1.2em;
text-align:left;
word-spacing:0.2em;
}

div#menu ul,div#menu ul ul {
line-height:1;
list-style:none;
margin:0 0 0 20px;
padding:0;
}

div#menu ul a {
display:block;
margin: 4px 34px 4px 0;
padding:6px 18px 4px 18px;
text-decoration:none;
color:#000000;
}

/*Keep current page highlighted*/
div#menu li.current_page_item>a {
border-bottom: 6px solid #c69c4c;
}

body.portfolio div#menu ul > li.page_item.page-item-8>a {
border-bottom: 6px solid #c69c4c;
}

div#menu li.current_page_ancestor.current_page_parent>a {
border-bottom: 6px solid #c69c4c;
}

body.s-category-uncategorized div#menu li.current_page_parent>a {
border-bottom: 6px solid #c69c4c;
}
/*Keep current page highlighted*/

div#menu ul a:hover {
border-bottom: 6px solid #c69c4c;
}

div#menu ul > li.page_item.page-item-3 {
display:none; /* hide home link */
}

div#menu ul > li.page_item.page-item-8 {
margin-left: 273px;
}

div#nav-above.navigation{
display:none;
}

/******** Header ***********/
div#header {
width:960px;
text-align:left;
margin: 0;
}

div#blog-logo {
height:206px;
width:206px;
margin:0 0 0 40px;

}

div#blog-logo a{
display:block;
height:206px;
}

#page-title {
font-size:24px;
color:#c69c4c;
word-spacing:0.3em;
text-transform:uppercase;
text-align:center;
}

div#blog-intro {
width:174px;
height:80px;
padding: 20px 18px 0 18px;
color:#CCCCCC;
font-family: Arial, Helvetica, sans-serif; 
font-size:12px;
line-height:1.5em;
text-align:left;
word-spacing:0.3em ;
margin:0 0 0 40px;
}

/******** Container & Content ***********/
div#container {
background: transparent;
margin-top:0;
float:left;
margin:0 -340px 0 0;
width:100%;
background:transparent url(images/back-page.gif) repeat-y scroll center top;
}

div#content {
margin:0 340px 0 0;
color:#000;
}

div#content>h2 {
  padding:0 15px;
  margin: 0 0 1.5em;
}

div.hentry { /* matches all posts & pages */
  background: #F1F1EF; /* pale grey background behind all posts */
  padding: 40px;
  margin-top: 18px; /* gap between each post */
}

div.hentry.p1{/* Remove gap on top of page */
margin-top : 0;
padding-top:50px;
}


div.hentry.page { /* for all Pages */
background-image: url(images/sep_arrowwall.jpg);
background-repeat:no-repeat;
background-position:top left;
min-height:600px; /* min height so Pages look consistent when they don't have much data */
margin-top:0;
}

div.hentry.page h2.entry-title { /* Page title */
font-size:36px;
color:#000000;
text-transform: uppercase;
margin-top:0px;
}

div.hentry.post h2.entry-title { /* Post title */
font-size:28px;
color:#000000;
margin-top:0;
}

div.hentry.post h2.entry-title a {
color:#000000;
}

div.hentry.post h2.entry-title a:hover{
color:#CC9933;
}

.entry-meta{
font-size:12px;
color: #999999;
}

.entry-date {
font-size:12px;
color: #999999;
margin-bottom:20px;
margin-top:-20px;
text-decoration: none;
}

/* Nav elements: go to older & newer posts */
div#nav-below {
display:none;
padding: 20px;
background-color:#f1f1ef;
color:#999999;
margin:0;
}

div#nav-below a{
color: #999999;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
}

div#nav-below a:hover{
color: #CC9933;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
}

div#nav-images {
height:150px;
margin:15px 0;
}

div.navigation {
height:1.25em;
}

div.navigation div.nav-next {
float:right;
text-align:right;
}

/*.single div.entry-meta {
display:none;
}*/
/************* Vertical Sidebar: on the right of content *************/
div#primary.sidebar {
padding:25px;
float:right;
overflow:hidden;
margin:0 0 0 30px;
min-height:463px; /* must match total min-height of hentry including padding */
width: 260px;
background-color:#333333;
text-align:left;
font-size:12px;
}

div#primary.sidebar h3.widgettitle{
font-size:18px;
color:#FFFFFF;
text-transform:uppercase;
margin: 0 0 7px;
}

div#primary.sidebar a{
font-size:12px;
border-bottom: 1px   dashed   #000000;
color:#666666;
}

div#primary.sidebar a:hover{
color:#FFFFFF;
border-bottom: 1px   dashed  #FFFFFF;
font-size:12px;
}


/************* Horizontal Sidebar::Above footer *************/
div#secondary {
  clear:both;
  height:310px;
  width:960px;
	background:transparent url(images/footer_bg.jpg) no-repeat scroll center top;
}

div#secondary a {
  color: #999999;
	border-bottom: 1px   dashed   #333333;
	font-size: 12px;
}

div#secondary img {
border: none;
}

div#secondary a:hover {
	color: #FFFFFF;
	border-bottom: 1px   dashed  #FFFFFF;
	font-size: 12px;
}

#secondary.sidebar>ul>li {
  color: #999999;
	font-size: 12px;
  float:left;
  display:block;  /* block display required in order to specify width */
   /*width of each widget should be around 1/4 of total width + padding because design has 4 widgets */
  padding: 25px 15px 0 15px;
}

#secondary.sidebar>ul>li#text-3 { /* override for "contact us" */
   width:280px;
}

#secondary.sidebar>ul>li#text-4 { /* override for "follow us" */
   width:140px;
}

#secondary.sidebar>ul>li#pages-3 { /* override for "Caramel Ink" */
   width:150px;
}

#secondary.sidebar>ul>li#query-posts-5 { /* override for "Latest Blog" */
   width:250px;
}

#secondary form.wpcf7-form ul>li{
padding-bottom: 10px;
}

#secondary form.wpcf7-form ul{
color: #999999;
width:280px;
}

#secondary #contact-us-name input.wpcf7-validates-as-required{
width: 180px;
margin-left: 7px;
}

#secondary #contact-us-email input.wpcf7-validates-as-required{
width: 180px;
margin-left: 9px;
}

#secondary #contact-us-message textarea{
width: 261px;
height: 100px;
}

#secondary #contact-us-submit img {
float:right;
}

#secondary #contact-us-submit input {
   float:right;
   text-align:right;
   margin-right:17px;
}

div#wpcf7-f1-w1-o1 div.wpcf7-response-output {
margin:40px 0 0 0;
}


div#secondary h3 {
padding-bottom:10px;
margin-left:-10px;
color:#DFA969;
}


/************* Footer *************/

div#footer {
	clear:both;
  width:960px;
	height:70px;
	border-top:#333333 1px dashed;
	color:#cccccc;
	font-family: Arial, Helvetica, sans-serif; 
	font-size:12px;
	line-height:1.5em;
	text-align:left;
	word-spacing:0.3em;
	}
	
#footer div#image {
width: 80px;
display:block;
text-align:left;
float:left;
height:60px;
vertical-align: middle;
line-height: 80px;
}
	
#footer div#left {
display:block;
width: 450px;
text-align:left;
float:left;
height:60px;
vertical-align: middle;
line-height: 80px;
}

#footer div#right {
display:block;
text-align:right;
float:right;
height:60px;
vertical-align: middle;
line-height: 80px;
}


#footer img{
padding :20px;
border: none;
}

div#footer a{
color:#CCCCCC;
}

div#footer a:hover{
color:#C69C4C;
}

/************* General *************/
h3 {
color: #666666;
font-size: 18px;
font-weight:normal;
margin:0 0 10px;
}

a {
color: #9a67c2;
font-weight:normal;
text-decoration:none;
}
a:hover, a:active {
color: #c69c4c;
font-weight:normal;
text-decoration:none;
}

div#menu ul li ul {
left:-999em;
position:absolute;
}

div#menu ul li:hover ul {
left:-999em;
}

.entry-title,.entry-meta {
clear:both;
}

.entry-content p {
line-height:1.5 em;
margin:0 0 16px;
text-align:left;
}

form#commentform .form-label {
margin:0;
text-transform:uppercase;
font-weight:bold;
font-size:12px;
}

form#commentform span.required {
color: #FF00FF;
}

form#commentform,form#commentform p {
padding:0;
}

form#commentform p {
display:none;
}

input#author,input#email,input#url,textarea#comment {
padding:7px;
margin-bottom:10px;
width:66%;
}

textarea#comment {
height:13em;
margin:0 0 0.5em;
overflow:auto;
width:66%;
margin-bottom:10px;
}

.alignright,img.alignright{
float:right;
}

.alignleft,img.alignleft{
float:left;
}

.aligncenter,img.aligncenter{
display:block;
text-align:left;
}

div.gallery {
clear:both;
height:180px;
margin:1em 0;
width:100%;
}

p.wp-caption-text{
font-style:italic;
}

div.gallery dl{
margin:1em auto;
overflow:hidden;
text-align:center;
}


div#menu ul li, div.gallery dl, div.navigation div.nav-previous {
float:left;
}
div.sidebar h3 {
font-size:20px;
}

/*Search button in sidebar*/

div.sidebar input#s {
width:160px;
padding:0;
margin:4px 0 0 0;
float:left;
}

#searchform input.button {
background:transparent url(images/send-work-sprite.png) no-repeat scroll 0 0;
border:0 none;
display:inline-block;
float:right;
height:31px;
text-align:right;
width:77px;
background-position: -381px 0;
margin:0;
padding:0;
float:right;
}

#searchform input.button:hover {
background-position: -459px 0;
}

#search.widget {
padding-bottom:30px;
}

/*Search button in sidebar*/

div.sidebar li {
list-style:none;
margin:0 0 30px;
}

div.sidebar li form {
margin:3px 0 0;
padding:0;
}

div.sidebar ul ul {
margin:0;
}

div.sidebar ul ul li {
list-style:none;
margin:0;
}

div.sidebar ul ul ul {
margin:0 0 0 7px;
}

div.sidebar ul ul ul li {
list-style:none;
}
/******** Gallery ************/

div.gallery dl.gallery-columns-1 {
width:100%;
}

div.gallery dl.gallery-columns-2 {
width:49%;
}

div.gallery dl.gallery-columns-3 {
width:33%;
}

div.gallery dl.gallery-columns-4 {
width:24%;
}

div.gallery dl.gallery-columns-5 {
width:19%;
}


input#author,input#email,input#url {
width:66%;
}

div.navigation div {
width:50%;
}

div.gallery *,div.sidebar div,div.sidebar h3,div.sidebar ul {
margin:0;
padding:0;
}

img {
border-style:none;
background:transparent;
border: 7px solid #FFFFFF;
margin-bottom: 10px;
}

/******** Comment box ************/
div.comment-author img{
font-size:12px;
color:#666666;
margin-bottom:0;
border:none;
}

span.comment-meta{
font-size:12px;
color:#666666;
}

span.comment-meta a{
color:#999999;
}

span.comment-meta a:hover{
color:#CC9933;
}

div.comments ol li{
margin: 20px 0 20px 0;
padding:20px;
list-style: none;
color:#000000;
background-color:#E5E3E3;
font-size:12px;

}

div.comments ol {
padding-left:0;
}

#comments {
padding:30px;
background-color:#dddcdc;
width:564px;
}

#comments h3{
font-size:28px;
text-transform:uppercase;
color:#000000;
}

/*Author name in comment*/
div.comment-author vcard .fn {
font-size:14px;
color:#999999;
}

div.form-input{

}

div.form-submit input.button {
display: inline-block;
background: transparent url('images/send-work-sprite.png') no-repeat 0 0;
width: 77px;
height: 31px;
border: 0;
}

div.form-submit input.button:hover {
background-position: -78px 0;
}

/*Contact Form*/
div.wpcf7 {
width: 480px;
float:left;
display:inline-block;
text-align:left;
}
form.wpcf7-form ul{
list-style-image:none;
list-style-type:none;
padding:0;
color:#000000;
}

form.wpcf7-form ul > li {
padding-bottom:10px;
}

#contact-us-submit input {
background:transparent url(images/send-work-sprite.png) no-repeat scroll 0 0;
border:0 none;
display:inline-block;
float:left;
height:31px;
text-align:left;
width:77px;
}

#contact-us-submit input:hover{
background-position: -78px 0;
}

#contact-us-message textarea {
width: 474px;
}

#contact-us-name input.wpcf7-validates-as-required { 
width: 391px;
}

#contact-us-email input.wpcf7-validates-as-required { 
width: 391px;
}

/*About page*/

body.pageid-5 div.entry-content h3 {
color:#000000;
margin-top:30px;
}

/*Blog entry page*/
 ul {
list-style-type:none;
}

#blog-image {
margin:0;
padding:0;
}

body.s-category-blog #comments{
width: 560px;
}

body.blog div.entry-meta{

}

/*Tag archieve page*/
body.archive div.entry-meta{
display:none;
}

body.archive div.entry-date{
display:none;
}

/*Social Media*/
div.sociable {
display:none;
/*padding: 20px 0 20px 0;*/
float:right;
margin:0;
width:450px;
}

div.sociable_tagline {
display:none;
padding: 0 0 10px 0;

}

div.tweetmeme {
margin:16px 0;
float:left;
}

img#wpstats {
height:0;
overflow:hidden;
position:absolute;
width:0;
padding:0;
border: none;
margin:0;
top:0;
}

body.single div.entry-meta {
margin-top:20px;
}

div.comments img{
border:none;
}