Template:INSA-UPS France/Style

1. category_tab{

 width:80%;
 margin:20px auto;
 border-spacing: 50px;
 table-layout: fixed; 

}

1. category_tab td{

 margin:auto;
 position:relative;
 background:white;  
 z-index:0;
 height:200px;
 text-align: center;

}

1. category_tab td:before {

 content: "";
 position: absolute;
 top: 0;  left: 0;  right: 0;  bottom: 0;
 z-index:-1;
 background: #2098d1;
 transform: scaleX(0);
 transform-origin: 0 50%;
 transition: transform .3s ease-out;

}

1. category_tab td:hover:before{transform: scaleX(1);}

1. category_tab td:hover{

 background-color: none;

}

1. category_tab a{

 display:block;
 width:100%;
 height:100%;
 font-family: Quicksand, sans-serif;
 text-decoration: none;
 color:black;
 position: relative;

}

1. category_tab a div{

 margin-top:20%;

}

/* GENERAL */

• {

 padding:0;
 margin:0;

} body,html{

 width:100%;
 height:100%;

} body{

 margin : 0;
 padding : 0;
 font-family: "Lato","Verdana",sans-serif;
 position:relative;
 background-color:#212121;

}

.backToTop{

 position:fixed;
 bottom:80px;
 right:80px;
 z-index: 10;

}

.backToTop i{

 color:#7D9C9F;

} .backToTop i:hover{

 color:#597072;
 text-shadow:2px 2px 0 #000000;

}

/* TITLES */

/* h1{

 color:#7D9C9F;
 text-align: center;
 position:relative;
 display:inline-block;

}

h1:after{

 display: block;
 height: 3px;
 width: 60%;
 content: "";
 background-color: #597072;
 margin:20px auto 0 auto;
 padding:0;

}*/

h2.pageTitle{ display:block; background-color: #AD235E; color:#e6f2f2; font-size:50px; font-family: Lobster, Arial, sans-serif; text-shadow: 2px 2px #7D9C9F; font-weight: bold;

 text-align: center;
 padding:10px;

}

.article_container h3, h3{

 padding:20px;
 color:#212121;
 font-weight: normal;
 font-size:20pt;
 border-bottom:dashed 1px grey;
 font-family: Quicksand, sans-serif;
 margin-bottom: 10px;

}

h4{

 margin-top: 8px;

}

/* SECTION */

section{

 height:100%;
 width:100%;
 display:inline-block;
 background:fixed;
   -moz-background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
   -webkit-background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
   -o-background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
   -ms-background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
 background-image: linear-gradient(to top, #fff1eb 0%, #ace0f9 100%);
 min-height:500px;
     

}

.container_section{

 width:100%;
 min-height:500px;
 margin:0 auto;
 /*padding-bottom: 200px;*/
 

}

/* ARTICLES */

.article_container{

 position:relative;
 background:white;
 width:70%;
 margin:80px 5% 50px auto;
   -webkit-box-shadow: 10px 10px 2px #aabbcc;
   -moz-box-shadow: 10px 10px 2px #aabbcc;
   -o-box-shadow: 10px 10px 2px #aabbcc;
   -ms-box-shadow: 10px 10px 2px #aabbcc;
 box-shadow: 10px 10px 2px #aabbcc;
 overflow: auto;

}

.article_container.no_aside{

 margin:80px auto 80px auto;

}

.article_offset::before{

 display:block;
 content:" ";
 height: 50px;      
 margin-top: -50px;
 background:none;

}

article{

 padding:20px 50px;

}

article p{

 text-align: justify;
 text-indent:20px;
 line-height: 1.5em;
 font-family: Scope One, serif;
 margin-bottom:15px;

}

.left{

 float:left;
 margin-right:20px;

}

.right{

 float:right;
 margin-left:20px;

}

figcaption{

 text-align: center;

}

/* ASIDE NAV */

/* When can move */ aside.can_move{

 position:fixed;
 bottom:50px;
 top:50px;

}

/* When can't */ aside{

 position:absolute;
 top:580px;
 right:78%;

}

aside .aside_circle{

 margin:15px;
 vertical-align: middle;
 line-height: 20px;
 text-align: right;

}

aside .aside_circle a{

 color:black;
 text-decoration: none;
 color:rgba(13,13,13,0.5);
   -webkit-transition:all 0.7s;
   -moz-transition:all 0.7s;
   -o-transition:all 0.7s;
   -ms-transition:all 0.7s;
 transition:all 0.7s;

}

aside .aside_circle::after{

 content:"";
 display:inline-block;
 width:5px;
 height:5px;
 background-color:#7D9C9F;
 border-radius: 5px;
 text-indent:100px;
 margin-left:10px;
 vertical-align: middle;
   -webkit-transition:width 0.7s, height 0.7s; 
   -moz-transition:width 0.7s, height 0.7s; 
   -o-transition:width 0.7s, height 0.7s; 
   -ms-transition:width 0.7s, height 0.7s; 
 transition:width 0.7s, height 0.7s; 

}

.aside_circle.is-selected a{

 font-weight: bold;
 color:rgba(13,13,13,1);
   -webkit-transition:all 0.7s;
   -moz-transition:all 0.7s;
   -o-transition:all 0.7s;
   -ms-transition:all 0.7s;
 transition:all 0.7s;

}

.aside_circle.is-selected::after{

 width:12px;
 height:12px;
 background-color:#AD235E;
 border-radius: 12px;
   -webkit-transition:width 0.7s, height 0.7s;
   -moz-transition:width 0.7s, height 0.7s;
   -o-transition:width 0.7s, height 0.7s;
   -ms-transition:width 0.7s, height 0.7s;
 transition:width 0.7s, height 0.7s;

}

/* CAROUSEL */

.carousel{

 position:relative;
 overflow: hidden;
 margin-bottom:20px;

}

.w200{

 width:200px;
 height:150px;  

}

.w400{

 width:400px;
 height:300px;

}

.carousel img{

 width:100%;
 position:absolute;
 left:100%;
 z-index:20;

}

.carousel img.active, .carousel img.only{

 left:0;
 z-index:10;

}

.indicators{

 position:absolute;
 bottom:5px;
 left:0;
 right:0;
 text-align:center;
 z-index:30;

}

.indicators div{

 display:inline-block;
 border:solid white 1px;
 width:8px;
 height:8px;
 border-radius: 8px;

} .indicators .active{

 background:white;

}

/* RESPONSIVE */ @media screen and (max-width: 600px){ /*

   article{
     padding-top: 90px;
   }
   section{
     margin:0;
     padding:0;
   }

• /

}