Team:Sheffield/Template:projectstyle.css

From 2014.igem.org

(Difference between revisions)
(Created page with "/* Author: W3layouts Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/ */ - →reset: h...")
 
Line 5: Line 5:
License URL: http://creativecommons.org/licenses/by/3.0/
License URL: http://creativecommons.org/licenses/by/3.0/
*/
*/
-
/* reset */
+
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
Line 30: Line 30:
/*end reset*/
/*end reset*/
body{
body{
-
font-family:'Istok Web', sans-serif;
+
font-family: 'Raleway', sans-serif;
-
background:#EDEEEE;
+
background:#1f253d;
 +
position:relative;
 +
background:url(../images/bg.jpg) no-repeat center fixed;
 +
    -webkit-background-size: cover;
 +
-moz-background-size: cover;
 +
-o-background-size: cover;
 +
background-size: cover;
 +
background-position: center;
}
}
.wrap{
.wrap{
-
width:1000px;
+
width:90%;
margin:0 auto;
margin:0 auto;
 +
transition:all .2s linear;
 +
-moz-transition:all .2s linear;/* firefox */
 +
-webkit-transition:all .2s linear; /* safari and chrome */
 +
-o-transition:all .2s linear; /* opera */
 +
-ms-transition:all .2s linear;
}
}
-
.header{
+
 
-
padding-top:15px;
+
/********* Main ************/
-
background:#FFF;
+
.main{
 +
padding:50px 0;
}
}
-
.header_top{
+
.grid1,.grid2,.grid3,.grid4 {
-
background:#C2D1D7;
+
float:left;
-
padding:10px 0;
+
margin-left:2%;
 +
-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
  -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
    -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
}
 +
.grid1{
 +
width:20%;
 +
margin-left:0;
 +
background:#eff9f6;
 +
}
 +
.grid2{
 +
width:29%;
 +
}
 +
.grid3{
 +
width:25%;
 +
}
 +
.grid4{
 +
width:20%;
}
}
 +
/** Logo **/
.logo{
.logo{
-
float:left;
+
padding:80px 20px 20px;
-
padding-top:5px;
+
background:#7CDD4E url(../images/quotes.png) no-repeat 170px -32px;
}
}
-
.menu{
+
.logo hr{
-
float:right;
+
display: inline-block;
-
margin-top:40px;
+
padding: 0px 25px;
-
margin-right: 15px;  
+
color: #FFF;
 +
border: 2px solid #DFF5D4;
}
}
-
.menu li{
+
.logo h1{
-
display: inline;
+
font-size:2.8em;
 +
font-weight:100;
 +
color:#FFF;
 +
text-transform:uppercase;
 +
}
 +
.logo-desc{
 +
padding:15px;
 +
background:#eff9f6;
}
}
-
.menu li a{
+
.logo-desc h2{
-
color:#124D6B;
+
color:#a7a7a7;
font-size:14px;
font-size:14px;
-
padding:11px 30px;
+
font-weight:600;
-
border-radius:0.2em;
+
}
}
-
.menu li a:hover{
+
.logo-desc p{
-
background:#FFF;
+
color:#888888;
 +
font-size:13px;
 +
text-align:right;
 +
padding-top:20px;
 +
line-height:1.5em;
}
}
-
.menu li.active a{
+
/** Project **/
 +
.project{
background:#FFF;
background:#FFF;
}
}
-
.header_bottom{
+
.project img{
-
background:url(../images/banner.jpg) no-repeat;
+
width:100%;
-
margin:0 15px;
+
-
position:relative;
+
-
padding-bottom:50px;
+
}
}
-
.header_bottom h2{
+
.project-details{
-
font-size:24px;
+
padding:20px 25px 20px 25px;
-
color:#EEE;
+
-
padding:80px 30px 5px;
+
-
font-weight:bold;
+
}
}
-
.header_bottom span{
+
.project-desc{
-
color:#288AB4;
+
float:left;
-
font-size:15px;
+
-
padding:30px;
+
-
font-weight:bold;
+
}
}
-
.header_bottom p{
+
.project-desc h3{
-
font-size:15px;
+
font-size:0.95em;
-
color:#FFF;
+
color:#666666;
-
padding:30px 30px;
+
text-transform:uppercase;
-
    width: 350px;
+
line-height:1.6em;
-
    line-height: 1.6em;
+
}
}
-
.header_bottom p a{
+
.project-desc h3 span{
-
position:absolute;
+
font-weight:800;
-
    bottom:30px;
+
-
    left:285px;
+
-
    font-size:18px;
+
-
    color: white;
+
}
}
-
.header_bottom p a:hover{
+
.project-articles{
-
text-decoration:underline;
+
float:right;
}
}
-
.header_bottom a img{
+
.project-articles li{
-
vertical-align:middle;
+
display:inline-block;
 +
margin-left:5px;
}
}
-
.main{
+
.project-articles li:first-child{
-
padding:30px 15px;
+
margin-left:0;
-
background:#FFF;
+
}
}
-
.content_top{
+
.project-articles li a{
-
position:relative;
+
width:38px;
 +
height:38px;
 +
display:block;
 +
background:url(../images/sprite-img.png) no-repeat;
}
}
-
.content_top h2{
+
.project-articles li.likes a{
-
font-size:30px;
+
background-position:-7px 0px;
-
color:#124D6B;
+
}
}
-
.content_top span{
+
.project-articles li.likes a:hover{
-
color:#2B6B12;
+
background-position:-10px -42px;
-
font-size:13px;
+
-
font-weight:bold;
+
}
}
-
.content_top p{
+
.project-articles li.comments-icon a{
-
font-size:13px;
+
background-position:-58px -2px;
-
color:#71797E;
+
-
padding:12px 0;
+
-
line-height:1.8em;
+
}
}
-
.content_top p a{
+
.project-articles li.comments-icon a:hover{
-
color:#740404;
+
background-position:-58px -43px;
-
font-size:13px;
+
-
position:absolute;
+
-
right:5px;
+
-
bottom:0px;
+
-
font-weight:bold;
+
}
}
-
.content_top p a:hover{
+
/********** Sign In to your account *********/
-
text-decoration:underline;
+
.grid4{
 +
background:#fffffe;
 +
text-align:center;
}
}
-
.content_top p img{
+
.heading{
-
vertical-align:middle;
+
margin-bottom:20px;
-
}
+
padding:20px;
-
.boxes{
+
border-bottom:1px solid #c8e3e0;
-
margin-top:30px;
+
}
-
background:url(../images/boxes_bg.jpg) no-repeat;
+
.sign_in h3{
-
padding-bottom:55px;
+
-
}
+
-
.box{
+
float:left;
float:left;
-
width:279px;
+
color:#888888;
-
position:relative;
+
font-size:20px;
-
padding:20px 22px;
+
text-transform: uppercase;
-
background:url(../images/box_line.gif) no-repeat 7px 20px;
+
font-weight:700;
}
}
-
.box_top{
+
.sign_in input[type="reset"]{
 +
float:right;
 +
color:#80c65e;
 +
font-size:13px;
 +
text-transform: uppercase;
 +
font-weight:700;
 +
background:none;
 +
border:none;
 +
outline:none;
 +
margin: 0;
 +
    padding: 0;
 +
    font-family: 'Raleway', sans-serif;
 +
    cursor:pointer;
}
}
-
.box img{
+
.sign_in span{
-
float:left;
+
margin:15px 20px;
-
padding-top:5px;
+
    display:block; 
 +
}
 +
.sign_in input[type="text"],.sign_in input[type="password"]{
 +
padding:20px;
 +
    color:#afafaf;
 +
    font-size:0.85em;
 +
    background:#FFF; 
 +
    outline:none;
 +
    border:1px solid #c8e3e0;
 +
    margin:0px auto;
 +
    width:83%; 
 +
    -webkit-apperance:none;
 +
    font-family: 'Raleway', sans-serif;
 +
    transition: border-color 0.2s;
 +
-o-transition: border-color 0.2s;
 +
-ms-transition: border-color 0.2s;
 +
-moz-transition: border-color 0.2s;
 +
-webkit-transition: border-color 0.2s;
 +
text-transform:uppercase;
}
}
-
.box h2{
+
.sign_in input[type="text"]:hover,.sign_in input[type="text"]:focus,.sign_in input[type="password"]:hover,.sign_in input[type="password"]:focus{
-
float:left;
+
border-color:#AAE7DF;
-
font-size:22px;
+
-
color:#0F0F10;
+
-
padding:3px 5px;
+
}
}
-
.box h2 span{
+
.sign_in input[type="submit"]{
 +
padding:15px 0;
 +
display:block;
 +
width:100%;
 +
color:#FFF;
font-size:15px;
font-size:15px;
-
color:#2B6B12;
+
font-weight:600;
 +
text-transform:uppercase;
 +
cursor:pointer;
 +
border:none;
 +
outline:none;
 +
    background:#97e272;   
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
-webkit-apperance:none;
 +
font-family: 'Raleway', sans-serif;
}
}
-
.box p{
+
.sign_in input[type="submit"]:hover{
-
font-size:13px;
+
        background:#82DD55;
-
color:#3A5059;
+
-
line-height:1.8em;
+
-
padding-top:15px;
+
}
}
-
.box p a{
+
.sign_in p{
-
color:#740404;
+
margin-top:20px;
 +
color:#999;
font-size:13px;
font-size:13px;
-
position:absolute;
+
text-transform:uppercase;
-
right:25px;
+
padding-bottom:20px;
-
bottom:-20px;
+
-
font-weight:bold;
+
}
}
-
.box p a:hover{
+
.sign_in p a{
 +
font-size:1em;
 +
font-weight:600;
 +
color:#97e272;
 +
-webkit-transition: all 0.3s ease-in-out;
 +
-moz-transition: all 0.3s ease-in-out;
 +
-o-transition: all 0.3s ease-in-out;
 +
transition: all 0.3s ease-in-out;
 +
}
 +
.sign_in p a:hover{
 +
color;#82DD55;
text-decoration:underline;
text-decoration:underline;
}
}
-
.content_bottom{
+
/** Main Bottom **/
-
margin-top:35px;
+
.main-bottom{
 +
margin-top:30px;
}
}
-
.grid1{
+
.profile-grid{
-
float:left;
+
float:left;
-
width:308px;
+
width:63%;
}
}
-
.grid1 h3{
+
.profile{
-
font-size:25px;
+
background: #e2f5f4;
-
color:#124D6B;
+
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNlMmY1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjRmN2YzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
-
border-bottom:1px dotted #888;
+
background: -moz-linear-gradient(left,  #e2f5f4 46%, #f4f7f3 100%);
 +
background: -webkit-gradient(linear, left top, right top, color-stop(46%,#e2f5f4), color-stop(100%,#f4f7f3));
 +
background: -webkit-linear-gradient(left,  #e2f5f4 46%,#f4f7f3 100%);
 +
background: -o-linear-gradient(left,  #e2f5f4 46%,#f4f7f3 100%);
 +
background: -ms-linear-gradient(left,  #e2f5f4 46%,#f4f7f3 100%);
 +
background: linear-gradient(to right,  #e2f5f4 46%,#f4f7f3 100%);
 +
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f5f4', endColorstr='#f4f7f3',GradientType=1 );
 +
-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
  -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
    -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
}
-
.grid1 form{
+
.profile-img img{
-
margin-top:50px;
+
display:block;
 +
width:100%;
}
}
-
.grid1 input[type="text"]{
+
.profile-details{
-
padding:4px;
+
padding:0 30px 30px 30px;
-
font-size:12px;
+
-
width:300px;
+
-
border: 1px solid rgb(223, 217, 217);
+
-
color:#71797E;
+
-
outline: none;
+
}
}
-
.grid1 textarea{
+
.profile-desc{
-
width:300px;
+
float:left;
-
padding:5px;
+
position:relative;
-
font-size:12px;
+
width:65%;
-
height:135px;
+
-
    margin:8px 0;
+
-
    border: 1px solid rgb(223, 217, 217);
+
-
    color:#71797E;
+
-
    resize:none;
+
-
    font-family:'Istok Web', sans-serif;
+
-
    outline: none;
+
}
}
-
.grid1 input[type="submit"]{
+
.profile-pic{
-
margin-top:15px;
+
margin-top:-40px;
-
color:#FFF;
+
float:left;
-
border-radius: 4px;
+
-
box-shadow: #d07400 0 2px 0px, rgba(0, 0, 0, 0.3) 0 3px 3px;
+
-
background: rgb(255,183,0);
+
-
background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
+
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
+
-
background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
-
background: -o-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
-
background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
-
background: linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
+
-
border: 1px solid #e59500;
+
-
font-size: 13px;
+
-
font-weight:bold;
+
-
padding: 6px 12px 6px;
+
-
cursor: pointer;
+
-
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+
}
}
-
.grid1 input[type="submit"]:hover{
+
.profile-pic img{
-
background: rgb(255,203,72);
+
display:inline-block;
-
    background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
+
padding:8%;
-
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
+
background:#eaf5f3;
-
    background: -webkit-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
-
    background: -o-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
-
    background: -ms-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
-
    background: linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
-
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
+
}
}
-
.grid1 input[type="submit"]:active{
+
.user-details{
-
box-shadow: #c46d00 0 2px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
+
-
}
+
-
.grid2{
+
float:left;
float:left;
-
width:610px;
+
margin-left:5%;
-
margin-left:50px;
+
margin-top:25px;
}
}
-
.grid2 img{
+
.user-details h2{
-
float:left;
+
font-size:1.3em;
 +
color:#666;
 +
text-transform:uppercase;
 +
font-weight:700;
}
}
-
.grid2_top_dta{
+
.user-details p{
-
 
+
font-size:12px;
 +
color:#888888;
 +
padding:3px 0;
}
}
-
.grid2 h3{
+
.user-details p span{
-
font-size:25px;
+
font-size:13px;
-
color:#124D6B;
+
}
}
-
.grid2_top h4 span{
+
.user-followers{
-
font-size:15px;
+
float:right;
-
color:#2B6B12;
+
margin-top:40px;
-
font-weight:bold;
+
}
}
-
.grid2 p{
+
.user-followers li{
 +
display:inline-block;
 +
margin-left:30px;
font-size:13px;
font-size:13px;
-
color:#71797E;
+
color:#888;
-
padding:10px 5px 10px;
+
line-height:1.6em;
-
line-height:1.8em;
+
text-align:center;
}
}
-
.grid2_bottom{
+
.user-followers li span{
-
+
font-weight:600;
 +
color:#666;
 +
font-size:1.5em;
 +
font-family: 'Open Sans', sans-serif;
}
}
-
.grid2_img{
+
.user-followers li:first-child{
-
float:left;
+
margin-left:0;
-
border:6px solid rgb(166, 166, 167);
+
-
    margin-top: 20px;
+
}
}
-
.grid2_list{
+
.profile-bottom{
-
float:left;
+
margin-top:40px;
-
width:418px;
+
}
}
-
.grid2_list li{
+
/*  GRID OF THREE  ============================================================================= */
-
font-size:13px;
+
.section {
-
color:#222;
+
clear: both;
-
padding:13px 0 0;
+
padding: 0px;
-
border-bottom:1px dotted #888;
+
margin: 0px;
-
list-style-image:url(../images/bullet.gif);
+
-
margin-left:40px;
+
-
vertical-align:top;
+
}
}
-
.footer{
+
.group:before,
-
padding:20px 0px;
+
.group:after {
-
background:#C2D1D7;
+
    content:"";
 +
    display:table;
}
}
-
.footer_nav{
+
.group:after {
-
float:left;
+
    clear:both;
}
}
-
.footer_nav li{
+
.group {
-
display:inline;
+
    zoom:1;
}
}
-
.footer_nav li a{
+
.col_1_of_3{
-
padding:0 15px;
+
display: block;
-
color:#124D6B;
+
float:left;
-
font-size:13px;
+
margin:0% 0 0% 1.6%;
 +
background: #e1f5f3;
}
}
-
.footer_nav ul li:nth-child(1),.footer_nav ul li:nth-child(2),.footer_nav ul li:nth-child(3),.footer_nav ul li:nth-child(4),.footer_nav ul li:nth-child(5){
+
.col_1_of_3:first-child { margin-left: 0; }
-
border-right:1px solid #124D6B;
+
 
 +
.span_1_of_3 {
 +
width:32.2%;
 +
padding:5.6% 0;
 +
text-transform:uppercase;
 +
text-align:center;
 +
-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
  -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
    -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
}
-
.footer_nav li a:hover{
+
.span_1_of_3  h3{
-
text-decoration:underline;
+
color:#666;
 +
font-size:14px;
 +
font-weight:700;
 +
font-family:'Open Sans', sans-serif;
}
}
-
.copy_right{
+
.span_1_of_3  p  {
-
float:right;
+
font-size:0.85em;
-
margin-right:15px;
+
color: #888;
 +
padding:5px 0;
 +
margin-top:26px;
}
}
-
.copy_right p{
+
 
-
font-size:12px;
+
/** Comments Section **/
-
color:#222;
+
.comments{
 +
float:left;
 +
width:35%;
 +
margin-left:2%;
 +
background:#FFF;
 +
-webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
  -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
    -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03);
 +
        box-shadow:0px 3px rgba(1, 1, 1, 0.03);
}
}
-
.copy_right a{
+
.comments h2{
-
font-size:12px;
+
color: #888;
-
color:#000;
+
font-size:18px;
 +
text-transform: uppercase;
 +
font-weight: 700;
 +
padding:20px;
}
}
-
.copy_right a:hover{
+
.comment-area{
-
color:#0B4963;
+
background:#fcfaf5;
-
text-decoration: underline;
+
padding:0 20px 20px 50px;
 +
border-top:1px solid #c6e2df;
}
}
-
/* about us */
+
.comment-area li {
-
.grid_bottom p{
+
display:block;
-
font-size:13px;
+
padding:15px 0;
-
color:#71797E;
+
border-bottom:1px solid #c6e2df;
-
padding:10px 0;
+
background:url(../images/line.png) repeat-y ;
-
line-height:1.8em;
+
}
}
-
.grid2_about{
+
.comment-area li.subchild {
-
padding-bottom:10px;
+
border-bottom:none;
 +
padding-bottom:0;
}
}
-
.grid2_top_img{
+
.commnet-user{
float:left;
float:left;
-
padding-right:5px;
+
width:14%;
 +
margin-left:-30px;
}
}
-
.grid2_top_data{
+
.commnet-user img{
-
 
+
display:block;
}
}
-
.grid2_about h3{
+
.commnet-desc{
-
font-size:25px;
+
float:left;
-
color:#124D6B;
+
margin-left:3%;
-
}
+
width:89%;
-
.grid2_about h4{
+
-
margin-top:-20px;
+
}
}
-
.grid2_about h4 span{
+
.commnet-desc h3{
font-size:15px;
font-size:15px;
-
color:#2B6B12;
+
color:#666;
-
font-weight:bold;
+
text-transform:uppercase;
-
margin-left:60px;
+
font-weight:700;
 +
display:inline-block;
}
}
-
/* services */
+
.commnet-desc span.time{
-
.grid2_serv{
+
font-size:12px;
-
padding-bottom:10px;
+
color:#888;
 +
padding-left:10px;
}
}
-
.grid2_top_img{
+
.commnet-desc p{
-
float:left;
+
font-size:12px;
-
padding-right:5px;
+
color:#666666;
 +
line-height:1.6em;
 +
padding:8px 0;
 +
font-weight:500;
}
}
-
.grid2_top_data{
+
.reply-links li{
-
 
+
display:inline-block;
 +
margin-left:10px;
 +
padding:0;
 +
border:none;
 +
background:none;
}
}
-
.grid2_srev h3{
+
.reply-links li:first-child{
-
font-size:25px;
+
margin-left:0;
-
color:#124D6B;
+
}
}
-
.grid2_serv h4{
+
.reply-links li a{
-
margin-top:-20px;
+
color:#1e73b5;
 +
font-size:11px;
 +
font-weight:600;
 +
text-transform:uppercase;
}
}
-
.grid2_serv h4 span{
+
.reply-links li a:hover{
-
font-size:15px;
+
text-decoration:underline;
-
color:#2B6B12;
+
-
font-weight:bold;
+
-
margin-left:52px;
+
}
}
-
.Services_content{
+
.subchilds{
-
padding:35px 15px 20px;
+
padding-left:10%;
-
background:#FFF;
+
border-top:1px solid #c6e2df;
 +
margin-top:20px;
}
}
-
.service1{
+
.subchilds li{
-
float:left;
+
background:none;
}
}
-
.services h4{
+
.subchilds .commnet-user{
-
font-size:18px;
+
margin-left:0;
-
color:#71787E;
+
-
border-bottom:1px dotted #888;
+
}
}
-
.serv_img{
+
.subchilds .commnet-desc{
-
float:left;
+
width:83%;
-
padding-top:10px;
+
}
}
-
.serv_data{
+
.reply{
-
float:left;
+
display:block;
-
width: 225px;
+
padding:20px;
-
    margin-top: -5px;
+
background:#FCFAF5;
-
    padding-left: 5px;  
+
padding-top:0;
}
}
-
.serv_data p{
+
.reply a{
-
font-size:13px;
+
  border:1px solid #c6e2df;
-
color:#71797E;
+
  padding:14px;
-
line-height:1.8em;
+
  font-size:13px;
 +
  color:#666;
 +
  text-transform:uppercase;
 +
  font-weight:700;
 +
  text-align:center;
 +
  display:block;
 +
  background:#FFF;
 +
  -webkit-transition: all 0.3s ease-out;
 +
-moz-transition: all 0.3s ease-out;
 +
-ms-transition: all 0.3s ease-out;
 +
-o-transition: all 0.3s ease-out;
 +
transition: all 0.3s ease-out;
}
}
-
.service2{
+
.reply a:hover{
-
float:right;
+
background:#C6E2DF;
 +
color:#619992;
}
}
-
/* contact */
+
/*----copy-right-----*/
-
.contact_form{
+
.copy-right{
-
+
text-align:center;
 +
padding:15px 0;
}
}
-
.contact_form h4{
+
.copy-right p{
-
font-size:18px;
+
color:#FFF;
-
color:#71797E;
+
font-size:1em;
-
padding-bottom:10px;
+
font-weight:700;
-
font-weight:bold;
+
}
}
-
.contact_form form{  
+
.copy-right p a{
 +
color:#038191;
 +
-webkit-transition: all 0.3s ease-out;
 +
-moz-transition: all 0.3s ease-out;
 +
-ms-transition: all 0.3s ease-out;
 +
-o-transition: all 0.3s ease-out;
 +
transition: all 0.3s ease-out;
}
}
-
.contact_form th{
+
.copy-right p a:hover{
-
font-size:13px;
+
color:#222;
-
color:#666;
+
text-decoration:underline;
-
text-align:right;
+
-
vertical-align:top;
+
-
padding:5px 0;
+
}
}
-
.contact_form td{
+
 
-
padding:2px 50px;
+
/**** Responsice Layout *****/
 +
@media only screen and (max-width: 1366px){
 +
.wrap{
 +
width:95%;
 +
}
 +
.logo{
 +
background-position:138px -30px;
 +
}
 +
.sign_in input[type="text"], .sign_in input[type="password"]{
 +
width:80%;
 +
}
}
}
-
.contact_form input[type="text"]{
+
@media only screen and (max-width: 1280px) {
-
font-size:12px;
+
.wrap{
-
color:#888;
+
width:95%;
-
width:250px;
+
}
-
padding:3px;
+
.logo h1{
-
border: 1px solid rgb(223, 217, 217);
+
font-size:2.5em;
-
font-family:'Istok Web', sans-serif;
+
}
-
outline: none;
+
}
}
-
.contact_form textarea{
+
@media all and (max-width: 1024px) {
-
font-size:12px;
+
.wrap {
-
color:#888;
+
width:95%;
-
width:260px;
+
}
-
padding:3px;
+
.profile-grid,.comments{
-
height:100px;
+
float:none;
-
border: 1px solid rgb(223, 217, 217);
+
width:100%;
-
font-family:'Istok Web', sans-serif;
+
}
-
resize: none;
+
.comments{
-
outline: none;
+
margin-left:0;
 +
margin-top:30px;
 +
}
 +
.commnet-user{
 +
width:7%;
 +
}
 +
.grid1{
 +
width:45%;
 +
}
 +
.grid2{
 +
width:53%;
 +
}
 +
.grid3{
 +
margin-left:0;
 +
width:42%;
 +
margin-top:20px;
 +
}
 +
.grid4{
 +
width:56%;
 +
margin-top:20px;
 +
}
 +
.project-details{
 +
padding:5px 25px 7px 25px;
 +
}
 +
.logo {
 +
      background-position: 308px -30px;
 +
    }
}
}
-
.contact_form input[type="submit"]{
+
@media all and (max-width:800px) {
-
margin:15px 75px;
+
.wrap {
-
border-radius: 4px;
+
width:95%;
-
box-shadow: #d07400 0 2px 0px, rgba(0, 0, 0, 0.3) 0 3px 3px;
+
}
-
background: rgb(255,183,0);
+
.logo {
-
background: -moz-linear-gradient(top, rgba(255,183,0,1) 0%, rgba(255,140,0,1) 100%);
+
background-position: 215px -30px;
-
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,183,0,1)), color-stop(100%,rgba(255,140,0,1)));
+
}
-
background: -webkit-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
.grid3{
-
background: -o-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
width:48%;
-
background: -ms-linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
}
-
background: linear-gradient(top, rgba(255,183,0,1) 0%,rgba(255,140,0,1) 100%);
+
.grid4{
-
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb700', endColorstr='#ff8c00',GradientType=0 );
+
width:50%;
-
border: 1px solid #e59500;
+
}
-
font-size: 13px;
+
.project-details{
-
color: #fff;
+
padding:15px 25px 27px 25px;
-
font-weight:bold;
+
}
-
padding: 7px 20px 9px;
+
.logo-desc p{
-
cursor: pointer;
+
padding-top:32px;
-
text-shadow: 0 1px 1px rgba(0,0,0,0.3);
+
}
}
}
-
.contact_form input[type="submit"]:hover{
+
@media all and (max-width:640px) {
-
background: rgb(255,203,72);
+
.wrap{
-
    background: -moz-linear-gradient(top,  rgba(255,203,72,1) 0%, rgba(255,156,35,1) 100%);
+
width:95%;
-
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,203,72,1)), color-stop(100%,rgba(255,156,35,1)));
+
}
-
    background: -webkit-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
.logo {
-
    background: -o-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
background-position: 145px -30px;
-
    background: -ms-linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
}
-
    background: linear-gradient(top,  rgba(255,203,72,1) 0%,rgba(255,156,35,1) 100%);
+
.profile-details{
-
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcb48', endColorstr='#ff9c23',GradientType=0 );
+
padding:0 15px 20px 15px;
 +
}
 +
.user-followers{
 +
margin-top:25px;
 +
}
 +
.profile-pic{
 +
width:25%;
 +
}
 +
.user-details{
 +
margin-top:15px;
 +
}
 +
.user-details{
 +
margin-left:10%;
 +
}
 +
.user-followers li{
 +
margin-left:10px;
 +
}
 +
.span_1_of_3{
 +
width:100%;
 +
}
 +
.col_1_of_3{
 +
margin-left:0;
 +
margin-top:20px;
 +
}
 +
.profile-bottom{
 +
margin-top:0;
 +
}
 +
.commnet-user{
 +
margin-left:-20px;
 +
}
 +
.main{
 +
padding:30px 0;
 +
}
}
}
-
.contact_form input[type="submit"]:active{
+
@media all and (max-width:480px) {
-
box-shadow: #c46d00 0 2px 0, rgba(0, 0, 0, 0.2) 0 6px 3px;
+
.wrap{
 +
width:95%;
 +
}
 +
.grid1,.grid2,.grid3,.grid4{
 +
width:100%;
 +
margin-left:0;
 +
margin-bottom:20px;
 +
}
 +
.logo {
 +
background-position: 315px -30px;
 +
}
 +
.profile-desc{
 +
width:100%;
 +
}
 +
.comment-area{
 +
padding:0 15px 20px 30px;
 +
}
 +
.commnet-user{
 +
width:12%;
 +
}
 +
}
 +
@media all and (max-width:320px) {
 +
.wrap{
 +
width:95%;
 +
}
 +
.logo {
 +
background-position: 215px -30px;
 +
padding:50px 20px 10px;
 +
}
 +
.profile-pic{
 +
margin-top:-10px;
 +
}
 +
.user-details{
 +
margin-left:-6px;
 +
}
 +
.user-details{
 +
margin-top:10px;
 +
}
 +
.profile-details{
 +
padding:0 10px 20px 10px;
 +
}
 +
.user-details{
 +
margin-left:5%;
 +
}
 +
.user-details h2{
 +
font-size:1em;
 +
}
 +
.profile-pic img{
 +
padding:5%;
 +
}
 +
.profile-pic{
 +
width:15%;
 +
}
}
}

Latest revision as of 13:42, 7 October 2014

/* Author: W3layouts Author URL: http://w3layouts.com License: Creative Commons Attribution 3.0 Unported License URL: http://creativecommons.org/licenses/by/3.0/

  • / 
/* reset */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,dl,dt,dd,ol,nav ul,nav li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;} article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} ol,ul{list-style:none;margin:0;padding:0;} blockquote,q{quotes:none;} blockquote:before,blockquote:after,q:before,q:after{content:;content:none;} table{border-collapse:collapse;border-spacing:0;} /* start editing from here */ a{text-decoration:none;} .txt-rt{text-align:right;}/* text align right */ .txt-lt{text-align:left;}/* text align left */ .txt-center{text-align:center;}/* text align center */ .float-rt{float:right;}/* float right */ .float-lt{float:left;}/* float left */ .clear{clear:both;}/* clear float */ .pos-relative{position:relative;}/* Position Relative */ .pos-absolute{position:absolute;}/* Position Absolute */ .vertical-base{ vertical-align:baseline;}/* vertical align baseline */ .vertical-top{ vertical-align:top;}/* vertical align top */ .underline{ padding-bottom:5px; border-bottom: 1px solid #eee; margin:0 0 20px 0;}/* Add 5px bottom padding and a underline */ nav.vertical ul li{ display:block;}/* vertical menu */ nav.horizontal ul li{ display: inline-block;}/* horizontal menu */ img{max-width:100%;} /*end reset*/ body{ font-family: 'Raleway', sans-serif; background:#1f253d; position:relative; background:url(../images/bg.jpg) no-repeat center fixed; 

   -webkit-background-size: cover;

-moz-background-size: cover; -o-background-size: cover; background-size: cover; background-position: center; } .wrap{ width:90%; margin:0 auto; transition:all .2s linear; -moz-transition:all .2s linear;/* firefox */ -webkit-transition:all .2s linear; /* safari and chrome */ -o-transition:all .2s linear; /* opera */ -ms-transition:all .2s linear; }

/********* Main ************/ .main{ padding:50px 0; } .grid1,.grid2,.grid3,.grid4 { float:left; margin-left:2%; -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .grid1{ width:20%; margin-left:0; background:#eff9f6; } .grid2{ width:29%; } .grid3{ width:25%; } .grid4{ width:20%; } /** Logo **/ .logo{ padding:80px 20px 20px; background:#7CDD4E url(../images/quotes.png) no-repeat 170px -32px; } .logo hr{ display: inline-block; padding: 0px 25px; color: #FFF; border: 2px solid #DFF5D4; } .logo h1{ font-size:2.8em; font-weight:100; color:#FFF; text-transform:uppercase; } .logo-desc{ padding:15px; background:#eff9f6; } .logo-desc h2{ color:#a7a7a7; font-size:14px; font-weight:600; } .logo-desc p{ color:#888888; font-size:13px; text-align:right; padding-top:20px; line-height:1.5em; } /** Project **/ .project{ background:#FFF; } .project img{ width:100%; } .project-details{ padding:20px 25px 20px 25px; } .project-desc{ float:left; } .project-desc h3{ font-size:0.95em; color:#666666; text-transform:uppercase; line-height:1.6em; } .project-desc h3 span{ font-weight:800; } .project-articles{ float:right; } .project-articles li{ display:inline-block; margin-left:5px; } .project-articles li:first-child{ margin-left:0; } .project-articles li a{ width:38px; height:38px; display:block; background:url(../images/sprite-img.png) no-repeat; } .project-articles li.likes a{ background-position:-7px 0px; } .project-articles li.likes a:hover{ background-position:-10px -42px; } .project-articles li.comments-icon a{ background-position:-58px -2px; } .project-articles li.comments-icon a:hover{ background-position:-58px -43px; } /********** Sign In to your account *********/ .grid4{ background:#fffffe; text-align:center; } 

.heading{
	margin-bottom:20px;
	padding:20px;
	border-bottom:1px solid #c8e3e0;
}

.sign_in h3{ float:left; color:#888888; font-size:20px; text-transform: uppercase; font-weight:700; } .sign_in input[type="reset"]{ float:right; color:#80c65e; font-size:13px; text-transform: uppercase; font-weight:700; background:none; border:none; outline:none; margin: 0; 

   padding: 0;
   font-family: 'Raleway', sans-serif;
   cursor:pointer;

} .sign_in span{ margin:15px 20px; 

   display:block;   
}

.sign_in input[type="text"],.sign_in input[type="password"]{ padding:20px; 

   color:#afafaf;
   font-size:0.85em;
   background:#FFF;   
   outline:none;
   border:1px solid #c8e3e0;
   margin:0px auto;
   width:83%;  
   -webkit-apperance:none;
   font-family: 'Raleway', sans-serif;
    transition: border-color 0.2s;

-o-transition: border-color 0.2s; -ms-transition: border-color 0.2s; -moz-transition: border-color 0.2s; -webkit-transition: border-color 0.2s; text-transform:uppercase; } .sign_in input[type="text"]:hover,.sign_in input[type="text"]:focus,.sign_in input[type="password"]:hover,.sign_in input[type="password"]:focus{ border-color:#AAE7DF; } .sign_in input[type="submit"]{ padding:15px 0; display:block; width:100%; color:#FFF; font-size:15px; font-weight:600; text-transform:uppercase; cursor:pointer; border:none; outline:none; 

   background:#97e272;

-webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; -webkit-apperance:none; font-family: 'Raleway', sans-serif; } .sign_in input[type="submit"]:hover{ 

       background:#82DD55;

} .sign_in p{ margin-top:20px; color:#999; font-size:13px; text-transform:uppercase; padding-bottom:20px; } .sign_in p a{ font-size:1em; font-weight:600; color:#97e272; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; } .sign_in p a:hover{ color;#82DD55; text-decoration:underline; } /** Main Bottom **/ .main-bottom{ margin-top:30px; } .profile-grid{ 

float:left;
width:63%;

} .profile{ background: #e2f5f4; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSI0NiUiIHN0b3AtY29sb3I9IiNlMmY1ZjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjZjRmN2YzIiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==); background: -moz-linear-gradient(left, #e2f5f4 46%, #f4f7f3 100%); background: -webkit-gradient(linear, left top, right top, color-stop(46%,#e2f5f4), color-stop(100%,#f4f7f3)); background: -webkit-linear-gradient(left, #e2f5f4 46%,#f4f7f3 100%); background: -o-linear-gradient(left, #e2f5f4 46%,#f4f7f3 100%); background: -ms-linear-gradient(left, #e2f5f4 46%,#f4f7f3 100%); background: linear-gradient(to right, #e2f5f4 46%,#f4f7f3 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2f5f4', endColorstr='#f4f7f3',GradientType=1 ); -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .profile-img img{ display:block; width:100%; } .profile-details{ padding:0 30px 30px 30px; } .profile-desc{ float:left; position:relative; width:65%; } .profile-pic{ margin-top:-40px; float:left; } .profile-pic img{ display:inline-block; padding:8%; background:#eaf5f3; } .user-details{ float:left; margin-left:5%; margin-top:25px; } .user-details h2{ font-size:1.3em; color:#666; text-transform:uppercase; font-weight:700; } .user-details p{ font-size:12px; color:#888888; padding:3px 0; } .user-details p span{ font-size:13px; } .user-followers{ float:right; margin-top:40px; } .user-followers li{ display:inline-block; margin-left:30px; font-size:13px; color:#888; line-height:1.6em; text-align:center; } .user-followers li span{ font-weight:600; color:#666; font-size:1.5em; font-family: 'Open Sans', sans-serif; } .user-followers li:first-child{ margin-left:0; } .profile-bottom{ margin-top:40px; } /* GRID OF THREE ============================================================================= */ .section { clear: both; padding: 0px; margin: 0px; } .group:before, .group:after { 

   content:"";
   display:table;

} .group:after { 

   clear:both;

} .group { 

   zoom:1;

} .col_1_of_3{ display: block; float:left; margin:0% 0 0% 1.6%; background: #e1f5f3; } .col_1_of_3:first-child { margin-left: 0; }

.span_1_of_3 { width:32.2%; padding:5.6% 0; text-transform:uppercase; text-align:center; -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .span_1_of_3 h3{ color:#666; font-size:14px; font-weight:700; font-family:'Open Sans', sans-serif; } .span_1_of_3 p { font-size:0.85em; color: #888; padding:5px 0; margin-top:26px; }

/** Comments Section **/ .comments{ float:left; width:35%; margin-left:2%; background:#FFF; -webkit-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -moz-box-shadow:0px 3px rgba(1, 1, 1, 0.03); -o-box-shadow:0px 3px rgba(1, 1, 1, 0.03); box-shadow:0px 3px rgba(1, 1, 1, 0.03); } .comments h2{ color: #888; font-size:18px; text-transform: uppercase; font-weight: 700; padding:20px; } .comment-area{ background:#fcfaf5; padding:0 20px 20px 50px; border-top:1px solid #c6e2df; } .comment-area li { display:block; padding:15px 0; border-bottom:1px solid #c6e2df; background:url(../images/line.png) repeat-y ; } .comment-area li.subchild { border-bottom:none; padding-bottom:0; } .commnet-user{ float:left; width:14%; margin-left:-30px; } .commnet-user img{ display:block; } .commnet-desc{ float:left; margin-left:3%; width:89%; } .commnet-desc h3{ font-size:15px; color:#666; text-transform:uppercase; font-weight:700; display:inline-block; } .commnet-desc span.time{ font-size:12px; color:#888; padding-left:10px; } .commnet-desc p{ font-size:12px; color:#666666; line-height:1.6em; padding:8px 0; font-weight:500; } .reply-links li{ display:inline-block; margin-left:10px; padding:0; border:none; background:none; } .reply-links li:first-child{ margin-left:0; } .reply-links li a{ color:#1e73b5; font-size:11px; font-weight:600; text-transform:uppercase; } .reply-links li a:hover{ text-decoration:underline; } .subchilds{ padding-left:10%; border-top:1px solid #c6e2df; margin-top:20px; } .subchilds li{ background:none; } .subchilds .commnet-user{ margin-left:0; } .subchilds .commnet-desc{ width:83%; } .reply{ display:block; padding:20px; background:#FCFAF5; padding-top:0; } .reply a{ 

  	border:1px solid #c6e2df;
  	padding:14px;
  	font-size:13px;
  	color:#666;
  	text-transform:uppercase;
  	font-weight:700;
  	text-align:center;
  	display:block;
  	background:#FFF;
  	-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .reply a:hover{ background:#C6E2DF; color:#619992; } /*----copy-right-----*/ .copy-right{ text-align:center; padding:15px 0; } .copy-right p{ color:#FFF; font-size:1em; font-weight:700; } .copy-right p a{ color:#038191; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out;

} .copy-right p a:hover{ color:#222; text-decoration:underline; }

/**** Responsice Layout *****/ @media only screen and (max-width: 1366px){ .wrap{ width:95%; } .logo{ background-position:138px -30px; } .sign_in input[type="text"], .sign_in input[type="password"]{ width:80%; } } @media only screen and (max-width: 1280px) { .wrap{ width:95%; } .logo h1{ font-size:2.5em; } } @media all and (max-width: 1024px) { .wrap { width:95%; } .profile-grid,.comments{ float:none; width:100%; } .comments{ margin-left:0; margin-top:30px; } .commnet-user{ width:7%; } .grid1{ width:45%; } .grid2{ width:53%; } .grid3{ margin-left:0; width:42%; margin-top:20px; } .grid4{ width:56%; margin-top:20px; } .project-details{ padding:5px 25px 7px 25px; } .logo { 

      background-position: 308px -30px;
   }

} @media all and (max-width:800px) { .wrap { width:95%; } .logo { background-position: 215px -30px; } .grid3{ width:48%; } .grid4{ width:50%; } .project-details{ padding:15px 25px 27px 25px; } .logo-desc p{ padding-top:32px; } } @media all and (max-width:640px) { .wrap{ width:95%; } .logo { background-position: 145px -30px; } .profile-details{ padding:0 15px 20px 15px; } .user-followers{ margin-top:25px; } .profile-pic{ width:25%; } .user-details{ margin-top:15px; } .user-details{ margin-left:10%; } .user-followers li{ margin-left:10px; } .span_1_of_3{ width:100%; } .col_1_of_3{ margin-left:0; margin-top:20px; } .profile-bottom{ margin-top:0; } .commnet-user{ margin-left:-20px; } .main{ padding:30px 0; } } @media all and (max-width:480px) { .wrap{ width:95%; } .grid1,.grid2,.grid3,.grid4{ width:100%; margin-left:0; margin-bottom:20px; } .logo { background-position: 315px -30px; } .profile-desc{ width:100%; } .comment-area{ padding:0 15px 20px 30px; } .commnet-user{ width:12%; } 

}

@media all and (max-width:320px) { .wrap{ width:95%; } .logo { background-position: 215px -30px; padding:50px 20px 10px; } .profile-pic{ margin-top:-10px; } .user-details{ margin-left:-6px; } .user-details{ margin-top:10px; } .profile-details{ padding:0 10px 20px 10px; } .user-details{ margin-left:5%; } .user-details h2{ font-size:1em; } .profile-pic img{ padding:5%; } .profile-pic{ width:15%; } }

Retrieved from "http://2014.igem.org/Team:Sheffield/Template:projectstyle.css"