/* * Skeleton V1.2 * Copyright 2011, Dave Gamache * www.getskeleton.com * Free to use under the MIT license. * http://www.opensource.org/licenses/mit-license.php * 6/20/2012 */ /* Table of Content ================================================== #Site Styles #Page Styles #Media Queries #Font-Face */ /* #Site Styles ================================================== */ .fullcontainer{ position: absolute; width: 100%; margin: 0 auto; padding: 0; } .logo{position:absolute;top:20px;left:0px;z-index:100;opacity:1.0;filter:alpha(opacity=100);margin: 0 auto;padding: 0;} .menuitem, .menuselect{text-align: right;float: right;height:12px;padding:5px 49px 17px 0px; font-size: smaller; font-weight: 600; letter-spacing: 0.5px; text-decoration: none;text-transform: uppercase;} .zipitem, .menuselect{text-align: right;float: right;height:12px;padding:5px 49px 17px 0px; font-size: smaller; font-weight: 600; letter-spacing: 0.5px; text-decoration: none;text-transform: uppercase;} .menuselect{color:#92b5e9} .face {width:200px;} .social_icons img{width:14px; padding: 7px 7px 0px 0px; opacity:0.7;filter:alpha(opacity=70);} .tumblr_icon img{width:20px; padding: 7px 7px 0px 0px; opacity:0.6;filter:alpha(opacity=60);} .image_thumb { margin: 0px 3px 3px 3px} #grid {padding: 100px 0px 60px 0px} .inline_strong { word-spacing: 0.053em;font-weight: 600;font-size: 14px; line-height: 21px;} #name_plate {text-align:right;} #name_plate a{text-decoration: none;} .icon-heart{color: #e38d8d; font-size: smaller} #icon-large{font-size: 32px;} .icon-skype{color:rgb(29,175,236)} .icon-linkedin{color:rgb(20,148,189)} .icon-tumblr{color:rgb(68,105,134)} #tumblr h5{padding-top: 7px} .logo-link a{text-decoration: none;} .collectionTitle{padding-left: 164px;vertical-align:-37%;color:#92b5e9;} #collectionWord{text-transform: uppercase; font-weight: 600;padding-right:5px;} /* #Page Styles ================================================== */ #homepage { background: url(../img/bgpick.jpg) no-repeat top center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;} #gallerypage{background-color: #484c51} #infopage{background-color: #e8e8e8} #homemenu {position:absolute;top:20px;left:0px;z-index:80;width:100%;line-height:14px;height:28px;background:#000;opacity:0.2;filter:alpha(opacity=20);padding:7px 0 0 7px} #homemenu a {color:#FFF} #homemenu a:hover{color:#0379ff; text-decoration: none;} #pagemenu {position:absolute;top:20px;left:0px;z-index:80;width:100%;line-height:14px;height:28px;background:#D4D4D4;padding:7px 0 0 7px} #pagemenu a {color:#FFF} #pagemenu a:hover{color:#999; text-decoration: none;} #gallerymenu {position:absolute;top:20px;left:0px;z-index:80;width:100%;line-height:14px;height:28px;color:#FFF;background:#60656b;padding:7px 0 0 7px} #gallerymenu a {color:#FFF} #gallerymenu a:hover{color:#999; text-decoration: none;} #small-logo-pad-both {padding-left: 8px;padding-right:3px;} #small-logo-pad-left {padding-left: 8px;} #point{padding-right: 10px;} #tumblr{margin-top: -80px;} #tumblr li { list-style: none;margin-bottom: 40px; } #tumblr ol { padding:0px; margin: 0px; } #tumblr blockquote {font-weight: 300;} .tumblr_source {margin-top: 8px; font-weight: 300;} .post-content{} .tumblr_caption{font-weight: 600;} .tumblr_post {border-left: 4px solid #c6c6c6;padding-left: 20px;} .tumblr_posts{width: 300px;} .tumblr_body{font-weight: 300;} .tumblr_title{font-weight: 600;margin-bottom: 14px;} .tumblr_blog{} //blog link .tumblr_description blockquote{font-size: 14px} .tumblr_photo{border: 1px solid black;width: 400px;} .tumblr_post {width: 400px;} .tumblr_quote_post:before{font-family:bareaweIcons;content:"\31";} .tumblr_photo_post:before{font-family:bareaweIcons;content:"\32"; display: block; margin-bottom: 10px;} .tumblr_link_post:before{font-family:bareaweIcons;content:"\35"; display: block; margin-bottom: 10px;} .tumblr_text_post:before{font-family:bareaweIcons;content:"\33"; display: block; margin-bottom: 10px;} .tumblr_video_post:before{font-family:bareaweIcons;content:"\34"; display: block; margin-bottom: 10px;} .tumblr_link_post img{border: 1px solid black; width: 400px;} .tumblr_description{} .tumblr_link{} .tumblr_body img {width: 400px;} .read_more_container {} .read_more_container a {} .tumblr_quote {} /* #Media Queries ================================================== /* Smaller than standard 960 (devices and browsers) */ @media only screen and (max-width: 959px) {} /* Tablet Portrait size to standard 960 (devices and browsers) */ @media only screen and (min-width: 768px) and (max-width: 959px) {} /* All Mobile Sizes (devices and browser) */ @media only screen and (max-width: 767px) {} /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */ @media only screen and (min-width: 480px) and (max-width: 767px) { .collectionTitle{position: absolute; padding-left: 10px;margin-top:35px;vertical-align:-37%;color:#92b5e9;} .zipitem{visibility: hidden;width: 0px;} #name_plate {text-align:left;} #tumblr {margin-top: -70px;} .container {padding: 40px 0px 0px 0px; } .logo{position:absolute;top:0px;left:0px;z-index:101;opacity:1.0;filter:alpha(opacity=100);width;100px;} .menuitem, .menuselect{text-align: right;float: right;height:12px;padding:5px 36px 17px 0px;} #homemenu {position:relative;top:0px;left:0px;z-index:80;width:100%;line-height:14px;height:28px;background:#000;opacity: 0.2;filter:alpha(opacity=20);padding:7px 0 0 7px} #pagemenu {position:relative;top:0px;left:0px;z-index:80;width:100%;line-height:14px;height:28px;background:#D4D4D4;padding:7px 0 0 7px} #gallerymenu {position:relative;top:0px;left:0px;z-index:80;width:100%;line-height:14px;height:28px;background:#60656b;padding:7px 0 0 7px} #grid {padding: 30px 0px 60px 0px} } /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */ @media only screen and (max-width: 479px) { .collectionTitle{position: absolute;z-index: 1000; padding-left: 135px;margin-top:-30px;vertical-align:-37%;color:white;} #collectionWord{text-transform: uppercase; font-weight: 600;padding-right:4px;} .zipitem{visibility: hidden;width: 0px;} .logo{background-color: #000; z-index: 1;position:relative;top:0px;left:0px;height: 35px; width:100%;margin: 0 auto;padding: 0;} #name_plate {text-align:left;} #homemenu{ text-align: center; position: absolute; padding-left:6px; padding-top: 6px; top:35px; bottom: 68px; height: 33px; z-index:80; width:99%; } #pagemenu{ text-align: center; position: absolute; padding-left:6px; padding-top: 6px; top:35px; bottom: 68px; height: 33px; z-index:80; width:98%; } #gallerymenu{text-align: center; position: absolute; padding-left:6px; padding-top: 6px; top:35px; bottom: 68px; height: 33px; z-index:80; width:98%; } .menuitem, .menuselect{text-align: left; float: left; height:12px;padding:5px 12px 17px 12px; font-size: smaller; font-weight: 600; text-decoration: none;text-transform: uppercase } #grid {padding: 100px 0px 60px 0px} .post-content{} .tumblr_caption{font-weight: 600;} .tumblr_post {border-left: 4px solid #c6c6c6;padding-left: 20px;} .tumblr_posts{width: 250px;} .tumblr_body{font-weight: 300;} .tumblr_title{font-weight: 600;margin-bottom: 14px;} .tumblr_blog{} //blog link .tumblr_description blockquote{font-size: 14px} .tumblr_photo{border: 1px solid black;width: 250px;} .tumblr_post, .tumblr_link_post, .tumblr_video_post, .tumblr_text_post, .tumblr_photo_post{width: 250px;overflow: hidden;} .tumblr_link_post img{border: 1px solid black; width: 250px;} .tumblr_description{} .tumblr_link{} .tumblr_body img {width: 250px;} .read_more_container {} .read_more_container a {} .tumblr_quote {} .tumblr_quote p {} .tumblr_source {margin-top: 8px; font-weight: 300;} /* #Font-Face ================================================== */ /* This is the proper syntax for an @font-face file Just create a "fonts" folder at the root, copy your FontName into code below and remove comment brackets */ /* @font-face { font-family: 'FontName'; src: url('../fonts/FontName.eot'); src: url('../fonts/FontName.eot?iefix') format('eot'), url('../fonts/FontName.woff') format('woff'), url('../fonts/FontName.ttf') format('truetype'), url('../fonts/FontName.svg#webfontZam02nTh') format('svg'); font-weight: normal; font-style: normal; } */