/** * Project style sheet. * * @package vanilla * @subpackage css * @author h2a */ /**------------------------------------------ Defaults ------------------------------------------**/ /* Declare the default font and color here */ hyml, body, button, input, select, textarea { color: #4f493d; font-family: Arial, sans-serif; font-size: 14px; } /* font smoothing */ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #f1f1eb; min-width:320px} @font-face { font-family: 'libre_baskervillebold'; src: url('../fonts/librebaskerville-bold-webfont.eot'); src: url('../fonts/librebaskerville-bold-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/librebaskerville-bold-webfont.woff2') format('woff2'), url('../fonts/librebaskerville-bold-webfont.woff') format('woff'), url('../fonts/librebaskerville-bold-webfont.ttf') format('truetype'), url('../fonts/librebaskerville-bold-webfont.svg#libre_baskervillebold') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'libre_baskervilleitalic'; src: url('../fonts/librebaskerville-italic-webfont.eot'); src: url('../fonts/librebaskerville-italic-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/librebaskerville-italic-webfont.woff2') format('woff2'), url('../fonts/librebaskerville-italic-webfont.woff') format('woff'), url('../fonts/librebaskerville-italic-webfont.ttf') format('truetype'), url('../fonts/librebaskerville-italic-webfont.svg#libre_baskervilleitalic') format('svg'); font-weight: normal; font-style: normal; } @font-face { font-family: 'libre_baskervilleregular'; src: url('../fonts/librebaskerville-regular-webfont.eot'); src: url('../fonts/librebaskerville-regular-webfont.eot?#iefix') format('embedded-opentype'), url('../fonts/librebaskerville-regular-webfont.woff2') format('woff2'), url('../fonts/librebaskerville-regular-webfont.woff') format('woff'), url('../fonts/librebaskerville-regular-webfont.ttf') format('truetype'), url('../fonts/librebaskerville-regular-webfont.svg#libre_baskervilleregular') format('svg'); font-weight: normal; font-style: normal; } /* Paragraphs */ p { line-height: 1.50; } p + p { margin-top: 20px; } /* Links */ a:link, a:visited { color: #897e68; text-decoration: underline; } a:hover, a:active, a:focus, a.isActive { color: #776d5a; text-decoration: none; } /* reset for block */ a.block { } a.block:hover { } a.block:visited { } a.block:active { } /* Buttons */ .btn:link, .btn:visited { background-color: #dcc068; color: #fff; padding: 10px 24px; text-decoration: none; font-family: 'libre_baskervillebold'; line-height: 16px; font-size: 12px; text-transform: uppercase; } .btn:hover, .btn:visited, .btn:active { background-color: #c7ae5e; } /* btn More */ a.btnMore { display: inline-block; border: 1px solid #dcc068; background-color: #c7ae5e; } a.btnMore span { display: inline-block; background-color: #dcc068; border: 1px solid #fff; color: #fff; padding: 10px 24px; text-align: center; text-decoration: none; font-family: 'libre_baskervillebold'; line-height: 16px; font-size: 12px; text-transform: uppercase;} a.btnMore:hover { background-color: #b7a056; } .txtAlignCenter { text-align: center; } /* Titles, will be usefull to have a class */ h1, .h1 { font-size: 24px; } h2, .h2 { font-size: 18px; } h3, .h3 { font-size: 16px; } h4, .h4 { font-size: 14px; } h5, .h5 { font-size: 13px; } h6, .h6 { font-size: 12px; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { line-height: 130%; } h1, .h1, h2, .h2 { font-family: 'libre_baskervillebold'; color: #7c6227; text-transform: uppercase; } h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: 'libre_baskerville'; color: #7c6227; } /* Lists */ ul, ol { } li { } li + li { } ul li:before { } ol { } ol li:before { } /* disable stuff on vanilla */ li.vanilla:before { } /* Tables */ table { width: 100%; } th, td { padding: 15px 0; text-align: left; border-bottom: 1px solid #e2e2e2; } th { font-weith: bold; } tr:nth-child(even) td { background-color: #f3f3f3; } thead th, thead td { } /* Selected text */ ::selection { background-color: #2b4c93; } ::-moz-selection { background-color: #2b4c93; color: #FFF; } /* Fonts */ .font-0 { } /* default font family */ .font-1 { } /* secondary font family */ /* Colors */ .cl-0 { color: #2b4c93; } /* Blue */ .cl-1 { color: #6abfde; } /* Grey */ /* Background colors */ .bg-0 { background-color: #2b4c93; } /* Red */ .bg-1 { background-color: #3b444b; } /* Grey */ /* Miscellaneous */ abbr[title] { border: 0 } small, .small { font-size: 75%; } big, .big { font-size: 150%; } img { border: none; max-width: 100%; height: auto; } .img-responsive { min-width: 100%; height: auto; padding-bottom: 20px; } /**------------------------------------------ FORMS ------------------------------------------**/ /* GLOBALS */ form { } .form-row { } .form-row + .form-row { margin-top: 10px; } /* MESSAGES */ .form-msg { padding: 5px 8px; margin-bottom: 3px; font-weight: bold; font-size: 12px; position: relative; height: 16px; } .form-row + .form-msg { margin-top: 10px; } .form-msg:before { content: ""; display: block; width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 10px solid transparent; position: absolute; right: 15px; bottom: -10px; } /* Error */ .form-msg-error { background-color: #f00; } .form-msg-error:before { border-top-color: #f00; } /* Success */ .form-msg-success { background-color: #090 } .form-msg-success:before { border-top-color: #090; } /* Notice */ .form-msg-notice { background-color: #999; } .form-msg-notice:before { border-top-color: #999; } /* ELEMENTS */ /* Labels */ label { display: inline-block; margin-bottom: 3px; } .form-row-error label { font-weight: bold; } /* Default */ select[name], textarea[name], input[type="text"], input[type="password"], input[type="email"], input[type="url"], input[type="date"] { padding: 5px; font-size: 13px; border: 1px solid #fff; } /* Hover */ select[name]:hover, textarea[name]:hover, input[type="text"]:hover, input[type="password"]:hover, input[type="email"]:hover, input[type="url"]:hover, input[type="date"]:hover { } /* Focus, active */ select[name]:focus, textarea[name]:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="date"]:focus, select[name]:active, textarea[name]:active, input[type="text"]:active, input[type="password"]:active, input[type="email"]:active, input[type="url"]:active, input[type="date"]:active { } /* Error (by default #c22b2b) */ .form-row-error select[name], .form-row-error textarea[name], .form-row-error input[type="text"], .form-row-error input[type="password"], .form-row-error input[type="email"], .form-row-error input[type="url"], .form-row-error input[type="date"] { border-color: #f00; color: #c22b2b; } /* Submit */ .form-row-submit { margin-top: 10px; } button[type="submit"] { background-color: #6abfde; display: block; width: 100%; border: none; color: #fff; padding: 15px; font-weight: bold; text-transform: uppercase; } button[type="submit"]:hover { } button[type="submit"]:focus, button[type="submit"]:active { } /* PLACEHOLDERS*/ /* Normal */ ::placeholder { } ::-webkit-input-placeholder { } :-moz-placeholder { } ::-moz-placeholder { opacity: 1; } /* FF 19+ had an opacity to the placeholder */ :-ms-input-placeholder { } .\:placeholder { } /* @see jquery.placeholder.js */ /* Hover */ :hover::placeholder { } :hover::-webkit-input-placeholder { } :hover:-moz-placeholder { } :hover::-moz-placeholder { } :hover:-ms-input-placeholder { } .\:placeholder:hover { } /* @see jquery.placeholder.js */ /* Focus, active */ :focus::placeholder, :active::placeholder { } :focus::-webkit-input-placeholder, :active::-webkit-input-placeholder { } :focus:-moz-placeholder, :active:-moz-placeholder { } :focus::-moz-placeholder, :active::-moz-placeholder { } :focus:-ms-input-placeholder, :active:-ms-input-placeholder { } .\:placeholder:focus, .\:placeholder:active { } /* @see jquery.placeholder.js */ /* Error (by default #c22b2b) */ .form-row-error ::placeholder { color: #c22b2b; } .form-row-error ::-webkit-input-placeholder { color: #c22b2b; } .form-row-error :-moz-placeholder { color: #c22b2b; } .form-row-error ::-moz-placeholder { color: #c22b2b; } .form-row-error :-ms-input-placeholder { color: #c22b2b; } .form-row-error .\:placeholder { color: #c22b2b; } /* @see jquery.placeholder.js */ /* RADIO / CHECKBOX */ /* you must uncomment some lines from main.js to activate the input replacement */ /* for not-modern browser, do not forgot to activate jquery.checked.js in view.yml file */ /* Hide it, but keep it at correct place (for focus) */ .has-js .js-checkboxinput { position: absolute; z-index: -1; margin-top: 2px; margin-left: 2px; } /* Note that .js-checkbox is added in javascript */ .js-checkboxinput + .js-checkbox { cursor: pointer; width: 21px; height: 21px; vertical-align: -5px; } /* Unchecked */ /* Normal */ .js-checkboxinput + .js-checkbox { background-position: ; } /* Hover */ .js-checkboxinput + .js-checkbox:hover { background-position: ; } /* Focus, active */ .js-checkboxinput:focus + .js-checkbox, .js-checkboxinput:active + .js-checkbox { background-position: ; } /* Error (by default #c22b2b) */ .form-row-error .js-checkboxinput + .js-checkbox { background-position: ; } /* Checked */ /* Normal */ .js-checkboxinput:checked + .js-checkbox, .js-checkboxinput.\:checked + .js-checkbox { background-position: ; } /* @see jquery.checked.js */ /* Hover */ .js-checkboxinput:checked + .js-checkbox:hover, .js-checkboxinput.\:checked + .js-checkbox:hover { background-position: ; } /* @see jquery.checked.js */ /* Focus, active */ .js-checkboxinput:checked:focus + .js-checkbox, .js-checkboxinput:checked:active + .js-checkbox, .js-checkboxinput.\:checked:focus + .js-checkbox, .js-checkboxinput.\:checked:active + .js-checkbox { background-position: ; } /* @see jquery.checked.js */ /* Error (by default #c22b2b) */ .form-row-error .js-checkboxinput:checked + .js-checkbox, .form-row-error .js-checkboxinput.\:checked + .js-checkbox { background-position: ; } /* @see jquery.checked.js */ /**------------------------------------------ STRUCTURE ------------------------------------------**/ /* Container */ .container { position: relative; max-width: 960px; margin: 0 auto; } /* Header */ .header { position: relative; margin: 0; } /* topHeader */ .topHeader { height: 60px; border-bottom: 3px solid #dcc068; background-color: #4f493d; } /* Navigation */ .nav { padding-left: 320px; } .nav-item { display: inline-block; padding: 23px 30px 0 0; } .nav-link { font: normal normal 11px/18px 'libre_baskervillebold'; } .nav-link:link, .nav-link:visited { display: block; color: #fff; text-decoration: none !important; } .nav-link:hover,.nav-link:focus, .nav-link:active { position: relative; color: #dcc068; } .nav-link:hover::after { position: absolute; top: 0; left: -22px; content: ''; display: block; width: 17px; height: 17px; background: url('../img/navLink-img.png') center no-repeat; } /* Lang */ .nav-lang { position: absolute; top: 0px; right: 0; } .nav-lang li { margin: 0; padding: 0; display: block; float: left; } .nav-lang li +li { margin-left: 10px; } .nav-lang li a { display: block; float: left; width: 33px; margin-top: 14px; text-align: center; text-decoration: none; font: normal normal 10px/33px 'libre_baskervilleregular'; } .nav-lang li > a:link, .nav-lang li > a:visited { color: #fff; } .nav-lang li > a:hover, .nav-lang:focus, .nav-lang li > a:active, .nav-lang li a.active { color: #dcc068; } .nav-lang li a.active { background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAhCAYAAABX5MJvAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYxIDY0LjE0MDk0OSwgMjAxMC8xMi8wNy0xMDo1NzowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNS4xIE1hY2ludG9zaCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4MEI4MkQ0QzE5QjExMUU1QUE2RDkxMjdBRkUyQ0MxMCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4MEI4MkQ0RDE5QjExMUU1QUE2RDkxMjdBRkUyQ0MxMCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ1N0YwNTI3MTlBNTExRTVBQTZEOTEyN0FGRTJDQzEwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ1N0YwNTI4MTlBNTExRTVBQTZEOTEyN0FGRTJDQzEwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+TkwcTwAAAUlJREFUeNq81zsKwkAQBuD4F1ZWHsDWc4jgFaxsFGz1APaClR5A8AZWggg+WgtBsLLUA1hZ2cRZMBITN/uY3R34SbEk+ZrZnS3FcRzp1H3fky1VKE/V+7XGXLqGiFdVyoEy5XwETMCGsqaUORA4AIwoQw4EDgCiXhwIHAAiLgSOACwINNtTB2ANgWOAFQQeAMYQeALkIPS9qRHCEUAbAs8ALQgCAJQQZABbT4BCCDKAlUeAFFK67bqihY6BAOlKWvcBGjaEbPHZlusBER1Km7LEZ+qZ0eNKGQSCiDFtQmnRv09IjV+hID+AXIsGgOQAfzcrj5C/AOm27QEiBRQeYA4hhQDlUe4AogRoDTUMyBdAObHHOwuINsB00NWFGAFsRn4VxBhge/mRQfo2AM41MAsRgDGlaQrgXojTkARwDn0rTyAXDkDUW4ABAANtr2B65yPmAAAAAElFTkSuQmCC') center no-repeat; } /* bottomHeader */ .bottomHeader { padding-top: 0 /*85px*/; z-index: 90000; } /* Branding */ .logo{ display: block; max-width: 40% } .logo img { display: block; } /* Titre */ .header hgroup {display: block;} /* .header hgroup h1 { font-size: 42px; line-height: 48px; color: #4f493d; }*/ .header hgroup h2 { font-size: 18px; line-height: 20px; padding-top: 2px; color: #dcc068; text-transform: uppercase; color: #ae9852; padding-left:0; margin-top:20px;text-align:center} .header hgroup h1, .header hgroup h1 + h2 { margin-bottom: 0; } /* Main */ .main { width: 960px; float: right; padding-top: 60px; } body.confirm .main { width: 100%; float: none; } /* Footer */ .footer { text-align: center; color: #fff; } /* footer a */ .footer a:link, .footer a:visited { color: #7c6227; } .footer a:hover, .footer a:active, .footer a:foucs { color: #b09048; } /* Coordonnees */ .coordonnees { background-color: #bdaf92; padding: 10px; } .coordonnees p { line-height: 36px; } .coordonnees p a:link, .coordonnees p a:visited { color: #fff; } .coordonnees p a:hover, .coordonnees p a:focus, .coordonnees p a:active { color: #4f493d; } .spaceWord { padding: 0 12px; } /* bordrStyle */ .footer .borderStyle { padding: 44px; background: none !important; } /* Footer nav */ .footernav { margin: 30px 0; font-size: 12px; height: 60px; } .footernav-list { } .footernav-item { display: inline-block; } .footernav-item + .footernav-item { margin-left: 15px; } /**------------------------------------------ MODULES ------------------------------------------**/ /* Messages */ .message { } .message-error { } .message-success { } .message-info { } /* Heading */ .heading { } .heading-title { margin-top: 0; } .heading-subtitle { margin: 0; } .heading-btn { font-size: 16px; margin: 20px 0 15px 0; display: none; } /* Banner */ .banner { margin: 20px 0; } /* Sections */ .section-title { display: table; height: 64px; margin: 0 0 20px 0; padding-left: 80px; vertical-align: middle; } .section-title > span { display: table-cell; vertical-align: middle; } .section { background-color: #fff; margin-bottom: 20px; padding: 10px; } /* icons titles */ #fonctionnement .section-title { background: url('../img/icons/fonctionnement.png') no-repeat; } #cadre-juridique .section-title { background: url('../img/icons/cadre-juridique.png') no-repeat; } #packages .section-title { background: url('../img/icons/packages.png') no-repeat; } #avantages .section-title { background: url('../img/icons/avantages.png') no-repeat; } /* */ .borderStyle { padding: 24px; border: 1px #dcc068 solid; background-color: #fff; } /* Keypoints */ .keypoints { display: block; } .keypoints-item { display: block; position: relative; } /* List view */ .keypoints.list-view { } .keypoints.list-view .keypoints-item { padding: 2px 0 20px 40px; } .keypoints.list-view .keypoints-item + .keypoints-item { } .keypoints.list-view .keypoints-item:before { position: absolute; left: 0; top: 0px; } /* List view with sub keypoints */ .subkeypoints-list { font-style: italic; margin-top: 10px; list-style-type: disc; list-style-position: inside; } .subkeypoints-item + .subkeypoints-item { margin-top: 5px; } /* Grid view */ .keypoints.grid-view { vertical-align: top; } .keypoints.grid-view .keypoints-item { display: inline-block; width: 33.333%; vertical-align: top; text-align: center; margin-bottom: 20px; padding: 0 15px; } .keypoints.grid-view .keypoints-item:before { margin: 0 auto 15px auto; } /* Numbers Type */ .keypoints.numbers-type { display: block; counter-reset: section; } .keypoints.numbers-type .keypoints-item:before { content: counter(section); counter-increment: section; text-align: center; color: #dcc068; font-weight: bold; font-size: 14px; line-height: 24px; border-radius: 180px; border: 1px solid #dcc068; display: block; background-color: #fff; width: 24px; height: 24px; } /* iconCheck-type */ .keypoints.iconCheck-type { } .keypoints.iconCheck-type .keypoints-item:before { content: ''; position: absolute; top: 0px; left: 0px; display: block; width: 24px; height: 24px; background: url('../img/icons/icon-check-type.png') no-repeat; background-size: 100%; } /* Colonnes */ .colum_1_2 { width: 50%; } .colum_1_3 { width: 33.33333333333333%; } .colum_1_4 { width: 25%; } .colum_1_2, .colum_1_3, .colum_1_4 { display: table-cell; padding-right: 40px; } /* packages */ #packages { padding-bottom: 20px; } /* titre principale + icon */ .packageTitle { } .packageTitle.borderStyle { padding-top: 13px; padding-bottom: 13px; } .packageTitle > h2 { margin-bottom: 0; } /* item */ .packageItem { position: relative; margin-top: 5px; } .packageItem > h3.borderStyle { position: relative; margin: 0; padding: 32px 80px 32px 104px; font: normal normal 14px/18px arial; text-transform: uppercase; letter-spacing: 1px; } .packageItem > h3:hover { cursor: pointer; } .packageItem > h3::after { content: ' '; position: absolute; right: 0; top: 0; width: 80px; height: 100%; background: url(../img/icons/arrow-bottom.png) center no-repeat;} .packageItem span { position: absolute; left: 0; top: 0; width: 80px; height: 100%; border-right: 1px solid #dcc068; text-align: center; vertical-align: middle; font-size: 26px; line-height: 82px; } .contentPack { display: none; padding-top: 20px; border-top: 0; } .packageItem.isOpen > h3::after { content: ' '; position: absolute; right: 0; top: 0; width: 80px; height: 100%; background: url(../img/icons/arrow-close.png) center no-repeat;} /** cookie shit **/ #maincookie { border-top: 1px #e5e5e5 solid; position: fixed; z-index: 20; bottom: 0; left: 0; width: 100%; box-sizing: border-box; padding: 10px 20px; background-color: #fff; } #maincookie_text { position: relative; margin: 0 auto; max-width: 1200px; padding-right: 30px; font-size: 12px; box-sizing: border-box; text-align: center; } /* added in JS */ #maincookie_trigger { position: absolute; top: 50%; right: 0; font-size: 28px; margin-top: -19px; cursor: pointer; } #maincookie_trigger:before { font-family: arial, sans-serif; content: "\00D7"; } /**------------------------------------------ MEDIA QUERIES ------------------------------------------**/ @media screen and (max-width: 1015px) { /* Structure */ .container { max-width: 80%; } .main { width: 100%; float: none; } .header { text-align: center; } .header hgroup {float: none; width: 100%; clear: both; padding-top: 30px; } .header hgroup h2 {padding-left: 0px; } .logo { float: none; text-align: center; display: inline-block; } .nav { float: none; display: none; } .aside { position: relative; width: 100%; padding-right: 0; float: none; margin-top: 40px; top: auto !important; } .aside.fixed { position: relative; } .contact-phone { text-align: center; } /* Modules */ .heading { text-align: center; } .heading-btn{ display: inline-block; } } @media screen and (max-width: 700px) { /* Structure */ .container { max-width: 95%; } .header hgroup h1 { font-size: 30px; line-height: 40px; } .header hgroup h2 { font-size: 15px; line-height: 17px; } .footer { padding: 0%; } .colum_1_2, .colum_1_3, .colum_1_4 { display: block; width: 100%; } /* Modules */ .keypoints.grid-view .keypoints-item { width: 50%; } } @media screen and (max-width: 500px) { .bottomHeader { padding-top: 45px; z-index: 90000; } /* Branding */ .logo { /*position: absolute; left: 20px; top: 20px; */display: block; text-align:center;max-width:100% /*width: 55px; height: 29px; overflow: hidden; background-color: #fff; */ } /* .logo > img { position: absolute; right: 0; bottom: 0; display: block; max-width: none; z-index: 11000; } */ .logo > img { max-width: 80%; display:initial} /* Modules */ h1, .h1 { font-size: 16px; } h2, .h2 { font-size: 15px; } h3, .h3 { font-size: 14px; } h4, .h4 { font-size: 13px; } h5, .h5 { font-size: 11px; } h6, .h6 { font-size: 10px; } .packageItem > h3.borderStyle { font-size: 12px; line-height: 16px; } .keypoints.grid-view .keypoints-item { width: 100%; text-align: left; padding: 20px 0 20px 55px; margin-bottom: 0; } .keypoints.grid-view .keypoints-item:before { position: absolute; left: 0; top: 8px; } .keypoints.grid-view .keypoints-item + .keypoints-item { border-top: 1px solid #e2e2e2; } } @media screen and (max-height: 700px) { .aside.fixed { position: absolute; } } /**------------------------------------------ CSS HACKS ------------------------------------------**/ /* Firefox 2+ */ x:-moz-any-link, .selector { property: value; } /* Chrome 29+, Opera 16+ */ @media all and (-webkit-min-device-pixel-ratio:0) and (min-resolution: .001dpcm) { .selector { property: value; } } /* Chrome, Safari 3+ */ @media screen and (-webkit-min-device-pixel-ratio:0) { .selector { property: value; } } /* Chrome only */ @media screen and (-webkit-min-device-pixel-ratio:0) { @media all and (min-resolution: .001dpcm) { .selector { property: value; } } } /* Safari 5+/6- and Chrome 24- */ ::x, .selector { property: value; } /* Opera 9.5+ */ x:-o-prefocus, .selector { property: value; } /* IE 10 and IE 11 */ @media all and (-ms-high-contrast:none) { .selector { property: value; } } /* IE 11 */ *::-ms-backdrop, .selector { property: value; } /* IE 9 (html specific) */ html.ie9 .selector { property: value; } /* IE 6-10 */ .selector { property: value\9; } /* more hacks at http://browserhacks.com */