Mfc css
body {
font-family:"Segoe UI",Frutiger,"Frutiger Linotype","Dejavu Sans","Helvetica Neue",Arial,sans-serif;
font-size:20px;
line-height:1;
color:#fff;
background-position:top 0 left,bottom right 40px,top left;
background-repeat:no-repeat,no-repeat,repeat;
background-attachment:fixed;
padding:0;
background-image:url(http://i.imgur.com/U75fe1R.jpg);
-webkit-background-size:cover;
-moz-background-size:cover;
background-size:cover;
}
a,a:visited {
color:#386dff;
text-decoration:none;
}
a:hover,a:focus {
color:#005580;
text-decoration:underline;
}
ul {
padding:0;
margin:0;
list-style-type:none;
}
ol {
padding:0;
margin:0;
list-style-type:none;
}
.twocolumn {
-moz-column-count:2;
-webkit-column-count:2;
column-count:2;
}
/* ==========================================================================
Top Navagation
========================================================================== */
.navbar {
background-color:#386dff;
position:fixed;
left:0;
top:0;
height:40px;
width:100%;
z-index:500;
box-shadow:0 3px 20px 3px rgba(0,0,0,.8);
font-size:1rem;
line-height:1;
}
.nav {
width:940px;
margin:0 auto;
display:block;
}
.nav ul {
list-style-type:none;
padding:0;
margin:0;
overflow:hidden;
}
.nav li {
float:left;
}
.nav a:link,.nav a:visited {
display:block;
width:auto;
height:30px;
font-size:1.0625em;
color:#FFFFFF;
background-color:#386dff;
text-align:center;
padding:10px 20px 0;
text-decoration:none;
text-transform:uppercase;
}
.nav a:hover,.nav a:active {
background-color:#003300;
}
/* ==========================================================================
Classes for MFC Generated Elements
========================================================================== */
#header_bar,#footer_bar,#about_me_label,#profile_main_photo,#profile_header_container,#profile_about_me > div:nth-child(1) {
display:none;
}
#profile {
width:940px;
margin:600px auto -10px;
background:rgba(0,180,247,0.9) url(http://i.imgur.com/fOTUTf7.png) top center no-repeat;
/* box-shadow:0 0 10px 1px rgba(255,255,255,0.3); */
font-size:.875em;
line-height:1.25;
-webkit-border-radius:20px;
-moz-border-radius:20px;
border-radius:20px;
}
#profile_header {
padding:120px 0 0;
}
#profile_avatar {
padding:4px;
background-color:#fff;
border:1px solid #ccc;
border:1px solid rgba(0,0,0,0.2);
-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);
-moz-box-shadow:0 1px 3px rgba(0,0,0,0.1);
box-shadow:0 1px 3px rgba(0,0,0,0.1);
}
.profile_section {
border-spacing:0;
}
.profile_section .heading {
background:#386dff;
color:#fff;
height:40px;
font-size:1.065rem;
font-weight:normal;
padding:10px 0 0 15px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
margin-bottom:15px;
}
.profile_section_content {
z-index:auto;
}
#profile_about_me {
margin:20px 0;
}
#about_me_value {
display:block;
margin:0 auto 0 -20px;
}
img {
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
-webkit-box-shadow:0;
-moz-box-shadow:0;
box-shadow:0;
}
.img_radius_shadow {
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
-webkit-box-shadow:0;
-moz-box-shadow:0;
box-shadow:0;
}
#img_preview {
-webkit-border-radius:0;
-moz-border-radius:0;
border-radius:0;
-webkit-box-shadow:0;
-moz-box-shadow:0;
box-shadow:0;
}
.container {
display:block;
margin:0 0 0 20px;
}
.in_page_anchor {
padding-top:50px;
margin-top:-50px;
display:inline-block;
/* required for webkit browsers */
}
#profile_password_photo_galleries {
padding-top:45px;
margin-top:-45px;
display:inline-block;
/* required for webkit browsers */
}
.photo_gallery_previews {
text-align:center;
}
#meaning_life_label {
margin-top:15px;
}
/* ==========================================================================
Classes for Custom Content
========================================================================== */
.social-links {
margin:20px 0;
text-align:center;
}
.crazy-picts {
text-align:center;
margin:20px 0;
}
.crazy-picts img {
margin:0 1.25em;
height:180px;
}
.crazy-picts .caption {
font-size:1.125em;
font-weight:bold;
margin-bottom:5px;
}
.round {
border-radius:50%;
}
.about-me {
padding:0 20px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.about-me .header {
font-size:1.25rem;
font-weight:bold;
margin-top:20px;
margin-bottom:-10px;
}
.whats-new {
background-color:#ccc;
border-bottom:15px solid #990067;
margin-bottom:20px;
}
.goat-img {
margin-bottom:20px;
}
.turn-on-offs ul {
margin:10px 0;
}
.books img,.movies img {
margin:4px;
border:1px solid #666;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
/* ==========================================================================
Store
========================================================================== */
.store {
font-size:1rem;
line-height:1;
}
.store-header {
background:#990067;
color:#fff;
margin:auto;
height:40px;
font-size:1.065em;
padding:10px 0 0 15px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.store-list {
background-color:#ccc;
border:5px solid #ccc;
margin:auto;
height:432px;
overflow:auto;
}
.four-rows {
height:575px;
}
.store-footer {
background-color:#990067;
color:#fff;
margin:auto;
height:15px;
margin-bottom:20px;
}
.store-item {
width:49%;
height:135px;
margin:.5%;
float:left;
background-color:#ddd;
border-radius:8px;
padding-right:5px;
text-align:left;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
position:relative;
overflow:hidden;
}
.store-item .image {
width:40%;
height:100%;
position:absolute;
left:0;
top:0;
z-index:10;
}
.image img {
height:100%;
}
.store-item .desc {
width:59.7%;
height:100%;
background-color:#ddd;
position:absolute;
right:0;
top:0;
padding:0 5px;
z-index:20;
-moz-transition:.5s .5s ease-in-out;
-o-transition:.5s .5s ease-in-out;
-webkit-transition:.5s .5s ease-in-out;
transition:.5s .5s ease-in-out;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
}
.store-item:hover .desc {
background-color:rgba(128,128,128,.8);
color:#eee;
width:100%;
padding:0 40px;
}
.desc .title {
height:20px;
width:100%;
margin:7px 0 0;
font-size:1em;
font-weight:bold;
}
.desc-content {
height:81px;
width:100%;
overflow:hidden;
-ms-text-overflow:ellipsis;
-o-text-overflow:ellipsis;
text-overflow:ellipsis;
display:-webkit-box;
-webkit-line-clamp:5;
-webkit-box-orient:vertical;
}
.desc-content ul {
list-style-type:disc;
list-style-position:inside;
}
.desc-content li {
margin:2px;
font-size:.75em;
}
.desc-footer {
height:20px;
width:100%;
text-align:right;
padding-right:5px;
position:absolute;
bottom:5px;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
box-sizing:border-box;
z-index:30;
}
.item-tag {
font-size:.625em;
color:#fff;
background-color:#444;
padding:2px 10px;
border-radius:8px;
}
.store-list::-webkit-scrollbar {
-webkit-appearance:none;
width:12px;
height:12px;
}
.store-list::-webkit-scrollbar-thumb {
border-radius:8px;
border:2px solid white;
background-color:#666;
}
/* ==========================================================================
Media Queries
========================================================================== */