Mobile CSS
@import url(http://css3.wdfiles.com/local--code/css:theme/1);
 
/** Blog Pages **/
 
#main-content {
    width: 700px;
    left: 0;
    margin: 0;
}
#page-title {
    width: 700px;
}
#page-content {
    padding: 35px 10px 10px 10px;
    width: 700px;
}
#page-options-container {
    width: 100%;
}
#side-bar {
    display: block;
    position: static;
    float: right;
    width: 230px;
    padding: 5px 10px;
    margin: 0 0 15px 10px;
}
#side-bar .sidebar-container {
    position: relative;
    display: block;
    width: 230px;
    right: 0px;
    background: #fff;
    padding: 0;
    margin: 0 0 30px 0px;
    -webkit-box-shadow: 0 0 4px #999;
    -moz-box-shadow: 0 0 4px #999;
    box-shadow: 0 0 4px #999;
    -webkit-transition: -webkit-box-shadow 110ms ease-out;
    border: 5px solid #ddd;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    border-top: none;
}
#side-bar .sidebar-container:hover {
    -webkit-box-shadow: 0 0 8px #555;
}
#side-bar .sidebar-container h5 {
    display: none;
}
#side-bar h3 {
    font-family: 'Qlassik', Helvetica;
    position: relative;
    margin-left: -8px;
    margin-top: 0px;
    margin-bottom: 10px;
    width: 236px;
    background: #3198dd;
    color: white;
    padding: 0 5px;
    height: 35px;
    line-height: 1.7;
    font-size: 22px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.6);
    -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    box-shadow: 0px 0px 5px rgba(0,0,0,0.5);
    z-index: 30;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
}
#side-bar .sidebar-container.blue h3 {
    background-color: #3bb7f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);    
}
#side-bar .sidebar-container.gray h3 {
    background-color: #464646;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top, #6a6b6b, #464646);
}
#side-bar .sidebar-container.green h3 {
    background-color: #85c91a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9ded20), to(#85c91a));
    background-image: -moz-linear-gradient(top, #9ded20, #85c91a);
}
#side-bar .sidebar-container.yellow h3 {
    background-color: #dbc70d;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0db14), to(#dbc70d));
    background-image: -moz-linear-gradient(top, #f0db14, #dbc70d);
}
#side-bar .sidebar-container.red h3 {
    background-color: #c61c06;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ec1e09), to(#c61c06));
    background-image: -moz-linear-gradient(top, #ec1e09, #c61c06);        
}
#side-bar .sidebar-container.enhance h3 {
    background-color: #3bb7f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);    
}
#side-bar .sidebar-container.enhance .image-container {
    padding: 0;
}
#side-bar .sidebar-container.enhance .image {
    -webkit-transform: none;
    opacity: 0.9;
    -webkit-border-radius: 4px;
}
#side-bar .sidebar-container p {
    padding: 10px 5px;
}
#side-bar .sidebar-container.fine-print p {
    font-size: 85%;
    text-align: center;
    margin-top: -10px;
    padding: 10px 5px 0 5px;
}
#side-bar .sidebar-container.fine-print a {
    color: #39c;
}
#side-bar .list-pages-box {
    position: relative;
    top: -6px;
    padding: 0;
    margin: 0;
    margin-bottom: -11px;
}
#side-bar ul {
    list-style-type: none;
    padding: 0;
    text-indent: 10px;
    margin: 0;
    font-size: 92%;
}
#side-bar ul li {
    height: 30px;
    line-height: 15px;
    text-indent: 0px;
    padding: 5px 5px;
    display: table-cell;
    width: 220px;
    vertical-align: middle;
    border-top: 1px solid #ddd;
}
#side-bar a {
    color: #2c3641;
}
#side-bar a .image, #side-bar div p a.wiki-standalone-button {
    -webkit-transform: scale(1) rotate(-5deg);
    -webkit-transition-property: -webkit-transform, opacity;
    -webkit-transition-duration: 0.5s, 0.5s;
    -webkit-transition-timing-function: ease, ease;
    opacity: 0.85;
    margin-right: 10px;
}
#side-bar a .image:hover, #side-bar div p a.wiki-standalone-button:hover {
    -webkit-transform: scale(1.4) rotate(5deg);
    opacity: 1;
}
 
#side-bar div a:hover {
    border: none;
    color: #3198dd;
}
#side-bar div {
    margin-top: -5px;
    margin-bottom: 5px;
}
#side-bar div p {
    margin-bottom: 5px;
}
 
#side-bar .sidebar-container.about-header {
    position: relative;
    display: block;
    margin: 0;
    margin-bottom: 30px;
    right: -5px;
    z-index: 40;
    height: 40px;
    background: transparent;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}
#side-bar .sidebar-container.about-header h3 {
    background-color: #85c91a;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9ded20), to(#85c91a));
    background-image: -moz-linear-gradient(top, #9ded20, #85c91a);
    margin-bottom: 0;
}
#side-bar .sidebar-container.about-header .sidebar-container.about {
    position: absolute;
    height: 0px;
    width: 230px;
    -webkit-transition: all 1.5s ease;
    z-index: 10;
    right: -5px;    
    overflow: hidden;
    margin: 0;
    top: 25px;
    background-color: #424242;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top, #6a6b6b, #424242);
    border-top: 5px solid #ddd;
}
#side-bar .sidebar-container.about-header:hover .sidebar-container.about {
    height: 200px;
    width: 450px;
    -webkit-box-shadow: 0 0 30px #454545;
    -moz-box-shadow: 0 0 30px #454545;
    box-shadow: 0 0 30px #454545;
    font-size: 13px;
    line-height: 18px;
}
#side-bar .sidebar-container.about-header .sidebar-container.about p {
    margin-top: -10px;
    color: #efefef;
    font-size: 17px;
    line-height: 18px;
}
#side-bar .sidebar-container.about-header h3 .image {
    position: relative;
    float: right;
    top: 11px;
    right: 5px;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -webkit-transition: -webkit-transform 200ms linear;
}
#side-bar .sidebar-container.about-header:hover h3 .image {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
/* Sidebar Twitter Container */
#side-bar .sidebar-container.twitter h3:after {
    content: '\0a00';
    background: url(http://css3.wdfiles.com/local--files/css:files/twitter-bird32.png) no-repeat;
    display: inline-block;
    width: 32px;
    height: 32px;
    margin-left: 10px;
}
#side-bar .twitter-container {
    opacity: 1;
    -webkit-animation-name: opacity-load;
    -webkit-animation-duration: 3s;
    -webkit-animation-delay: 1.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-out;
}
 
/* Loading of RSS feed */
#extrac-div-2 {
background: transparent url(http://bmcenterprises.wdfiles.com/local--files/images/ajax-loader.gif) no-repeat center center;
visibility: hidden;
}
.wikidot-hybrid-module-loading {
    background: transparent url(http://bmcenterprises.wdfiles.com/local--files/images/ajax-loader.gif) no-repeat center center;
    padding: 20px;
}
 
/* Post Dates */
 
.post-header {
    width: 100%;
    height: 72px;
    margin: 5px 5px 0 0;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.5);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.5);
    box-shadow: 1px 1px 4px rgba(0,0,0, 0.5);
    background-color: #3bb7f5;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#3bb7f5), to(#39c));
    background-image: -moz-linear-gradient(top, #3bb7f5, #39c);
    overflow: hidden;
    -webkit-border-radius: 3px;
 
}
.post-title {
    position: relative;
    display: table-cell;
    width: 730px;
    vertical-align: middle;
    font-family: 'Qlassik', Helvetica;
    font-size: 34px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    height: 62px;
    line-height: 30px;
    text-shadow: #227db9 1px 1px 0px;
    overflow: hidden;
}
.post-title p {
    margin: 0;
}
.post-title a{
    color: white;
}
.post-title a:hover, .post-title a:focus {
    border: none;    
}
.post-date-container {
    float: left;
    margin: 0px 0px 0px 0px;
    height: 72px;
    width: 70px;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0, 0.5);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0, 0.5);
    box-shadow: 1px 1px 4px rgba(0,0,0, 0.5);
}
.post-date-day {
    background: #fff;
    height: 45px;
    display: block;
    font-size: 40px;
    text-align: center;
    line-height: 40px;
    color: #39c;
    font-weight: normal;
    font-family: 'Qlassik', Helvetica;
    border: 1px solid #39c;
    -webkit-border-top-left-radius: 3px;
}
.post-date-day p {
    margin: 0;
    padding-top: 3px;
}
.post-date-monthyear {
    background: #424242;
    height: 25px;
    font-size: 14px;
    text-align: center;
    line-height: 22px;
    display: block;
    color: #fff;
    font-weight: normal;
    background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#636565), to(#424242));
    background-image: -moz-linear-gradient(top, #636565, #424242);
    -webkit-border-bottom-left-radius: 3px;
}
.post-date-monthyear p {
    margin: 0;
}
.post-date-container-template {
    display: inline;
    width: 80px;
    margin: -5px -10px 5px 5px;
    float: right;    
}
.post-date-container-template .post-date-day {
    border-right: none;
}
 
/* Post headers for theme-related posts */
.post-header._bmc-theme {
    background-color: #dbc70d;
    background-image: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#f0db14), to(#dbc70d));
    background-image: -moz-linear-gradient(top, #f0db14, #dbc70d);
}
.post-header._bmc-theme .post-title {
    text-shadow: #978908 1px 1px 0;
}
.post-header._bmc-theme .post-date-day {
    border: 1px solid #e9d51e;
    color: #e9d51e;
}
/* Post headers for guide series posts */
.post-header._guide {
    background-color: #85c91a;
    background-image: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#9ded20), to(#85c91a));
    background-image: -moz-linear-gradient(top, #9ded20, #85c91a);
}
.post-header._guide .post-title {
    text-shadow: #689d15 1px 1px 0;
}
.post-header._guide .post-date-day {
    border: 1px solid #8bd020;
    color: #8bd020;
}
/* Post headers for Quickie posts */
.post-header._quickie {
    background-color: #434343;
    background-image: none;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#545454), to(#343434));
    background-image: -moz-linear-gradient(top, #545454, #343434);
}
.post-header._quickie .post-title {
    text-shadow: #222 1px 1px 0;
}
.post-header._quickie .post-date-day {
    border: 1px solid #444;
    color: #444;
}
 
/*******************
** Blog Related CSS **
 *******************/
 
/* Polaroid Images */
.polaroid-image  {
    width: 200px;
    border: 10px solid #fff;
    border-bottom: 20px solid #fff;
    background-color: white;
    -webkit-transform: rotate(3deg);
    -moz-transform: rotate(3deg);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 20px;
}
.polaroid-caption {
    padding-top: 5px;
    text-align: center;
}
 
.polaroid-image-animated-jump {
    width: 200px;
    border: 10px solid #fff;
    border-bottom: 20px solid #fff;
    background-color: white;
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale(1);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 20px;
}
.polaroid-image-animated-jump:hover {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale(1.1);
}
 
.polaroid-image-animated-final {
    width: 200px;
    border: 10px solid #fff;
    border-bottom: 20px solid #fff;
    background-color: white;
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale(1);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 20px;
    -webkit-transition: -webkit-transform 0.5s ease;
}
.polaroid-image-animated-final:hover {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale(1.1);
}
 
.polaroid-image-animated-rotate {
    width: 200px;
    border: 10px solid #fff;
    border-bottom: 20px solid #fff;
    background-color: white;
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale(1);
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
    margin: 20px;
    -webkit-transition: -webkit-transform 0.5s ease;
}
.polaroid-image-animated-rotate:hover {
    -webkit-transform: rotate(-3deg) scale(1.1);
    -moz-transform: rotate(-3deg) scale(1.1);
}
 
/* Corner Info */
.corner-info {
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 100;
    background: transparent;
    width: 120px;
    height: 120px;
}
.corner-info:hover {
    border: none;
}
/* Elegant Image Border */
.elegant-border {
    border: 6px solid white;
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    -webkit-transform: rotate(3deg);
    -webkit-transition: -webkit-transform 0.3s ease;
}
.elegant-border:hover {
    -webkit-transform: rotate(0deg);
}
.elegant-border-static {
    border: 6px solid white;
    -webkit-box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    -moz-box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}
 
/* Info Hovers */
.info-hover {
    display: inline;
    width: auto;
}
.info-hover p {
    margin: 0;
}
 
.info-hover .image {
    display: inline;
    margin: 0;
}
.info-hover span {
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: opacity 0.5s ease;
    position: absolute;
    display: inline;
    margin: 0;
    width: 180px;
    background: #FFF;
    border: 1px solid orange;
    color: #333;
    padding: 5px;
    overflow: hidden;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);    
}
.info-hover:hover span {
    opacity: 1;
    filter: alpha(opacity=100);
    position: absolute;
    display: inline;
    margin:0;
    width: 180px;
    background: #FFF;
    border: 1px solid orange;
    color: #333;
    padding: 5px;
    -webkit-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
    -moz-box-shadow: 1px 1px 4px rgba(0,0,0,0.5);
}
.info-hover:hover span p {
    margin-top: 0;
    padding: 0;
}
 
/** Advanced Tables **/
.table-header {
    background: #424242;
    background-image: -webkit-gradient(linear, 100% 0%, 100% 100%, from(#636565), to(#424242));
    background-image: -moz-linear-gradient(top, #636565, #424242);
    color: white;
    text-align: center;
}
.table-content {
    background: white;
    text-align: center;
    height: 25px;
}
.table-empty {
    border: none;
}
#page-content table tbody tr td {
    border: 1px solid #333;
}
#page-content table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* Ribboned Infobox */
 
.ribbon-infobox-container {
    position: relative;
    display: inline-block;
    margin: 0;
    padding: 0;
    width: auto;
}
.ribbon-infobox {
    width: 250px;
    background: #424242;
    padding: 10px 5px 5px 5px;
    margin:10px;
    position: relative;
    z-index: 90;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#6a6b6b), to(#424242));
    background-image: -moz-linear-gradient(top,#6a6a6a,#424242);
    color: #fff;
    box-sizing: 250px;
    font-size: 90%;
}
.ribbon-infobox h3 {
    position: relative;
    background: #3198dd;
    width: 270px;
    color: #fff;
    padding: 10px 5px;
    margin: 0;
    left: -15px;
    z-index: 100;
    -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    -moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    box-shadow: 0px 0px 3px rgba(0,0,0,0.55);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#33acfc), to(#3198dd));
    background-image: -moz-linear-gradient(top,#33acfc,#3198dd);
    font-size: 160%;
    text-align: center;
    text-shadow: #2187c8 0 -1px 1px;
    font-weight: bold;
}
 
.ribbon-infobox-container .triangle-l {
    border-color: transparent #2083c2 transparent transparent;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: -12px;
    top: 52px;
    z-index: 0; /* displayed under infobox */
}
.ribbon-infobox-container .triangle-r {
    border-color: transparent transparent transparent #2083c2;
    border-style:solid;
    border-width:13px;
    height:0;
    width:0;
    position: absolute;
    left: 266px;
    top: 52px;
    z-index: 0; /* displayed under infobox */
}
.ribbon-infobox a {
    color: #35b0ff;
    text-decoration: none;
    border-bottom: 1px dotted none;
}
.ribbon-infobox a:hover, .ribbon-infobox a:focus {
    text-decoration: none;
    border-bottom: 1px dotted #35b0ff;
}
 
/* MOBILE READY */
@media only screen and (max-device-width: 480px) {
 
#content-wrap, #header {
    width:400px;
}
#header h1, #login-status, #search-top-box {
    display: none;
}
#top-bar {
    position: absolute;
    left: 0;
    top: 20px;
    width: auto;
}
#top-bar ul li {
        padding: 10px 23px;
}
#side-bar {
    display: none;
}
#main-content {
    margin: 0;
    font-size: 105%;
}
div {float:none !important;}
 
html, body {
    background-color: #444;
    background-image: none;
    font-size: 1.1em;
}
#side-bar, .social, #search-top-box, #license-area,#top-bar, #login-status {
    display: none;
}
#container,#header,#main-content, #page-content, #page-title, #footer {
    max-width: 500px;
    min-width: 300px;
    width: auto;
}
.admin-panel {
    display: none !important;
}
}

Discussion

No comments yet…0 comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License