/* Theme Name: Alamitos Theme URI: http://www.guiltyxindoc.com Description: A clean, smexy theme for showing off photos and a blog Author: Alex Campbell Author URI: http://www.guiltyxindoc.com Version: 1.0 Tags: white, photo, photoblog, mobile License: GPLv2 License URI: */ /* Load up our other CSS, if any */ /**************************** Fonts ****************************/ /* Font: 1942 */ @font-face { font-family: NineteenFortyTwo; src: url('fonts/1942.ttf'), url('fonts/1942.eot'); } /* ft prefix tells us which font to use */ .ft1942 { font-family: NineteenFortyTwo; } /**************************** Globals ****************************/ img { max-width: 100%; } body { font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 1em; padding: 0; margin: 0; width: 100%; } /* Links */ a:hover, a:link, a:visited, a:active { text-decoration: none; } /* Input and forms */ .TextArea { border: 1px solid #000; border-radius: 5px; background-color: #fff; } #wpstats {visibility: hidden; } /**************************** Major Blocks ****************************/ div#sub-body { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 .3em; overflow: hidden; position: relative; } div#content-main { background-color: #fff; clear: left; border-top-left-radius: 15px; border-top-right-radius: 15px; opacity: 1; } header, nav, footer { width: 100%; clear: both;} nav { display: block; } header { border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; background-color: #fff; } /* handle opaque and non-opaque regions */ #sub-body-background { opacity: 0.6; filter:alpha(opacity=60); -moz-opacity:0.6; width: 100%; height: 100%; padding: 0 0; margin: 0 0; position: absolute; top: 0px; left: 0px; z-index: -1; } /**************************** really small screens (old cell phones) ****************************/ @media only screen and (min-width: 769px) { div#content-main { clear: left; float: left; width: 70%; max-width: 750px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; margin-bottom: .3em; } aside.Sidebar { overflow: hidden; } body { background: url('images/bg.jpg') no-repeat fixed ; background-size: cover; } } /**************************** really small screens (old cell phones) ****************************/ @media screen and (max-width: 640px;) { } /**************************** smartphone screens and tablets in portrait (iPad safe) ****************************/ @media handheld, only screen and (max-width: 768px), screen and (orientation : portrait) { div#sub-body { width: 100%; max-width: 100%; padding: 0 0; } .Wrapper { width: 100%; overflow: hidden;} div#content-main, aside.Sidebar { float: none; margin: 0; padding: 0; } header > h1 { font-size: 1.25em; } nav > .menu > .menu-item, .ReadMore, .SidebarItem li, #searchform > .InlineSearch, #searchform > .InlineSubmit { min-width: 72px; min-height: 72px; vertical-align: middle; } #searchform > .InlineSearch, #searchform > .InlineSubmit { font-size: 1.4em; } #sub-body-background { opacity: 1.0;} .SidebarItem li { vertical-align: middle; font-size: 1.3em; border-top: 1px solid #333; background-color: #666; } .SidebarItem li:nth-of-type(1) { border-top: none; } } /**************************** Printing ****************************/ @media print {} /**************************** ::Module and Design Blocks:: Things that shouldn't change appearance from one format to another. ****************************/ /**************************** Menu ****************************/ nav { font-family: NineteenFortyTwo; font-size: 1.5em; min-height: 1.8em; } nav ul.menu { display: block; list-style-type: none; margin: 0 auto; width: 100%; clear: both; } nav li.menu-item { display: block; float: left; margin: 0 4px; display: inline; height: 1.5em; margin-right: 1em; } /**************************** Sidebar ****************************/ #searchform { width: 100%; padding: 0.4em; } .SidebarItem h2 { width: 100%; padding: 0.4em; } .SidebarItem ul { list-style-type: none; width: 100%; padding-left: 0px; } .SidebarItem ul > li { width: 100%; display: block; margin-left: 0px; padding: 0.4em; } /**************************** Previews ****************************/ .Preview { border-top: 1px dotted #aaa; padding: .6em; } .Preview:nth-of-type(1) { border-top: none; } /* .post-meta works for both Previews and Fulltext */ .post-meta { font-size: 0.75em; } .Preview > .content { padding: 1em; } .Preview > .content > .featured { display: block; float: left; margin: .6em; } .Preview > .post-meta:nth-of-type(1) { clear: left; } /**************************** Fulltext ****************************/ .Fulltext { padding: 0.6em; } .Fulltext > .content { padding: 1em; } /**************************** Images and captions ****************************/ .wp-caption { margin: .6em; } .wp-caption-text { font-size: .8em; } .alignleft { float: left; } .alignright { float: right; } /**************************** Header ****************************/ header > h1 { font-family: NineteenFortyTwo; padding: .4em; margin: 0; text-align: center; } /**************************** Pagination ****************************/ #pagination { width: 80%; display: block; margin: 0 auto; padding: .4em; } #pagination a { padding: .3em; border: 1px solid #ddd; height: 72px; width: 72px; } #pagination a:hover { background-color: #ffdddd; }