$orange: #FF931E; $blue: #2BAADA; $dark_orange: #E94F25; $title_font : "Lato", sans-serif; $sans_serif_font:"Lato", Arial, sans-serif; $serif_font : "Roboto Slab", serif; $cursive_font : 'Galada', cursive; @import "jquery.bxslider"; @import "redactor"; @import "fontawesome/font-awesome"; @import "qi_grids"; @import "popover"; @import "public/petitions"; @import "public/menu_item_link_contents"; @import "public/menus"; @import "public/slippry"; @import "public/timeline"; @import "public/articles"; @import "public/bottom2"; @import "public/dons"; @import "public/dons2"; @import "public/press_release"; @import "public/specific_map"; @import "public/flexslider"; @import "public/label"; @import "public/print"; @import "public/forum"; @import "public/boutique"; @import "public/assurance"; //@import "vendor/jquery.socialfeed"; @import "public/new_home"; @import "public/videos"; @import "public/don_tunnels"; @import "public/question_juridiques"; @import "public/pages"; @import "public/militer"; @import "vendor/flipclock"; @import "vendor/jquery.cookiebar"; //@import "vendor/jquery.socialfeed"; #main{ box-shadow:0 0 10px rgba(0,0,0,0.5);z-index:100; } #new_donate{ position:relative; .main_container{ overflow:auto; position:static; } #boutique_link{ img{ position:absolute; height:74px; top:-74px; right:30px; } } .background-left{ background:transparent; position:static; } background:url('/bleu.jpg') no-repeat; background-size:100%; background-size:cover; padding:45px 0; padding-bottom:60px; .inner{ .left{ color:white; float:none; padding-right:0px; margin-right:0px; position:relative; text-align:center; padding-top:0px; p{ margin:5px 0; margin-bottom:20px; font-size:1.3em; } img{display:none;} } .right{ text-align:center; float:none; margin-bottom:8px; a{ display:inline-block; font-family:$serif_font; color:black; font-size:1.1em; padding:9px 14px; background:white; margin:0 8px; } } } } b, strong{ font-weight:900; } #new_bottom{ //padding:0 20px; background:#f6f8f8; h4{ font-size:1em; } } #large{ .links{ color:white; padding-top:15px; text-align:right; float:right; a{ color:white; padding:5px; font-size:1.3em; } } .video_container{ h3{ text-align:left; display:block; font-size:1.3em; padding-top:15px; margin-top:0; } } } .video_thumb{ cursor:pointer; background-color:#323131; position:relative; h4{ margin-top:auto !important; margin-bottom:0 !important; position:absolute; bottom:0px; left:0px; padding:5px; padding-top:30px; padding-bottom:10px; text-align:left; font-size:15px !important; line-height:16px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 99%, rgba(0, 0, 0, 0.1) 100%); color:white !important; right: 0px; } .play_button{ position:absolute; top:32%; left:0;right:0; text-align:center; color:white; font-size:60px; display:block; } } .detail_download_content{ margin:10px 0; margin-bottom:5px; background:rgba(250,250,250,1); padding:10px; #color:white; img{ float:left; margin-right:0; width:150px; } h4,.desc,.links{ margin-left:160px; } h4{ font-weight:900; margin-top:0; } .links{ a{ display:inline-block; color:$orange; padding:5px 10px; border:1px solid $orange; margin-right:10px; margin-bottom:5px; width:auto; font-size:1em; background:transparent; border-radius:0; cursor:pointer; &:hover{ background:rgba(80,80,80,1); } } } } .bx-wrapper img{ display:block; max-width: 100%; } html{ height:100%; margin:0; } body{ font-family:"lato", Arial, sans-serif; height:100%; line-height:1.4em; text-align:left; font-weight:300; padding:0; margin:0; padding-top:35px; font-size:16px; color:#333333; background:#4f4f4f no-repeat left bottom fixed; background-position:left bottom; } #colors{ position:fixed; bottom:0; right:0; width:200px; } #content{ position:relative; margin-left:480px; margin-right:100px; margin-top:100px; margin-bottom:300px; } .slider{ img{ max-width:100%; } } a{ cursor:pointer; img{ border:0; } } img{ max-width:100%; } a{ color:$orange; text-decoration:none; &:hover{ color:$orange; text-decoration:none; } } .clear{ clear:both; } .center{ max-width:1100px; margin:auto; } .blanc_encadre{ //font-family:"din_alternate900", Arial, sans-serif; background:white; background:rgba(255,255,255,0.90); padding:25px; margin:auto; max-width:500px; h2{ margin-top:0; padding-top:0; } } .center_block{ text-align:center; img{ margin:0 5px; } } .quote{ padding:10px 10px; position:relative; .guillemet{ font-family:palatino; opacity:0.6; font-size:3em; position:absolute; &.top_corner{ top:5px; left:5px; padding-top:15px; padding-left:5px; } &.bottom_corner{ bottom:5px; right:5px; } } .quote_content{ font-family:Stylograph; font-size:1.6em; padding-top:45px; text-align:center; line-height:1.3em; } .author{ padding-right:50px; font-size:1em; text-align:right; opacity:0.8; } } .article_panel{ border-bottom:1px solid rgba(190,189,190,1); margin:10px 0; h2{ margin-top:0; padding-top:20px; } img{ width:40%; margin:20px; } &.left { img{ float:left; display:block; margin-right:20px; } padding-right:20px; } &.right{ img{ float:right; margin-left:20px;} padding-left:20px; } color:black; } h1,h2,h3,h4{ font-family:$title_font; font-weight:900; text-transform:uppercase; } h1{ font-size:35px; } .socials_links{ position:fixed; bottom:300px; right:0; .link{ display:block; width:50px; text-align:center; padding:12px 0; position:relative; color:white !important; font-size:1.2em; &.twitter{ background:rgba(54,174,218,1); } &.facebook{ background:rgba(60,90,150,1); } } .top_link{ opacity:0; transition-duration:0.5s; padding:3px 7px; font-size:2.5em; display:block; cursor:pointer; color:rgba(215,215,215,1); &:hover{ color:rgba(180,180,180,1); } } } .donate_bottom{ display:none; } .active{ color:rgba(253,164,40,1); } .breadcrumb{ margin:20px 25px; color:rgba(150,150,150,1); *{ color:rgba(150,150,150,1); } } .photo_credits{ font-size:0.9em; margin:20px 0px; color:rgba(255,255,255,0.5); } .menu_item_content{ //min-height:500px; padding-bottom:50px; position:relative; p{ text-align:justify; } .center{ max-width:650px; padding: 0 20px; margin:auto; } } .admin_panel{ position:fixed; bottom:0px; left:20px; a{ display:inline-block; padding:10px 20px; color:white; background:rgba(253,164,40,1); } } .main_container{ max-width:1200px; margin:auto; overflow:hidden; position:relative; } #logo_slider{ position:absolute; top:90px; left:50px; z-index:10; width:230px; } .first_title{ h1{ margin-top:0; color:$orange; text-align:center; padding-top:30px; font-size:1.6em; } } .menu_content_inner{ max-width:980px; margin:auto; .inner{ background:white; margin:auto 30px; position:relative; top:-50px; padding-bottom:20px; } &.index{ .menu_item_top{ //margin:20px; margin-bottom:0; margin-bottom:20px; h1{ text-align:center; left:20px; } .gradient{ background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%); height: 250px; position: absolute; bottom: 0; left: 0px; right: 0px; } } } } h1{ line-height:1.2em; } .comment_rules_container{ display:none; background:white; padding: 10px; margin-bottom:10px; .inner{ } } .politique_message{ padding:30px 70px; background:rgba(234,234,234,1); //color:white; .form{ font-weight:900; float:left; width:300px; } .recipient_list{ background:white !important; padding:5px; font-weight:normal; font-size:0.9em; } .message_container{ margin-left:320px; position:relative; .message{ padding:0 10px; } .gradient{ display:none; position:absolute; bottom:0; left:-10px; right:-10px; background:gray; height:150px; /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eaeaea+0,eaeaea+88,eaeaea+100&0+0,1+87,1+100 */ background: -moz-linear-gradient(top, rgba(234,234,234,0) 0%, rgba(234,234,234,1) 87%, rgba(234,234,234,1) 88%, rgba(234,234,234,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, rgba(234,234,234,0) 0%,rgba(234,234,234,1) 87%,rgba(234,234,234,1) 88%,rgba(234,234,234,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(234,234,234,0) 0%,rgba(234,234,234,1) 87%,rgba(234,234,234,1) 88%,rgba(234,234,234,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00eaeaea', endColorstr='#eaeaea',GradientType=0 ); /* IE6-9 */ } &.with_gradient{ .gradient{ display:block; } .message{ height:300px; overflow:hidden; } } } .message{ } .name{ font-size:1em; padding:5px 10px; } .message_content{ color:black; padding:10px; border-radius:10px; box-shadow:0 0 10px rgba(0,0,0,0.2); margin:10px 0; background:white; } .send_button{ display:inline-block; background:$orange !important; padding: 5px 10px; color:white; border:0; margin-bottom:3px; } .send_buttons{ margin:10px 0; } .object{ margin:10px 0; } .recipients{ margin:10px 0; margin-bottom:7px; .recipient{ display:inline-block; border-radius:4px; padding:2px 8px; margin-bottom:3px; background:#d3e7fa; font-size:0.8em; } } .content{ padding:0 10px; border-top:1px solid gray; padding-bottom:10px; } } .search_top{ form{ display:inline; .search_input{ color:rgba(255, 255, 255, 0.7); border:1px solid rgba(0,0,0, 0.4); padding:2px 2px; border-radius:2px; text-align:center; &:focus{ border:1px solid rgba(0,0,0, 0.7); background:white; color:black; } background:transparent; } .search_send{ margin-left:-5px; } } } .petitions_large_view_container{ background:rgba(5, 5, 5, 0.03); } .petitions_large_view{ h4{ color:#fba33a; margin:10px 0; } padding:10px 10px; padding-bottom:15px; text-align:center; .petition_small{ display:block; text-align:center; color:black; width:20%; box-sizing:border-box; padding:10px; float:left; .inner{ margin-top:5px; font-size:0.9em; } .image{ height:130px; background: center center no-repeat; background-size:100%; background-size:cover; } }} #image_actu_albums{ .image_actu_album{ margin-bottom:20px; padding:10px; } } #donate_block_bottom{ background:url('/hachures.jpg'); padding:60px 20px; .left_block{ width:65%; float:left; .inner{ padding:30px; background:white; h3{ font-size:2em; margin-top:0; color:$dark_orange; } } } .right_block{ width:35%; float:left; .inner{ padding:30px; margin-left:50px; background:white; a{ display:block; padding-bottom:20px; color:inherit; span{ font-weight:600; color:$orange; display:block; } } } } } #slider_banner{ background:url('/orange.jpg') no-repeat center center; background-size:100%; background-size:cover; padding:60px 20px ; .bx-pager{ display:none; } .bx-wrapper{ margin:0 auto; } .main_container{ overflow:inherit; } #slider_left{ max-width:70%; position:relative; box-sizing:border-box; #clip_place{ position:absolute; top:0; left:0; right:0; bottom:0; z-index:3; .close{ position:absolute; top:-20px; right:0px; } .video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } } } #slider_right{ width:30%; .inner{ p{ } text-align:center; margin-left:50px; color:white; padding:20px; box-sizing:border-box; img{ max-width:100%; display:block; margin:auto; margin-top:10px; } } float:right; h1{ font-size:1.6em; } } } .row_actus{ padding:0 20px; h4{ margin-top:0px; margin-bottom:10px; font-size:1.6em; color:$dark_orange; } h2{ margin-top:0; } .home_title{ .link_reseau{ span{ color:white !important; background:black; height:40px; width:40px; border-radius:50%; display:inline-block; margin:0 5px; text-align:center; box-sizing:border-box; padding-top:8px; position:relative; top:-1px; } } } .home_articles{ width:66.66%; float:left; margin:0; box-sizing:border-box; padding:0 15px; .home_article_header{ display:block; box-sizing:border-box; float:left; width:50%; padding:0px 15px; .image{ display:block; } margin-bottom:30px; .description{ p{ margin-top:0; font-size:0.9em; } padding:0px; color:rgba(0,0,0,0.7); h2{ margin-top:8px; margin-bottom:8px; color:black; font-size:1.2em; } } } .inner{ margin-left:-15px; box-sizing:border-box; .index_category .article_header .image { background: black center center; background-size: 100%; background-size: cover; width: 50%; height: 300px; float: left; } /* line 413, /Users/nico/Dev/3p_app/app/assets/stylesheets/public/articles.css.scss */ .index_category .article_header .description { margin-left: 50%; padding-left: 10px; } } } } .connaitre_container{ padding:0 20px; text-align:center; .main_container{ max-width: 1350px; margin: 0 auto; padding: 0 10px; } .inner{ margin:0px -15px; margin-bottom:20px; } .element{ width:49%; margin:0; display:inline-block; box-sizing:border-box; padding:15px; position:relative; .with_ratio{ box-shadow:0 0 40px rgba(0,0,0,0.3); } h4{ position:absolute; bottom:-30px; left:35px; right:35px; margin:0; padding:12px 10px; padding-bottom:23px; font-size:1em; text-align:center; color:black; background:#F6F8F8; } } margin-bottom:100px; } .follow_row_container{ padding:0 0px; padding-bottom:60px; background:url('/blanc.jpg') no-repeat center center; background-size:100%; background-size:cover; .main_container{ max-width:1350px; margin:0 auto; padding : 0 10px; } .inner{ margin:0 0px; } .element{ width:23%; margin:1%; float:left; box-sizing:border-box; padding:0px; position:relative; h4{ img{ display:block; margin:auto; height:77px; } position:absolute; color:white; left:0; right:0; margin:0; font-weight:900; font-size:1em; padding:0px; text-align:center; } .overlay{ position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.2); } &:hover{ .overlay{ background:rgba(0,0,0,0.4);} } } } .timeline_container{ .inner{ background:transparent; } } .blog_content_show, .menu_content_inner{ a{ &:hover{ text-decoration:underline; } } } .newsletter_list{ padding:10px 20px; margin-bottom:20px; background:white; padding-bottom:30px; display:block; h2{ margin-bottom:0; } p.date{ float:right; padding-top:5px; color:black; } } a.newsletter_list{ &:hover{ h2{ text-decoration:underline; } border-left:5px solid $orange; } text-decoration:none !important; span{ } } .flashs{ position:fixed; bottom:10px; right:10px; max-width:600px; width:50%; z-index:3; .error, .notice, .alert{ padding: 15px; margin-bottom: 20px; border: 1px solid transparent; border-radius: 4px; .remove{ padding-right:7px; cursor:pointer; } } .error{ color: #a94442; background-color: #f2dede; border-color: #ebccd1; } .notice{ color: #3c763d; background-color: #dff0d8; border-color: #d6e9c6; } .alert{ color: #8a6d3b; background-color: #fcf8e3; border-color: #faebcc; } } #menu_top_container #menu .content{ font-family:$title_font; text-transform:uppercase !important; font-weight:900 !important; font-size:17px !important; a{ padding-left:10px; padding-right:10px; } } #menu_top_container{ #baseline{ position:absolute; bottom:12px; font-family:$sans_serif_font; font-size:13px; text-align:left; left:110px; line-height:14px; color: rgba(0, 0, 0, 0.7); } } h2.home_title{ text-align:left; padding:60px 0; padding-bottom:40px; margin:0; font-weight:900; span{ color:$orange; } } h1,h2,h3,h4{ &.cursive{ text-transform:none; font-weight:normal; font-family:$cursive_font; line-height:1.1em; } } .serif_link{ font-family:$serif_font; color:$dark_orange; font-weight:600; font-size:1.1em; span{ font-family:$sans_serif_font; color:white; border-radius:50%; width:1em; height:1em; padding:4px; padding-bottom:6px; padding-top:2px; background:$orange; display:inline-block; text-align:center; font-weight:normal; } &:hover{ color:$dark_orange; span{ background:$dark_orange; color:white; } } } #menu_top_container #menu .content .donate a { background-color:$blue; } @media screen and (max-width:1000px) { #content{ margin-left:300px; margin-top:50px; margin-bottom:300px; } #colors{ width:20%; } body{ background-size:90%; } } @media screen and (max-width:800px) { #content{ margin:30px 40px; margin-bottom:170px; } #colors{ width:20%; } body{ background-size:90%; } }