Media

Editing website_designs/gris-souris-css/style.css

/* Template Gris Souris, copyright monsieurgraphic.com, created by Mathieu Vendeville, 2015 */ /* for content page only */ .MainContent { width: 70.1%; float:left; } .Sidebar { width: 25%; float:right; margin-right: 0.7%; /*background-color:grey; */ padding-left: 1.7%; background-image: url(/media/content_designs/gris-souris-css/line2px-y.png); background-position: left; background-repeat: repeat-y; } .SideItemWrap { box-sizing: border-box; width: 100%; background-color: white; } .SideItemWrap a, .BottomItemWrap a, .RoundItemWrap a, .NormalItemWrap a { text-decoration: none; color:#4d4d4f; } .SideItemWrap img { width: 100%; float: left; border-radius: 3px; -moz-border-radius: 3px; } .SideItemWrapText { float: left; box-sizing: border-box; } .SideItemWrapText p, BottomItemWrap p { margin-top:0; } .SideItemWrapText h1 { margin:0; } .bannerTop img { width: 100%; } .RoundItemWrap, .NormalItemWrap { width: 30%; margin: 0 15px 10px 0; display: inline-block; vertical-align: top; box-sizing: border-box; text-align: center; } .BottomWhatson { clear: both; } .BottomItemWrap { width: 23.3%; /*float: left;*/ display: inline-block; vertical-align: top; box-sizing: border-box; text-align: center; } .BottomItemWrap img, .RoundItemWrap img { width:80%; border-radius: 50%; -moz-border-radius: 50%; -webkit-box-shadow: 0 7px 6px rgba(0,0,0,0.15); -moz-box-shadow: 0 7px 6px rgba(0,0,0,0.15); box-shadow: 0 7px 6px rgba(0,0,0,0.15); position: relative; } .NormalItemWrap img { width:80%; position: relative; } .BottomItemWrap img:hover, .RoundItemWrap img:hover, .contentPostWrap img:hover { -webkit-box-shadow: 0 15px 14px rgba(0,0,0,0.15); -moz-box-shadow: 0 15px 14px rgba(0,0,0,0.15); box-shadow: 0 15px 14px rgba(0,0,0,0.15); top: -5px; } /* end for content page only */ body{ margin:0; font-family: 'Source Sans Pro', Arial,Verdana,Helvetica,Tahoma,Georgia,Lucida,sans-serif; font-weight: 300; font-size: 16px; color:#4d4d4f; background:#1d191a url(/media/content_designs/gris-souris-css/bg-light.jpg) repeat left top; background-color: white; } a { color: #ed193f; } img{ border:0px; margin:0px; font-size: 36px; } h1 { font-family: 'Source Sans Pro', Arial,Verdana,Helvetica,Tahoma,Georgia,Lucida,sans-serif; font-weight: 300; line-height: 1; } hr{ border: none; background: url(/media/content_designs/gris-souris-css/line2px.png) repeat-x center center; height: 2px; width: 100%; padding: 0px; margin: 20px 0; float: left; clear: both; } .wrapper { margin: 0 auto; max-width: 1156px; min-width: 985px; width: 100%; padding-top: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; /*background-color: blue;*/ } .wrapperMargin, .margin { margin-left: 0.7%; margin-right: 0.7%; } /* form input design */ .formRow { background: #eeeeee; color: #505050; padding: 10px; clear: both; margin-bottom: 2px; } input[type="button" i], input[type="submit" i], input[type="reset" i], input[type="file" i]::-webkit-file-upload-button, button { padding: 15px; border-radius: 15px; } input[type=text], input[type=url], input[type=tel], input[type=number], input[type=color], input[type=email], input[type=password] { box-sizing: border-box; border:none; height: 30px; padding: 2px 10px; border-radius: 15px; -moz-border-radius: 15px; box-shadow: inset 1px 1px 5px #a7a7a7; -moz-box-shadow: inset 1px 1px 5px #a7a7a7 ; -webkit-box-shadow: inset 1px 1px 5px #a7a7a7 ; } input[type=textarea], textarea { box-sizing: border-box; border:none; padding: 2px 10px; border-radius: 15px; -moz-border-radius: 15px; box-shadow: inset 1px 1px 5px #a7a7a7; -moz-box-shadow: inset 1px 1px 5px #a7a7a7 ; -webkit-box-shadow: inset 1px 1px 5px #a7a7a7 ; } /* end form input design */ /* Header */ #header { width: 100%; position: relative; /* background-color: green; */ } .login { text-align: right; font-size: 12px; margin-top: 10px; } .enewsSub, .loginSub { float: right; font-size: 0.7em; display: block; padding-top: 8px; } .enewsSub a, .loginSub a { color:#4d4d4f; cursor: pointer; } .enewsSub { margin-left: 10px; } .loginSub { padding-right: 10px; /* border-right: url(/media/content_designs/1/line2px-y.png) repeat-y ; border-right: 3px solid #000;*/ background-image: url(/media/content_designs/gris-souris-css/line2px-y.png); background-position: right; background-repeat: repeat-y; } .cross { width: 30px; float: right; margin-left: 15px; } .clearfix { visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; } #EnewsPopup { z-index: 999; display: none; width: 200px; height: auto; position: absolute; right: -2px; top: 30px; -webkit-box-shadow: 3px 8px 20px 0px rgba(48, 48, 48, 0.57); -moz-box-shadow: 3px 8px 20px 0px rgba(48, 48, 48, 0.57); box-shadow: 3px 8px 20px 0px rgba(48, 48, 48, 0.57); background-color: white; -moz-border-radius: 3px; border-radius: 3px; padding:10px; color: #414042; } #loginPopup { z-index: 999; display: none; width: 200px; height: auto; position: absolute; right: -2px; top: 30px; -webkit-box-shadow: 3px 8px 20px 0px rgba(48, 48, 48, 0.57); -moz-box-shadow: 3px 8px 20px 0px rgba(48, 48, 48, 0.57); box-shadow: 3px 8px 20px 0px rgba(48, 48, 48, 0.57); background-color: white; -moz-border-radius: 3px; border-radius: 3px; padding:10px; color: #414042; } #logo { clear:both; float:left; width:300px; position:relative; -webkit-transition: width 0.2s ease-in-out; -moz-transition:width 0.2s ease-in-out; -o-transition: width 0.2s ease-in-out; transition: width 0.2s ease-in-out; overflow:hidden; /* background-color: grey; */ } #logo img { width:100%; position:relative; } @media (max-width: 1100px) { #logo { clear:both; float:left; width:180px; } } /* Navigation */ .navCont { float: right; } .nav>li { background-color: transparent; /*background-image: url(/media/content_designs/1/menu-li-bg.png); background-position: left 2px; background-repeat: no-repeat;*/ height: 24px; margin: 0; padding: 35px 30px 0 0; list-style: none; display: inline-block; } .nav>li:last-child { padding: 23px 0 0 0; width:35px; } .nav>li>a { color:#4d4d4f; display: block; /*font-family: Verdana, Geneva, sans-serif;*/ line-height: 11px; padding: 0; text-decoration: none; } .nav li ul { background-color: white; padding: 10px 0; border-radius: 3px; -moz-border-radius: 3px; -webkit-box-shadow: 0 2px 3px rgba(0,0,0,0.15); -moz-box-shadow: 0 3px 3px rgba(0,0,0,0.15); box-shadow: 0 2px 3px rgba(0,0,0,0.15); } .nav li ul li a { padding: 5px 10px; text-decoration: none; color:#4d4d4f; } .nav li ul li a:hover { background-color: #4d4d4f; text-decoration: none; color:#fff; } /* End Navigation */ /* Mobile Navigation */ .MobileMenuTop { float:right; display:none; margin-top: 28px; } .MobileMenuTopRight { float:right; /*margin-top: 28px;*/ width: 45px; } .MobileMenuTopRight img, .MobileMenuTopCentre img { width: 100%; } .MobileMenuTopCentre { float:right; width: 45px; margin-right: 15px; } /* End Mobile Navigation */ /* End Header */ /* Top rotator */ .imageround { border-radius: 3px; -moz-border-radius: 3px; } .rotator { width: 100%; margin: 0; position:relative; } .rotator img { width: 100%; border-radius: 3px; -moz-border-radius: 3px; /*-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.15);*/ } span.bannerText{ position:absolute; bottom:0; left:60px; background:rgba(255, 255, 255, 0.85); padding: 10px; -moz-border-radius-topright: 3px; border-top-right-radius: 3px; -moz-border-radius-topleft: 3px; border-top-left-radius: 3px; } a span.bannerText { color:#414042; } #controls{ width: 98%; bottom:50%; right:1%; left: 1%; position:absolute; } #bannerMovePrevious { width: 20px; float:left; } #bannerMoveNext { width: 20px; float:right; } /* #controls img{ width: 20px; float:left; margin-top:5px; margin-left:2px; } */ /* End Top rotator */ .contentItemWrap { display: inline-block; position: relative; vertical-align: top; box-sizing: border-box; width: 48.4%; padding: 2%; border-radius: 3px; -moz-border-radius: 3px; background-color: white; margin: 0 0.7% 1.4% 0.7%; -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.15); -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.15); box-shadow: 0 1px 2px rgba(0,0,0,0.15); /*margin-bottom: 15px;*/ } .contentPostWrap { clear: both; margin-bottom: 20px; } .contentPostWrap img { width: 35%; display: inline-block; position: relative; vertical-align: middle; border-radius: 50%; -moz-border-radius: 50%; -webkit-box-shadow: 0 7px 6px rgba(0,0,0,0.15); -moz-box-shadow: 0 7px 6px rgba(0,0,0,0.15); box-shadow: 0 7px 6px rgba(0,0,0,0.15); } .contentPostWrapText { width: 62%; display: inline-block; vertical-align: middle; box-sizing: border-box; padding-left: 3%; } .contentPostWrapText a { color: #ed193f; } a .contentItemWrap, .contentItemWrap a, a .contentPostWrap, .contentPostWrap a { text-decoration: none; color:#4d4d4f; } .contentItemWrap img { width: 45%; float: left; } .contentItemWrapText { width: 55%; float: left; box-sizing: border-box; padding-left: 3%; } .contentItemWrapText h1, .contentPostWrapText h1 { margin:0; } /* Footer */ #footer { width: 100%; } .follow, .search{ width: 50%; float:left; } .follow h1, .search h1 { display: block; margin: 7px 20px 0 0; float: left; } .follow img{ -webkit-box-shadow: 0 7px 6px rgba(0,0,0,0.15); -moz-box-shadow: 0 7px 6px rgba(0,0,0,0.15); box-shadow: 0 7px 6px rgba(0,0,0,0.15); position: relative; border-radius: 50%; -moz-border-radius: 50%; } .follow img:hover { -webkit-box-shadow: 0 15px 14px rgba(0,0,0,0.15); -moz-box-shadow: 0 15px 14px rgba(0,0,0,0.15); box-shadow: 0 15px 14px rgba(0,0,0,0.15); top: -5px; } #search{ margin:0; float:left; padding: 0; width: 55%; } #search li{ list-style:none; } #search li input.searchBox{ background:#ffffff url(/media/content_designs/gris-souris-css/magnify.png) no-repeat center right; width:80%; height:50px; padding: 2px 10px; border:none; box-sizing: border-box; border-radius: 25px; -moz-border-radius: 25px; box-shadow: inset 1px 1px 5px #BABABA; -moz-box-shadow: inset 1px 1px 5px #BABABA; -webkit-box-shadow: inset 1px 1px 5px #BABABA; -webkit-transition: width 0.5s ease-in-out; -moz-transition:width 0.5s ease-in-out; -o-transition: width 0.5s ease-in-out; transition: width 0.5s ease-in-out; } #search li input.searchBox:focus{ width:100%; } .socialicon { width: 50px; margin: 0 5px; box-sizing: border-box; } .foot { width: 25%; padding-right:15px; padding-bottom:15px; float: left; box-sizing: border-box; } .partnerBanner{ max-width: 140px; max-height: 140px; width:auto; } .credit { clear: both; padding-bottom:15px; } /* End Footer */