rl-theme/library/sass/base.sass

//
// Site Name: 
// Author: 
// 
// Stylesheet: Base Mobile Stylesheet
// 
// Be light and don't over style since everything here will be
// loaded by mobile devices. You want to keep it as minimal as
// possible. This is called by itself and is the only one called 
// for devices that are smaller than 480px so that the mobile 
// version pulls ONLY the css it needs. This means it's screamingly 
// fast on mobile connections.
//
// For more info, check out this great link on the topic:
// http://nicolasgallagher.com/mobile-first-css-sass-and-ie/
//
//

//
// IMPORTING STYLES
//

// import reset
@import "normalize"
// import mixins
@import "mixins"

//
// GENERAL STYLES
//

body 
	font-family: Georgia, serif
	font-size: 14px
	line-height: 1.5
	color: #565656
	background: #fefefe

//
// WORDPRESS BODY CLASSES
// style a page via class
//

.rtl                       // for sites that are read right to left (i.e. hebrew) 
.home                      // home page 
.blog                      // blog template page 
.archive                   // archive page 
.date                      // date archive page 
.date-paged-1              // replace the number to the corresponding page number 
.search                    // search page 
.search-results            // search result page 
.search-no-results         // no results search page 
.search-paged-1            // individual paged search (i.e. body.search-paged-3) 
.error404                  // 404 page 
.single                    // single post page 
.postid-1                  // individual post page by id (i.e. body.postid-73) 
.single-paged-1            // individual paged single (i.e. body.single-paged-3) 
.attachment                // attatchment page 
.attachmentid-1            // individual attatchment page (i.e. body.attachmentid-763)
.attachment-mime-type      // style mime type pages 
.author                    // author page */
.author-nicename           // user nicename (i.e. body.author-samueladams) 
.author-paged-1            // paged author archives (i.e. body.author-paged-4) for page 4
.category                  // category page 
.category-1                // individual category page (i.e. body.category-6) 
.category-paged-1          // replace the number to the corresponding page number 
.tag                       // tag page 
.tag-slug                  // individual tag page (i.e. body.tag-news) 
.tag-paged-1               // replace the number to the corresponding page number 
.page-template             // custom page template page 
.page-template-page-php    // individual page template (i.e. body.page-template-contact-php 
.page-paged-1              // replace the number to the corresponding page number 
.page-parent               // parent page template 
.page-child                // child page template 
.parent-pageid-1           // replace the number to the corresponding page number 
.logged-in                 // if user is logged in 
.paged                     // paged items like search results or archives 
.paged-1                   // individual paged (i.e. body.paged-3) 

//
// LAYOUT & GRID STYLES
//

.wrap 
	width: 90%
	margin: 0 auto

//
// No Grid? Say Whaaaat?
// There's really no need for all that
// extraneous grid css since floating 
// columns wouldn't really fit on such a 
// small screen, so let's only bring it in
// when we're ready for it.
//

//
// LINK STYLES
//

a, a:visited
	color: #f01d4f

	// on hover
	&:hover, &:focus
		color: #f05e81
	
	// on click
	&:active 
	
	// mobile tap color 
	&:link
		//
		// this highlights links on iPhones/iPads. 
		// so it basically works like the :hover selector
		// for mobile devices.
		// 
		-webkit-tap-highlight-color : rgba(0,0,0,0)


//
// H1, H2, H3, H4, H5 STYLES
//

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 
	font-family: sans-serif
	font-weight: 500
	//
	// if you're going to use webfonts, be sure to check your weights 
	// http://css-tricks.com/watch-your-font-weight/
	//
	
	// removing text decoration from all headline links
	a
		text-decoration: none


h1, .h1 
	font-size: 2.5em
	line-height: 1.333em

h2, .h2 
	font-size: 1.75em 
	line-height: 1.4em
	margin-bottom: 0.375em

h3, .h3
	font-size: 1.125em

h4, .h4 
	font-size: 1.1em 
	font-weight: 700

h5, .h5
	font-size: 0.846em
	line-height: 2.09em
	text-transform: uppercase 
	letter-spacing: 2px


//
// HEADER SYTLES
//

.header

#logo
	
//
// NAVIGATION STYLES
//



//
// POSTS & CONTENT STYLES
//

#content 
	margin-top: 2.2em

// want to style individual post classes? Booya!
.hentry             // standard post class
	border-bottom: 4px double #ccc
.post-id            // post by id (i.e. post-3)
.post               // general post style 
.page               // general article on a page style 
.attachment         // general style on an attatchment 
.sticky             // sticky post style 
.hentry             // hentry class 
.category-slug      // style by category (i.e. category-videos)
.tag-slug           // style by tag (i.e. tag-news) 
	
.article-header     // the header element inside each post
.article-footer     // the footer element inside each post
		
.single-title,      // the title (h1) on each single post or page
.page-title 
		
.single-title 		// the title (h1) on single posts
.page-title         // the title (h1) on pages
.archive-title      // the archive title on archive / category pages
	
		
// post meta
.meta
	color: #999
	
	time
			
// post content
.post-content
			
	p		
			
	ul, ol, table, dl
			
	ul, ol
				
		li
					
	ul
		li
			
	ol
			
		li 
			
	blockquote
				
		&:before
			
	dl
			
	dt
			
	dd 
		margin-left: 0
		font-size: 0.9em
		color: #787878
		margin-bottom: 1.5em
			
	img 
		margin: 0 0 1.5em 0 
		max-width: 100% 
		height:  auto
			
	//
	// image alignment on a screen this size may be
	// a bit difficult. It's set to start aligning 
	// and floating images at the next breakpoint,
	// but it's up to you. Feel free to change it up.
	//
	.alignleft, img.alignleft
	.alignright, img.alignright
	.aligncenter, img.aligncenter
			
	video, object
		max-width: 100%
			
	pre, code 
		background: #eee
		border: 1px solid #cecece
		padding: 10px
			
// end .post-content
			
.wp-caption
	background: #eee
	padding: 5px
			
	// images inside wp-caption
	img
		margin-bottom: 0
		width: 100%
			
	p.wp-caption-text
		font-size: 0.85em
		margin: 4px 0 7px
		text-align: center
	
// end .wp-caption 
			
// image gallery styles
.gallery
			
	dl
				
		a
			
		img
			
	dt
			
	dd 
		
// end .gallery 
		
// gallery caption styles	
.gallery-caption
		
.size-full
.size-large 
.size-medium 
.size-thumbnail

//
// PAGE NAVI STYLES
//

.page-navigation, 
.wp-prev-next
	margin: 1.1em 0 2.2em
	
.bones_page_navi
	
	li 
		float: left
		margin-left: 10px
			
		a 
			padding: 3px 6px 
			display: block
			text-decoration: none 
			position: relative
				
			&:hover, 
			&:focus 
				color: #f01d4f
				text-decoration: underline
				
// end .bones_page_navi
		
// current page link 
li.bpn-current
	padding: 3px 6px
	border-bottom: 2px solid #f01d4f
	position: relative
		
	a
	// hovering on current page link
		&:hover,
		&:focus

		
// common styles for page-navi links
li.bpn-prev-link, 
li.bpn-next-link
	font-weight: 700 
		
	a
		padding: 0
		
// remove the bg on end links
li.bpn-prev-link a:hover, 
li.bpn-next-link a:hover, 
li.bpn-first-page-link a:hover, 
li.bpn-last-page-link a:hover
	background: none

		
// previous link
li.bpn-prev-link 
	a 
		&:hover,
		&:focus 
		
// next page link		
li.bpn-next-link 
	a 
		&:hover,
		&:focus 
				
// first page link 
li.bpn-first-page-link 
	a 
		&:hover,
		&:focus 
		
// last page link
li.bpn-last-page-link
	a 
		&:hover,
		&:focus 
	
// fallback previous & next links
.wp-prev-next
		
	ul
		
	.prev-link
		float: left
		
	.next-link
		float: right
		
// end .wp-prev-next 

//
// COMMENT STYLES
//

// h3 comment title
#comments	
	// number of comments span
	span 
	
.comment-nav
	
	ul
	
		li

// end .comment-nav
		
// comment styles
.commentlist
	
	li
		position: relative 
		clear: both
		overflow: hidden
		list-style-type: none 
		margin-bottom: 1.5em
		padding: 0.7335em 10px
		
		&:last-child
			margin-bottom: 0
		
		ul.children
			margin: 0
			
			li
	
	li[class*=depth-]
		margin-top: 1.1em
			
	li.depth-1
		margin-left: 0 
		margin-top: 0
	
	li:not(.depth-1)
		margin-right: -10px 
		margin-left: -10px
		margin-top: 0
		padding-bottom: 0
	
	li.depth-2
	li.depth-3
	li.depth-4
	li.depth-5
	
	.odd
		background: #eee
	.even
		background: #fefefe

	// wordpress comment classes
	.comment                         // regular comment class (present on all)
	.alt                             // an alt comment
	.parent                          // a parent comment
	.children                        // a child comment
	.pingback                        // a pingback
	.bypostauthor                    // a comment by the post author
	.comment-author                  // a comment by the author
	.comment-author-admin            // a comment by the author who is admin
	.thread-alt                      // a comment inside a thread alt
	.thread-odd                      // an odd comment inside thread
	.thread-even 	                 // an even comment inside thread
			
	/// comment vcard
	.vcard
		margin-left: 50px
		
		// comment author name
		cite.fn
			font-weight: 700
			font-style: normal
			
			// author link url
			a.url
		
		// comment date
		time
			float: right
		
			a
				color: #999
				text-decoration: none
				
				&:hover
					text-decoration: underline
		
		// the comment gravatar
		img.avatar
			position: absolute
			left: 10px
			padding: 2px
			border: 1px solid #cecece 
			background: #fff
			
// end .commentlist
	

// comment meta
.comment-meta
		
	a
		
// comment meta data
.commentmetadata
		
	a
	
// comment content
.comment_content
	margin-left: 50px
			
	p
		margin: 0.7335em 0 1.5em 
		font-size: 1em
		line-height: 1.5em
		
// end .comment_content
	
// comment reply link
.comment-reply-link 
	text-decoration: none 
	float: right
	background: #4598bb 
	padding: 3px 5px 
	color: $white
	opacity: 0.65
	margin-bottom: 10px 
	font-weight: 700 
	font-size: 0.9em
	
	&:hover,
	&:focus
		opacity: 1
		
// end .comment-reply-link 
					

//
// COMMENT FORM STYLES
//

.respond-form 
	margin: 1.5em 10px
	padding-bottom: 2.2em
	
	form
		margin: 0.75em 0
		
		li
			list-style-type: none 
			clear: both
			margin-bottom: 0.7335em
			
			label,
			small
				display: none
		
		input[type=text], 
		input[type=email], 
		input[type=url], 
		textarea 
			padding: 3px 6px
			background: #efefef 
			border: 2px solid #cecece
			line-height: 1.5em
		
			&:focus
				background: $white 
			
			// form validation 
			&:invalid 
				outline: none 
				border-color: #fbc2c4 
				background-color: #f6e7eb
				-webkit-box-shadow: none 
				-moz-box-shadow: none  
				-ms-box-shadow: none
				box-shadow: none 
		
		input[type=text],
		input[type=email], 
		input[type=url]
			max-width: 400px 
			min-width: 250px 
		
		textarea
			resize: none 
			width: 97.3% 
			height: 150px

// end .respond-form
	
// comment submit button
#submit
	
// comment form title
#comment-form-title 
	margin: 0 0 1.1em
	
// cancel comment reply link
#cancel-comment-reply 
	a
			
// logged in comments
.comments-logged-in-as
		
// allowed tags 
#allowed_tags 
	margin: 1.5em 10px 0.7335em 0		
	
// no comments
.nocomments 
	margin: 0 20px 1.1em
	
	
//
// SIDEBARS & ASIDES
//

.sidebar

.widgettitle

.widget
		
	ul
		
		li 
			
			&:first-child
				
			&:last-child 
				
			a 
				
			// deep nesting 
			ul
			
// end .widget 

//
// FOOTER STYLES
//

.footer
	clear: both
	
//
// if you checked out the link above:
// http://www.alistapart.com/articles/organizing-mobile/
// you'll want to style the footer nav
// a bit more in-depth. Remember to keep
// it simple because you'll have to 
// override these styles for the desktop
// view.
//
.footer-links
	
	ul
		
		li
		
// end .footer-links
			
.attribution