////////////////////////////////////////////////////////////////////
//
// Touchfolio Modern Helvetica Skin. Inspired by MoreCSS =)
//
// 	1. Fonts and text links
// 	2. Sidebar menu
// 	3. Background colors
// 	4. Widgets
// 	5. Logo size and position
// 	6. Footer size, gallery padding and other stuff
// 
////////////////////////////////////////////////////////////////////




////////////////////////////////////////////
//
// 1. Fonts & links
//
////////////////////////////////////////////

@body-font:              "europa",sans-serif;
@body-font-line-height:  1.6;

@text-color:             #3b3a37; // main body text color
@secondary-text-color:   #929699;
@sidebar-text-color:     @text-color;

@link-color:             #000;
@link-hover-color:       #C00;

@title-color:            #333;
@title-font:             inherit;
@title-weight:           bold;

@font-smallest:          .75em;
@font-small:             .875em;
@font-small-line-height: 1.6em;
@font-small-em-size:     1 / @font-small; // for alignment

@selection-bg-color:     #C00;
@selection-text-color:   #FFF;




////////////////////////////////////////////
//
// 2. Menu
//
////////////////////////////////////////////

@menu-item-color:           #333;
@menu-item-hover-color:     #888;
@selected-menu-item-color:  #333;

@menu-font-weight:          normal;
@menu-font-size:            13px;
@menu-line-height:          20px;

@projects-menu-font-size:   13px;
@projects-menu-line-height: 20px;
@projects-menu-font-color:  #999;

@menus-margin: 10px; // Margin between menu / secondary menu / site description




////////////////////////////////////////////
//
// 3. Background colors
//
////////////////////////////////////////////

@content-background: #f8f8f0;
@sidebar-background: #f8f8f0;





////////////////////////////////////////////
//
// 4. Widgets
//
////////////////////////////////////////////

@widget-title-font-size:     13px;
@widget-title-line-height:   20px;
@widget-body-font-size:      13px;
@widget-body-line-height:    20px;




////////////////////////////////////////////
//
// 5. Logo size and position
//
////////////////////////////////////////////

// In sidebar
@default-logo-margin: 2.9em 0 9px 40px;
@default-logo-width:  auto;

// Gallery page on small screens (collapsed)
//@collapsed-gallery-logo-padding:       10px 0 0 0;
//0px logo-width turns the logo off
@collapsed-gallery-logo-width:         0px;
@collapsed-gallery-menu-area-padding:  0 0px 0 0px;
@collapsed-gallery-menu-button-float:  left;
@collapsed-gallery-menu-button-margin: 0 0px 0 0;
//@collapsed-gallery-menu-area-vertical: 3em;


// Regular page on small screens 
@collapsed-layout-logo-padding:       0px 0px 0px 0px;

//0px turns the logo off
@collapsed-layout-logo-width:         0px;
@collapsed-layout-menu-button-margin: 0px 0px 0px 0px;

@site-description-font-size: 12px; // text under logo


////////////////////////////////////////////
//
// 6. Footer and other
//
////////////////////////////////////////////

@footer-copy-text-color:        @secondary-text-color;
@footer-max-height:             4.4em; // max height of footer when site width is more then 960px
@sidebar-width-full:            13.5em;
@content-max-width:             auto;
@content-large-image-max-width: @content-max-width * 1.2;


@gallery-padding: 0px; // space between gallery and browser edges
@preloader-url:   url(img/preloader.gif);
@sprite-url:      url(img/touchfolio-sprite-default.png);


// Some overriding styles


// Don't remove this line, it adds all styles
@import "css-less/general.less";


.logo {
position: fixed; top: 0;
margin-top: 3em !important;
margin-bottom: 2em !important;
margin-left: 2.7em !important;
}

// Styles the sidebar menu
.primary-menu {
font-weight:normal;
position: fixed; top: 10em;
background-color:#f8f8f0;
letter-spacing: 0.05em;
line-height: 140%;
padding-top: 20px;
overflow: hidden;
border-top-style: dotted;
border-top-width: 1px;
border-top-color: #ff0000;
}


// Styles menu items
.menu a {
color:#5d6864;
font-size: 12px;
margin-left: 6px;
}

li.current-menu-item > a {
color:#ff0000 !important;
font-weight:normal !important;
}


// Turn off standard WP page template page headings
#post-253 > header, #post-264 > header, #post-268 > header, #post-152 > header, #post-154 > header, #post-347 > header, #post-352 > header, #post-388 > header {
display:none !important;
}

// Turn off various page elements
.footer-copy, .album-info-block, .typekit-badge, #page > header > div.menus-container > span:nth-child(1), .menu-sep, a.pin-it-btn, a.facebook-share-btn, .slider-album-indicator .album-info-text  {
display:none !important;
}


// Removes padding from main site content
#primary.site-content {
padding: 0px;
}


// Customise sidebar menu fade rollovers and colour
.menu a {
 -o-transition:color .2s ease-out, background 1s ease-in;
  -ms-transition:color .2s ease-out, background 1s ease-in;
  -moz-transition:color .2s ease-out, background 1s ease-in;
  -webkit-transition:color .2s ease-out, background 1s ease-in;
  /* ...and now override with proper CSS property */
  transition:color 0.3s ease-out, background 1.5s ease-in;
text-decoration: none !important;
border: none !important;
}
.menu a:hover {
color: #ff0000 !important;
}


//turn off arrows on intro page
#main-slider > div.slider-controls > div.arrow-left.disabled-arrow {
display:none;
}
#main-slider > div.slider-controls > div.arrow-right.disabled-arrow {
display:none;
}


// Royal slider styling
// Style project intro panels
#about-header {
font-size: 20px;
font-weight; bold;
color: #ff0000;
padding: 0.75em 5% 0.75em 5%;
letter-spacing:1.5px;
line-height: 1.1;
}

#about {
font-size: 14px;
font-weight; normal;
color: #5d6864;
padding: 0em 4% 1.5em 5%;
letter-spacing:1px;
padding-top: 16px;
line-height: 1.4;
border-top-style: dotted;
border-top-width: 1px;
border-top-color: #ff0000;
}

.rsABlock {
background-color:#f8f8f0 !important;
//border-radius: 8px 8px 8px 8px !important;
letter-spacing:1.5px;
//box-shadow: 3px 3px 3px 0px #888888;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
min-width: 260px;
}

.rsContent {
background-color:#eeefe9 !important;
} 

// Slide caption styling
.rsGCaption {
text-transform:uppercase;
opacity: 1;
color: #ff0000 !important;
background-color:#f8f8f0 !important;
min-width: 130px;
height: 28px;
position:fixed; top: 0px; right: 50px; left: auto !important;
text-align: center !important;
padding-top: 8px !important;
//border-radius: 0px 0px 8px 8px !important;
letter-spacing:1.5px;
//box-shadow: 3px 3px 3px 0px #888888;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.2);
}

// Turn off slide captions and panel overlay below 1000px
@media only screen and (max-width: 1000px) {
	.rsGCaption {
	display: none !important;
	}
	.rsABlock {
	display: none !important;
	}
}

// Turn off sidebar below 850px
@media only screen and (max-width: 850px) {
	#new-royalslider-5, #new-royalslider-6, #new-royalslider-7, #new-royalslider-8,
#new-royalslider-9 {
	left: 0 !important;
	}
}

// Position replacement arrow PNG
.rsUni.rsHor .rsArrowLeft .rsArrowIcn { background-position: -112px -96px !important; }
.rsUni.rsHor .rsArrowRight .rsArrowIcn { background-position: -148px -96px !important; }



// Page template - Collapsed layout 
// Turn off full-width menu header - needs to remain with 0px height
.collapsed-layout .main-header {
height: 0px;
position: absolute;
z-index: 100000 !important;
top: 0px;
}

// Position drop-down menu
.collapsed-layout .primary-menu {
background-color:#f8f8f0 !important;
position: fixed; top: 32px;
padding-top: 16px;
padding-bottom: 26px;
padding-left: -4px;
z-index: 39000 !important;
}

// Turn off logo
.collapsed-layout .logo {
display: none;
}

// Style and position menu button
.collapsed-layout .main-header .menu-button {
  position: absolute;
  top: 0px;
  margin:0px 0px 0px -10px;
  padding: 6px 9px 8px 9px;
  background-color: #eeeee6 !important;
  float:left !important;
}

// Create full topbar on menu button click
.collapsed-layout .main-header .menu-close-button {
border-right-style: solid;
border-right-width: 97px;
border-right-color: #f8f8f0;
}




// Gallery template - Collapsed layout
.collapsed-gallery-page .primary-menu  {
position: fixed; top: 32px;
padding-top: 16px;
padding-bottom: 20px;
padding-left: 16px;
padding-right: 0px;
z-index: 200002 !important;
}

// Style and position menu button
.collapsed-gallery-page .main-header .menu-button {
  background-color: #eeeee6 !important;
  float:left !important;
}

//Use Close Menu button border to create container for menu
.collapsed-gallery-page .main-header .menu-close-button {
border-right-style: solid;
border-right-width: 97px;
border-right-color: #f8f8f0;
border-bottom-style: solid;
border-bottom-width: 171px;
border-bottom-color: #f8f8f0;
}



// make "parent" containers 100% width and height
html, body {
      width: 100%;
      height: 100%;
      overflow:hidden; // to avoid scrollbars
}

// stretch slider to 100% width and height
#new-royalslider-5, #new-royalslider-6, #new-royalslider-7, #new-royalslider-8,
#new-royalslider-9 {
    position: absolute;
    left: @sidebar-width-full;
    top: 0;
    right: 0;
    bottom: 0;
    height: auto !important; // optionally add !important for WP version
    width: auto !important;
}

// turn on scrollbars for About page
#post-152 {
overflow:scroll !important;
}