login2.css

/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
    Created on : 08/11/2017, 2:30:34 PM
    Author     : tiena
*/

#top-containter{
    position : relative;
    height : 70vh;
    width : 100vw;
}

#cover-img{
    position: absolute;
    width : 100vw;
    z-index : -11;
}

#login-button{
    position: absolute;
    left : 20vw;
    top : 25vw;

}

#guide-login{
    width : 100vw;
    height : 10vh;
}

p#guide-content{
    color : white ;
    padding-left : 20vw;
    font-size : 1vw;
}

.fb-login-button{
    position: absolute;
    margin: auto;
    display: block
}

#manage{
    display:none;
}

#main {
    background-color : white;
    width : 100vw;
    min-height : 100vh;
    float : right;
    padding-top : 20vh;
}

#menu {
    color : white;
}

#logo {
    height: auto;
    line-height: 14vw;
    float: left;
    color : white;
    padding : 2vh;
}

#logo img{
    float: left;
    width: 9vh;
}
#logo span{
    line-height : 7vh;
    padding-left : 10px;
    font-size: 2.5vh;
    float: left;
}

#sidebar-title{
    color : white;
    text-align : center;
    padding-top : 2vh;
}

li.option {
    float : right;
    list-style-type : none;
    padding: 2vh;
}

li.option a {
    text-decoration: none;
    color : white;
}

li.notselected img {
    display : none;
}

h1#title-main {
    text-align : center;
}

h2#subtitle-main {
    margin : 10vh 0 0 3vw;
}

div.page-container-main {
    float : left;
    width : 15vw;
    margin : 3vw;
    overflow : visible;
}

img.page-avatar {
    border-radius : 100%;
    width : 100%;
    z-index : 100;
}

h3.page-name {
    padding-top : 2%;
    text-align : center;
    color : grey;
    font-size : 1.5vw;
}

div.page-container-main:hover {
    background-color : lightblue;
    box-shadow: 0 2vw 2vw black;
    opacity:0.7;
    cursor: pointer;
    z-index : 100;
}

h1#title-main {
    text-align : center;
}

div#container-main {
    min-height : 100vh;
    height : auto;
}

div#page-container {
    width : 100%;
    overflow : auto;
}



div#one-page-container {
    float: left;
    width : 33vw;
    height : 100%;
    background-color : lightblue;
    margin-left : 3vw;
    border-radius : 100%;
}

div#one-page-info {
    float : left;
    clear : right;
    width : 33vw;
    height : 20vw;
    padding-left : 5vw;
    overflow : auto;
}

img.page-avatar {
    border-radius : 100%;
    width : 100%;
    height : 100%;
    z-index : 100;
}

h3.page-name {
    padding-top : 2%;
    text-align : center;
    color : grey;
    font-size : 2vw;
}
RAW Paste Data

#main {
	background-color : white;
	width : 100vw;
	min-height : 100vh;
	float : right;
	padding : 2vh 2vw 2vh 2vw;
}
p#hello {
	color : white;
	padding : 1vh;
}



li.notselected img {
	display : none;
}


h1#title-main {
	text-align : center;
}

h2#subtitle-main {
	margin : 10vh 0 0 3vw;
}

div#container-main {
	padding-bottom : 10vh;
}

div#page-container {
    width : 100%;
    overflow : auto;
}

div#one-page-container {
	float: left;
	width : 33vw;
	height : 100%;
	background-color : lightblue;
	margin-left : 3vw;
	border-radius : 1em;
}

div#one-page-info {
	float : left;
	clear : right;
	width : 33vw;
	height : 20vw;
	padding-left : 5vw;
	overflow : auto;
}

#registered-pages , #unregistered-pages{
    margin-top : 10vw;
    min-height : 50vh;
    width : 100vw;
    height:auto;
    display :block;
    float : left;
    clear : both;
    overflow : none ;
}

img.page-avatar {
	border-radius : 100%;
	width : 100%;
	height : 100%;
	z-index : 100;
}

#register_form{
    display:none;
}

.topnav {
            background-color : #461B7E;
            /*background-color : #ddd;*/
              overflow: hidden;
/*            box-shadow: 1vw 0px 2vw #888888;  */
            height : auto;
            width: 100vw;
        }

        .topnav a {
          float: left;
          display: block;
          color: #f2f2f2;
          text-align: center;
          padding: 14px 16px;
          text-decoration: none;
          font-size: 14px;
        }

        .topnav a:hover {
          /*background-color: #ddd;*/
          color: black;
          text-decoration: underline;
        }

        .active {
          background-color: #4CAF50;
          color: white;
        }

        .topnav .icon {
          display: none;
        }

        @media screen and (max-width: 600px) {
          .topnav ul:not(:first-child) {display: none;}
          .topnav {
                position: fixed;
                height : auto;
          }
          .topnav a.icon {
            float: right;
            display: block;
          }
        }

        @media screen and (max-width: 600px) {
          .topnav.responsive {
                position: fixed;
                height : auto;
            }
          .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
          }
          .topnav.responsive ul {
            margin-top : 20%;
            float: left;
            display: block;
            text-align: center;
          }
          .topnav.responsive ul li {
            float: left;
            display: block;
            text-align: left;
            clear : both;
          }

        }

.page-name-responsive {
    display : none;
}

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

    div.all-page-container {
        width : 100%;
        margin : 2vw;
        clear: both;
    }

    div.all-page-container:hover {
        background-color : lightblue;
        box-shadow: 0 2vw 2vw black;
        opacity:0.7;
        cursor: pointer;
        z-index: 100;
    }

    div.page-container-main {
        float : left;
        width : 15vw;
        margin : 3vw;
        border-radius : 1em;
    }

    div.page-container-main:hover {
    /*border : 3px solid white;*/
    background-color : lightblue;
    box-shadow: 0 2vw 2vw black;
    opacity:0.7;
    cursor: pointer;
    z-index : 100;

}

    h3.page-name {
        display : none;
    }

    img.page-avatar{
        width : 70%;
    }

    .page-name-responsive {
        display : inline;
        float : left;
        clear : right;
    }

    .page-name-responsive-h {
        width : 50vw;
        font-size : 4vw;
        padding-top : 10%;
    }

}

/* ADD AT 21/11/2017 BY HOÀNG TÙNG */
.list-title {
    text-align : center;
    font-size: 3vw;
}