/**
 * Norbert @ Laposa Ltd, 2014/06/01
 *
 */

/**
 * Responsive stylesheet
 * Norbert @ Laposa Ltd, 2012/12/20
 *
 * To use change global extra_head in /backoffice/advanced/configuration
 * from: <meta name="viewport" content="width=1024" />
 * to: <meta name="viewport" content="width=device-width" />
 */
 
/**
 * draw border inside elemements, TODO: include to global CSS
 */
 
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

/**
 * 1) Always force a scrollbar in non-IE 
 * 2) Remove iOS text size adjust without disabling user zoom: www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/ 
 */
 
html { overflow-y: scroll; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }

/**
 * make container full size
 */
 
#pageWrapper { padding: 0; }
#container { max-width: 100%; padding: 0; }

/**
 * fluid images
 */
 
img {max-width: 100%; height: auto; width: auto; /* ie8 fix*/}

/**
 * fluid video to be used in responsive page layout
 * thanks Jonathan Suh http://www.jonsuh.com/blog/tutorials/responsive-youtube-vimeo-embed-and-html5-video-with-css/
 *
 */
 
div.fluid-video {height: 0; padding-top: 25px; padding-bottom: 67.5%; margin-bottom: 10px; position: relative; overflow: hidden;}
 
div.fluid-video.widescreen {padding-bottom: 57.25%;}
 
div.fluid-video.vimeo {padding-top: 0;}

div.fluid-video embed,
div.fluid-video iframe,
div.fluid-video object,
div.fluid-video video {top: 0; left: 0; width: 100%; height: 100%; position: absolute;}

/**
 * Screen size rules
 */

/* styles for narrow desktop browsers and iPad landscape */
@media all and (max-width: 1024px) {
	#contentWrapper { margin: 0; }
}


/*make sure primaryNavigation is visibile when interaction with revealNavigationButton */
@media all and (min-width: 768px) {
	#primaryNavigation {display: block!important;}
	#contentBottom div.threeColumnLayout div.layoutColumnOne.ofThree {width: 25%;}
	#contentBottom div.threeColumnLayout div.layoutColumnTwo.ofThree {width: 50%;}
	#contentBottom div.threeColumnLayout div.layoutColumnThree.ofThree {width: 25%;}
}

@media all and (max-width: 786px) {
	div.fourColumnLayout div.layoutColumnOne.ofFour,
    div.fourColumnLayout div.layoutColumnTwo.ofFour,
    div.fourColumnLayout div.layoutColumnThree.ofFour,
    div.fourColumnLayout div.layoutColumnFour.ofFour {width: 50%;}
    div.fourColumnLayout div.layoutColumnThree.ofFour {clear: both;}
}

/* styles for iPhone/Android landscape (and really narrow browser windows) */
@media all and (max-width: 480px) {
	#search {float: none;}
	#search form {float: none; margin-left: 10px;}
	div.twoColumnPage div.columnTwo {margin-top: 0!important;}
    #onxshop_cms_content { width: 100%; overflow: hidden; }
    #logo {margin-bottom: 1em;}
    #globalNavigation {clear: both; float: none;}
    #globalNavigation li {float: none;}
    #primaryNavigation li {float: none; margin-right: 0;}
    /*2cols forms (can be set on whole form or particular fieldset*/
	form.twoColumns label,
	fieldset.twoColumns label {padding-right: 0;}
	form.twoColumns span.label,
	fieldset.twoColumns span.label {width: auto; float: none; text-align: left;}
	form.twoColumns span.field,
	fieldset.twoColumns span.field {width: 100%;}
	div.twoColumnPage div.columnOne, 
    div.twoColumnPage div.columnTwo,
    div.twoColumnLayout div.layoutColumnOne.ofTwo,
    div.twoColumnLayout div.layoutColumnTwo.ofTwo {width: auto!important; float: none!important;}
    div.twoColumnPage div.columnWrapper {margin: 0!important;}
    div.threeColumnLayout div.layoutColumnOne.ofThree,
    div.threeColumnLayout div.layoutColumnTwo.ofThree,
    div.threeColumnLayout div.layoutColumnThree.ofThree {width: auto; float: none;}
    div.fiveColumnLayout div.layoutColumnOne.ofFive,
    div.fiveColumnLayout div.layoutColumnTwo.ofFive,
    div.fiveColumnLayout div.layoutColumnThree.ofFive,
    div.fiveColumnLayout div.layoutColumnFour.ofFive,
    div.fiveColumnLayout div.layoutColumnFive.ofFive {width: auto; float: none;}
    div.sixColumnLayout div.layoutColumnOne.ofSix,
    div.sixColumnLayout div.layoutColumnTwo.ofSix,
    div.sixColumnLayout div.layoutColumnThree.ofSix,
    div.sixColumnLayout div.layoutColumnFour.ofSix,
    div.sixColumnLayout div.layoutColumnFive.ofSix,
    div.sixColumnLayout div.layoutColumnSix.ofSix {width: auto; float: none;}
    div.layoutColumnWrapper {margin: 0!important;}
}

@media all and (max-width: 320px) {
	div.fourColumnLayout div.layoutColumnOne.ofFour,
    div.fourColumnLayout div.layoutColumnTwo.ofFour,
    div.fourColumnLayout div.layoutColumnThree.ofFour,
    div.fourColumnLayout div.layoutColumnFour.ofFour {width: 100%; clear: both;}	
}

/**
 * Asgard
 */

body {font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 14px; color: #8e8e8e; background: #fff url('../images/body-comp-bg-1.jpg') no-repeat scroll top;}

h1,h2,h3,h4,h5 {font-family: "Jura","Helvetica Neue",Helvetica,Arial,sans-serif; color: #4f6385;}
a {color: #4f6385;}

input {border-radius: 0;}

#basket,
#contentSide,
#footerNavigation,
div.breadcrumb {display: none;}

#container {width: 100%;}
#header,
#primaryNavigation,
#content,
#contentBottomWrapper,
#footerWrapper { max-width: 960px; margin: 0 auto;}

#content {background: white; margin-top: 100px;}
#contentBottom {background: #f6f6f6; padding-top: 20px;}
#footer {background: #f6f6f6; margin-top: 0;}

#logo {margin: 120px 0 15px 10px;}
#logo a {font-family: "Jura","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 40px; color: white;}
#logo span.tagline {font-family: "Jura","Helvetica Neue",Helvetica,Arial,sans-serif; font-size: 12px; color: white; text-transform: uppercase; display: block;}

#search input {display: inline-block; border: 0; border-radius: 0; height: 26px;}
#search button {display: inline-block; background-color: #4f6385; color: #fff; font-weight: normal; font-family: "Jura","Helvetica Neue",Helvetica,Arial,sans-serif; border: 0; width: 26px; height: 26px; text-align: center; border-radius: 0; position: relative; left: -4px; top: 1px;}
#search button span {display: none;}
#search button:after {content: '>';}

#globalNavigation {margin: 10px 0;}
#globalNavigation a {color: white; text-transform: uppercase; padding-right: 0;}
#globalNavigation a:before {display: inline-block; content: "+"; width: 18px; text-align: center;}

#primaryNavigation li {display: block;}
#primaryNavigation li a {font-family: "Jura","Helvetica Neue",Helvetica,Arial,sans-serif; color: white; text-transform: uppercase; font-size: 13px; padding: 0;}
#primaryNavigation li a:before {display: inline-block; content: "+"; width: 18px; text-align: center; background: #69ab91; line-height: 20px;}
#primaryNavigation li:hover a:before,
#primaryNavigation li a.active {color: black;}
#primaryNavigation li a span {background: url(../images/menu-bg.png) repeat; line-height: 20px; padding: 0 15px 0 5px; display: inline-block;}
#primaryNavigation ul ul {list-style-type: none; padding-left: 0; margin-left: 0; border-left: 18px solid #69ab91;}
#primaryNavigation ul ul li {margin-left: 0;}
#primaryNavigation ul ul li a  span {padding-left: 15px;}
#primaryNavigation ul ul li a:before {display: none;}
#primaryNavigationWrapper {padding: 10px;}

div.twoColumnPage div.columnTwo {background: #eee; margin-top: -40px;}

div.page.news div.pageContent {padding: 10px;}
div.news_list_related {padding: 10px;}