body { /*background: #d4d3d2 url(http://www.sarahkaye.com/img/bg.jpg) repeat-x left bottom fixed;*/ background: #e1e0e0; color: #000; margin: 0; /*font: 12px "Trebuchet MS", Verdana, sans-serif;*/ font: 12px 'Open Sans', sans-serif; min-width: 290px; }

* { margin: 0; }
html, body { height: 100%; }
.container { margin: 0 auto -20px; padding: 0 10px; min-height: 100%;  }
.container-inside { padding: 85px 0 0 0; }

a { color: #e94184; }
a:visited { color: #a0197f; }
a:hover { color: #f06; }
a img { border: none; }
header { display: block; }
.hide { display: none; }
.clear { clear: both; }

/* header */
#header { background: #ed145a; min-height: 65px; margin: 0 0 20px 0; overflow: auto; position: fixed; z-index: 5; box-shadow: 0 1px 3px #999; top: 0; left: 0; right: 0; }
#logo { float: left; margin: 0 47px 0 25px; }
#logo img { display: block; }
#menu { margin: 0; padding: 0; }
#menu li { list-style: none; float: left; }
#menu a:hover { background: #f45d90; }
#menu a { display: block; text-decoration: none; padding: 6px 10px 0 10px; line-height: 59px; color: #FFF; text-transform: uppercase; font-family: 'Open Sans', sans-serif; }
#header.small { min-height: 34px; overflow: hidden; }
#menu a { font-size: 16px; }

/* backgrounds */
#backgrounds { position: fixed; top: 0; left: -50%; width: 200%; height: 100%; z-index: -1; }
#backgrounds img { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: 0 auto; min-width: 50%; min-height: 100%; display: none; z-index: 0; }
#backgrounds .over_logo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 3; background: url(http://www.sarahkaye.com/img/slideshow_overlay.png) no-repeat center center; opacity: 0; }

/* overlay */
#categories { background: rgba(255,255,255,0.7); padding: 20px; float: left; margin: 10px 5px; width: 280px; position: relative; z-index: 3; text-transform: uppercase; font: 11px 'Open Sans', sans-serif; overflow: auto; box-shadow: 0 1px 3px #999;}
#categories .column { width: 130px; float: left; margin: 0 0 0 20px; }
#categories .doublecolumn, #categories .archives { width: 100%; }
#categories .column:first-child { margin: 0; }
#categories h2 { margin: 0; padding: 0; font-size: 14px; }
#categories h3 { font-size: 13px; line-height: 20px; font-weight: normal; margin: 0; }
#categories ul { padding: 0; margin: 15px 0 20px 0; }
#categories .archives ul { float: left; width: 130px; margin-right: 10px; }
#categories li { list-style: none; }
#categories .doublecolumn li { margin: 7px 0; text-transform: none; }
/*#categories ul ul { margin: 0 0 0 15px; }*/
#categories ul ul { margin: 0; }
#categories ul.collapsed ul { display: none; }
#categories ul.collapsed li.expanded ul { display: block; }
#categories a { display: block; text-decoration: none; color: #000; text-shadow: 0 1px 1px #DDD; line-height: 20px; background: none; padding: 0 5px; -webkit-transition: background-color .2s ease-in-out; -moz-transition: background-color .2s ease-in-out; -o-transition: background-color .2s ease-in-out; -ms-transition: background-color .2s ease-in-out; }
#categories a:hover { background: rgba(255,255,255,0.7); }
#categories a.all { color: #ed145a; font-size: 11px; line-height: 16px; padding: 4px 5px; font-weight: bold; clear: both; }
#categories a.active { background: #ed145a; color: #FFF; text-shadow: none; }
#categories ul ul a { color: #777; font-size: 10px; line-height: 20px; }
#categories form { display: none; float: left; }
#categories select { width: 140px; }
#categories label div  { width: 80px; float: left; text-align: right; line-height: 24px; margin: 0 5px 0 0; text-transform: none; }

/* social buttons */
#social { float: right; margin: 0 25px 0 5px; }
#social a { float: left; margin: 20px 0 5px 10px; width: 30px; height: 30px; background: #FFF url(http://www.sarahkaye.com/img/social_buttons.png); text-indent: -9999px; }
#social a.twitter { background-position: -30px 0; }
#social a.pintrest { background-position: -60px 0; }
#social a.phone { height: 59px; padding: 6px 0 0 0; width: auto; color: #FFF; margin: 0; background: transparent; text-indent: 0; font-size: 18px; line-height: 59px; text-decoration: none; margin: 0 5px; }

/* image thumbnails */
#images { margin-left: 355px; position: relative; z-index: 3; }
#images a { float: left; height: 138px; background: #000; margin: 10px 27px 1.5% 0; overflow: hidden; box-shadow: 0 1px 3px #999; }
.nojs #images { margin-right: 330px; }
.pagination { clear: right; margin-left: 355px; position: relative; z-index: 3; }
.pagination a { float: left; background: url(http://www.sarahkaye.com/img/arrows.png) no-repeat; width: 33px; height: 38px; margin: 20px 10px; text-indent: -9999px; color: transparent; }
.pagination .next_page { background-position: -33px 0; float: right; }

/* news box */
#news { background: #FFF; padding: 10px; position: absolute; right: 0; width: 290px; margin: 10px 35px 10px 10px; text-transform: uppercase; overflow: auto; box-shadow: 0 1px 3px #999; }
#news h1 { font-size: 18px; }
#news .date { color: #ed145a; font-weight: bold; }
#news .read_more { display: block; float: left; text-decoration: none; background: #ed145a; color: #FFF; margin: 2em 0 0 0; padding: 0.5em 1em; }

/* credits */
#credits { clear: both; color: #888; font-size: 10px; /*padding: 20px 15px ;*/ text-transform: lowercase; text-shadow: 0 1px 1px #FFF; height: 20px; }
#credits a { text-decoration: none; color: #666; font-weight: bold; }
#credits span { margin-left: 15px; }

/* page with static pic or vid */
#pic { background: #FFF; position: fixed; left: 0; right: 0; top: 65px; bottom: 0; z-index: 4; }
#pic div { margin: auto; height: 100%; }
#pic img { max-width: 90%; max-height: 90%; box-shadow: 0 2px 6px #999; display: block; margin: 20px auto; }

/* content on static pages */
#content { padding: 20px; background: #FFF; background: rgba(255,255,255,0.8); box-shadow: 0 2px 6px #999; max-width: 600px; }
#content p { line-height: 1.6em; }
#content h1:first-child { margin-top: 0; }
#content h1 { font-size: 14px; text-transform: uppercase; }

/* page with authors when user selected just category */
#authors { margin-left: 355px; position: relative; z-index: 3; }
#authors .author { float: left; /*margin: 10px 27px 1.5% 0; margin: 10px 70px 4% 0; */ margin: 10px 19px 40px 0; text-align: center; width: 100px; height: 125px; }
#authors img { display: table; }
#authors a { text-decoration: none; font-size: 11px; color: #E94184; text-transform: uppercase; }
#authors span { display: block; padding: .5em 0; }
#authors .author div { box-shadow: 0 1px 3px #999; height: 138px; overflow: hidden; }

/* lightbox */
.lightbox { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 9999; background: #e1e0e0; display: none; opacity: 0; -webkit-transform: translate3d(0,0,0); -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }
.lightbox img { -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate(0, 0); display: block; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; } /* turn on hardware acceleration and fix some mobile safari issues  */
.lightbox .content { position: relative; padding: 0 1000px; background: #F5F5F5; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }
.lightbox.video .content { padding: 0; position: absolute; left: 50%; width: 640px; max-width: 640px; margin: 0 0 0 -320px; background: #F5F5F5 url(http://www.sarahkaye.com/img/ajax-loader.gif) no-repeat center center; }
.lightbox .thumbnails { position: absolute; bottom: 0; margin: auto; width: 10000px; height: 69px; overflow: hidden; }
.lightbox .thumbnails a { height: 69px; background: #000; margin: 0 2px; float: left; }
.lightbox .thumbnails a:first-child { margin: 0 2px 0 4px; }
.lightbox .thumbnails a:last-child { margin: 0 4px 0 2px; }
.lightbox .thumbnails img { display: block; height: 69px; width: auto; }
.lightbox .thumbnails .play-video {  width:auto; height: 22px; position: absolute; background: url('../img/play.png') no-repeat center; margin-top: 24px; background-size:22px 22px; z-index:1}
.lightbox .thumbnails .unit-1 img { width: 50px; }
.lightbox .thumbnails .unit-2 img { width: 114px; }
.lightbox .top { height: 65px; /*overflow: hidden;*/ text-overflow: ellipsis; font: 13px 'Open Sans', sans-serif; background: #EE145A;  }
/*.lightbox .top .logo { width: 150px; height: 100%; float: left; background: #ee145a  url(http://www.sarahkaye.com/img/sarah-kaye-logo.png) no-repeat 2px -11px; }*/
.lightbox .top .logo { width: 208px; height: 65px; float: left; background: #ee145a  url(http://www.sarahkaye.com/img/sarah-kaye-logo.png) no-repeat 35px 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
.lightbox .top .logo.ready { height: 50px; background-position: 35px 0px; }
.lightbox .top .home { width: 100px; padding: 0 5px 0 30px; height: 100%; float: right; background: #a8a8a8 url(http://www.sarahkaye.com/img/home.png) no-repeat; text-decoration: none; color: #F5F5F5; text-align: center; /*font: 12px/25px Muli, sans-serif;*/ font: 12px/25px 'Open Sans', sans-serif; letter-spacing: 1px; display: none; }
.lightbox .categories { margin: auto; min-width: 200px; position: absolute; top: 8px; left: 165px; right: 165px; height: 52px; line-height: 25px; overflow: hidden; text-overflow: ellipsis; right: 0; left: 224px; text-transform: uppercase; }
 

.lightbox .categories:hover { overflow: visible; }


.lightbox .top .author, .lightbox .top .category { float: left; margin: 0 5px 100px 0; }
.lightbox .top .author { font-weight: bold; color: #fff; text-transform: uppercase; }
.lightbox .categories li { list-style: none; float: left; padding: 0; margin: 0; /*background: #F5F5F5;*/ }
/*.lightbox .categories li:hover, .lightbox .categories .expanded { background: #FCF7F7; }*/
.lightbox .categories .expanded { background: #FCF7F7; color: #ED1459; }
.lightbox .categories .expanded a { color: #ED1459; }
.lightbox .categories .expanded ul li a, .lightbox .categories .expanded ul li a:active { color: #fff; background: #ed1459; }

.lightbox .categories ul { padding: 0; margin: 0; }
.lightbox .categories ul ul { display: none; position: absolute; top: 25px; background: #FCF7F7; -webkit-transform: scale3d(1,1,1); } /* transform added to fix hover bug, solution found here: http://stackoverflow.com/questions/11002195/chrome-does-not-redraw-div-after-it-is-hidden */
.lightbox .categories ul ul li { display: block; line-height: 25px; font-size: 0.9em; /*background: transparent;*/ background: #ed1459; }
.lightbox .categories li:hover ul, .lightbox .categories ul:hover { display: block; background: none; }
.lightbox .categories a { float: left; text-decoration: none; color: #fff; padding: 0 10px; margin: 0 2px; }
.lightbox .categories a.active { background: #fff; color: #ed1459; margin: 0; }
.lightbox .categories ul ul a.active:hover { color: #FFF;  }
.loading-indicator { position: absolute; background: #F5F5F5 url(http://www.sarahkaye.com/img/ajax-loader.gif) no-repeat center center; cursor: pointer; z-index: 4; opacity: 0.7; }
.lightbox .next_img, .lightbox .prev_img { cursor: pointer; display: block; }
.lightbox .placeholder-right { position: absolute; width: 25px; background: url(http://www.sarahkaye.com/img/placeholder.jpg) no-repeat -25px 50%; background-size: 50px 100%; }
.lightbox .placeholder-left { position: absolute; width: 25px; background: url(http://www.sarahkaye.com/img/placeholder.jpg) no-repeat 0 50%; background-size: 50px 100%; }
.lightbox .next_arrow, .lightbox .prev_arrow, .lightbox .next_page, .lightbox .prev_page { display: block; width: 100px; height: 138px; margin: -104px 0 0 0; position: absolute; top: 50%; background: url(http://www.sarahkaye.com/img/arrows2.png) no-repeat; cursor: pointer; opacity: 0.8; text-indent: -9999px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; -ms-transition: all .2s ease-in-out; }
.lightbox .next_arrow:hover, .lightbox .prev_arrow:hover, .lightbox .next_page:hover, .lightbox .prev_page:hover { opacity: 1; }
.lightbox .next_arrow.hidden, .lightbox .prev_arrow.hidden, .lightbox .next_page.hidden, .lightbox .prev_page.hidden { opacity: 0; }
.lightbox .next_arrow { right: 1.5%; }
.lightbox .prev_arrow { left: 1.5%; background-position: -100px 0; }
.lightbox .next_page { right: 1.5%; background-position: 0 -138px; }
.lightbox .prev_page { left: 1.5%; background-position: -100px -138px; }

/* contact page */
#content.contact { overflow: auto; }
#content.contact .contact_details { width: 40%; float: left; font-size: 14px; line-height: 18px; margin: 2% 0; }
#content.contact .contact_form { width: 45%; min-width: 220px; float: right; margin: 2% 0; }
.contact_form .error { color: #D00; background: #FFF; padding: .5em; margin: 0 -0.5em 1em -0.5em; }
.contact_form .done { color: #090; background: #FFF; padding: .5em; }
.contact_form .req { color: #555; margin: 0 0 .5em 33%; }
.contact_form .req span, .contact_form .ast { color: #D00; }
.contact_form label { float: left; width: 30%; text-align: right; clear: both; line-height: 24px; }
.contact_form .text { width: 60%; max-width: 60%; float: left; font: 12px/16px Verdana, sans-serif; padding: 2px 3px; border: 1px solid #AAA; margin: 1px 0 1px 3%; box-shadow: inset 0 1px 3px #EEE; }
.contact_form input.text { height: 16px; }
.contact_form .ast { float: right; width: 4%; line-height: 24px; text-align: right; }
.contact_form .submit { padding: 3px 6px; background: #ed145a; color: #FFF; border: none; clear: both; margin: 2px 0 2px 33%; box-shadow: 0 1px 3px #999; }
.contact_form .submit:focus, .contact_form .submit:hover { background: #F37; }
.contact_form #cont_mlist{float: right;width: initial;margin-top: 3px;}
.contact_form #mailbox_label{float: left;width: 96%;}
.contact_form #mailbox_label span{text-align: right;}

/* WORDPRESS stuff */
#content.blog { float: left; position: relative; top: 10px; margin-left: 25px; }
#content.blog.withmargin { margin-left: 355px; float: none; }
#content.blog h1, #content.blog h2, #content.blog h3 { clear: both; }
#content.blog h2 { font: 18px 'Open Sans', sans-serif; margin-top: 0; background: #FFF; padding: 6px 15px 6px 20px; position: relative; margin: 0 0 15px -20px; float: left; max-width: 465px; }
#content.blog h2 a { color: #ed145a; text-decoration: none; }
#content.blog h3 { font: 16px 'Open Sans', sans-serif; background: #FFF; padding: 6px 15px 6px 20px; position: relative; margin: 15px 0 15px -20px; float: left; }
#content.blog .date { float: right; width: 110px; margin: 0 -20px 10px 0; background: #FFF; color: #c73262; line-height: 22px; padding: 6px 10px 6px 10px; }
#content.blog p { line-height: 2em; }
#content.blog .post { margin: 0 0 40px 0; clear: both; }
#miniSearch { display: none; }
#content.blog .pagination { margin: 20px -20px; overflow: auto; }
#content.blog .pagination a { width: auto; height: 38px; line-height: 33px; background: #F3F3F3; text-indent: 0; color: #c73262; text-decoration: none; margin: 0; padding: 5px 10px 1px 10px; transition: all .1s ease-out 0; -webkit-transition: all .1s ease-out 0; -moz-transition: all .1s ease-out 0; -o-transition: all .1s ease-out 0; -ms-transition: all .1s ease-out 0; }
#content.blog .pagination a:hover { background: #FFF; }
#content.blog .prev_page div { float: left; width: 33px; height: 38px; background: url(http://www.sarahkaye.com/img/arrows.png) no-repeat; margin: 0 5px 0 0; }
#content.blog .next_page div { float: right; width: 33px; height: 38px; background: url(http://www.sarahkaye.com/img/arrows.png) no-repeat -33px 0; margin: 0 0 0 5px; }
#images.blog { margin: 20px -10px 20px -10px !important; overflow:hidden;}
#images.blog a { height: 135px; width: auto; margin: 10px; }

/* wordpress comments */
#content.blog .commentlist { clear: both; padding: 0; }
#content.blog .commentlist li { list-style: none; }
#content.blog .comment { padding-left: 60px; margin: 2em 0; }
#content.blog .commentMeta { margin: 0 10px 0 0; font-size: 11px; color: #444; border-bottom: 1px solid #DDD; display: inline-block; padding: 0 0 2px 0; }
#content.blog .commentDate { display: inline-block; margin: 0 0 0 20px; }
#content.blog .commentContent p { line-height: 1.6em; }
#content.blog .avatar { float: left; border: 1px solid #666; margin: 0 0 0 -60px; }

/* wordpress comment form */
#respond, #respond p { clear: both; }
#respond label { width: 100px; float: left; text-align: right; margin: 0 10px 0 0; font-size: 11px; line-height: 14px; padding: 3px 0 0 0; }
#respond div { clear: both; margin: 8px 0; overflow: auto; }
#respond input, #respond textarea { min-width: 200px; height: 16px; padding: 1px 2px; border: 1px solid #CCC; margin: 1px 0; }
#respond textarea { height: 200px; }
#respond #submit { margin: 0 0 0 110px; background: #ed145a; color: #FFF; padding: 4px 10px; border: none; text-transform: uppercase; font-size: 11px; height: 22px; }

/* wordpress archive */
#content.archives ul { padding: 0; column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; }
#content.archives li { list-style: none; margin: 5px 0; }
#content.archives a { text-decoration: none; }


/* responsive rules */
@media screen and (min-width: 1260px) {
	#menu a { padding-left: 16px; padding-right: 16px; }
}
@media screen and (min-width: 1340px) {
	#menu a { padding-left: 24px; padding-right: 24px; }
}
@media screen and (max-width: 1180px) {
	#menu a { font-size: 12px; }	
}
@media screen and (max-width: 1120px) {
	#social { margin: 0; }
	#news { margin: 10px; }
	#social a { margin-right: 0; }
	#logo { margin-right: -100px; }
	#menu a { font-size: 12px; }
}
@media screen and (max-width: 1010px) {
	#header { position: static !important; }
	/*
	
	11/09/2012 edit - to fix the navigation on lower resolutions (<960)
	#categories { position: absolute !important; top: 85px !important; }
	
	*/
	body { padding: 0; }
	#content.blog { margin-left: 355px; }
	.container-inside { padding: 0 0 0 0; }
	#menu a { font-size: 12px; }
}
@media screen and (max-width: 960px) {
	#menu a, #social .phone { font-size: 12px; }
}
@media screen and (max-width: 940px) {
	#menu { position: static !important; }
	#menu a { font-size: 12px; }
	#images, #content.blog { clear: both; margin: auto !important; float: none !important; }
	.pagination { clear: both; margin: 20px; }
	#news { margin: 5px 5px 10px 0; }
	
	/*
	11/09/2012 edit - to fix the navigation on lower resolutions (<960)
	#categories { top: 63px !important; left: 5px; z-index: 5; height: 38px; line-height: 38px; padding: 6px 15px; margin: 0; width: 450px; background: #FFF; } */
	#categories { position: static !important; width: auto; float: none; clear: both; margin: -20px -10px 0 -10px; opacity: 1 !important; }
	
	#categories label div { line-height: 38px; }
	/*
	#categories form { display: block; }
	#categories .column { display: none; }
	*/
	#main { padding: 30px 10px; }
	#social { position: absolute; top: 63px; z-index: 5; right: 5px; }
	#social a { box-shadow: 0 1px 3px #999; background-color: transparent; margin: 0 5px; }
	#social a.phone { background: #ed145a; height: 30px; padding: 0 6px; line-height: 30px; }
	.container-inside { padding: 0 0 0 0; }
}
@media screen and (max-width: 700px) {
	#header .container { padding: 0; }
	#menu { clear: left; }
	#news { margin: 10px auto; float: none; }
	#categories { position: static !important; width: auto; float: none; clear: both; margin: -20px -10px 0 -10px; opacity: 1 !important; }
	#social { top: 5px; right: 0; margin: 0; }
	#social a { box-shadow: none; background-color: #FFF; }
	#menu a { padding: 0 10px; line-height: 30px; }
	#logo { margin: 0 0 0 10px; }
	#main { padding: 0 10px; }
}
@media screen and (max-width: 640px) {
	.lightbox.video .content { left: 0; margin: 0; }
}
@media screen and (max-width: 650px) {
	#main, .container { padding: 0; }
	#content.blog { position: static; top: 0; width: auto; max-width: none; }
	#content.blog img { max-width: 95%; }
	#content.blog .date { float: left; clear: left; width: auto; margin-left: -20px; padding: 3px 5px 3px 20px; }
	#respond input, #respond textarea { width: 150px; min-width: 0; }
	#header { margin: 0; }
	#categories, #news { width: auto; float: none; margin: 0 !important; padding: 10px; position: static; clear: both; }
	#categories, #categories label div { line-height: 24px; height: auto; }
	#images { clear: left; margin: 0; }
	.nojs #images { min-width: 227px; margin: 0 10px 0 -17px !important; }
	#backgrounds { display: none; }
	.lightbox .categories { font-size: 0.9em; }
	.lightbox .categories a { padding: 0 3px; }
	
}
@media screen and (max-width: 455px) {
	#social { width: auto; padding-left: 170px; left: 0; }
	#social a { margin: 0 5px 0 0; }
}
@media screen and (max-width: 340px) {
	#categories { margin: 10px -10px; }
}

#benchmark { background: #FFF; color: #000; position: fixed; top: 100px; right: 0; padding: 10px; z-index: 1000; }
.au { color: #fff; padding: 0 5px 0 12px !important; }
#categories .column .au { display: none; }


.drop-top  select { overflow: hidden; background: transparent; border: none; -webkit-appearance: none; padding: 4px 24px 4px 4px; color: #ed1459; text-transform: uppercase; -moz-appearance: none; appearance: none; width: 121%; text-transform: uppercase; }
.drop-top { width: 415px; overflow: hidden;  padding: 0; margin: 10px auto 0 auto; }
.drop-top select option { color: #ed1459; text-transform: uppercase; }
.drop-top h1 { float: left; color: #fff; font-size: 14px; font-weight: normal; margin: 2px 7px 0 0; }
.drop-top .drop-content { background: #fff url(../img/drop-down.jpg) no-repeat right 7px; float: left; border: 1px solid #f6a2bc; padding: 0 5px 0 0; }
.lightbox .categories .all { display: none; }
.lightbox .back { position: absolute; right: 35px; top: 15px; border: none; background: none; color: #fff; cursor: pointer; }

.container-inside #images .video .play-video { width: 100px; height: 44px; position: absolute; background: url('../img/play.png') no-repeat center; margin-top: 47px; }

.about-page p { margin-bottom: 15px; }

.right-c .bio { margin-top: 28px; color: #777 !important; cursor: pointer; line-height: 20px; text-shadow: 0 1px 1px #DDD; padding: 0 5px; }
.right-c .bio:hover { background: rgba(255, 255, 255, 0.7); }
.bio-content { position: relative; margin: 10px 5px 10px 355px; width: 510px; }
.bio-content h1 { margin-bottom: 10px; }
.bio-content p { margin-bottom: 20px; }
.cat { background: #ED145A; font-size: 11px; line-height: 16px; padding: 4px 5px; font-weight: bold; clear: both; color: #fff; cursor: pointer; }

.nocomments	{display:none;}