rl-theme/library/sass/481up.sass

//
// Site Name: 
// Author: 
//
// Stylesheet: TABLET & SMALLER LAPTOPS
//
// This stylesheet is loaded for larger mobile devices. It's set to 
// 481px because at 480px it would load on a landscaped iPhone.
// This isn't ideal because then you would be loading all those
// extra styles on that same mobile connection. 
//
// A word of warning. This size COULD be a larger mobile device,
// so you still want to keep it pretty light and simply expand
// upon your base.less styles.
//
//


//
// GENERAL STYLES
//

body 

//
// LAYOUT & GRID STYLES
//

.wrap

//
// HEADER SYTLES
//

.header 

#logo
	
//
// NAVIGATION STYLES
//


			
//
// POSTS & CONTENT STYLES
//

#content 

// want to style individual post classes? Booya!
.hentry             // standard post class
.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
	
	time
			
// post content
.post-content
			
	p		
			
	ul, ol, table, dl
			
	ul, ol
				
		li
					
	ul
		li
			
	ol
			
		li 
			
	blockquote
				
		&:before
			
	dl
			
	dt
			
	dd 
			
	img 
			
	//
	// 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
		margin-right: 1.5em
		display: inline
		float: left
		
	.alignright, img.alignright
		margin-left: 1.5em
		display: inline 
		float: right 
	
	.aligncenter, img.aligncenter
		margin-right: auto
		margin-left: auto
		display: block
		clear: both
			
	video, object
			
	pre, code 
			
// end .post-content
			
.wp-caption
			
	// images inside wp-caption
	img
			
	p.wp-caption-text
	
// 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
	
.bones_page_navi
	
	li 
			
		a 
				
			&:hover, 
			&:focus 
				
// end .bones_page_navi
		
// current page link 
li.bpn-current
		
	a
	// hovering on current page link
		&:hover,
		&:focus

		
// common styles for page-navi links
li.bpn-prev-link, 
li.bpn-next-link
		
	a
		
// 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

		
// 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
		
	.next-link
		
// 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
		
		&:last-child
		
		ul.children
			
			li
	
	li[class*=depth-]
			
	li.depth-1
	
	li:not(.depth-1)
	
	li.depth-2
	li.depth-3
	li.depth-4
	li.depth-5
	
	.odd
	.even

	// 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
		
		// comment author name
		cite.fn
			
			// author link url
			a.url
		
		// comment date
		time
		
			a
				
				&:hover
		
		// the comment gravatar
		img.avatar
			
// end .commentlist
	

// comment meta
.comment-meta
		
	a
		
// comment meta data
.commentmetadata
		
	a
	
// comment content
.comment_content
			
	p
		
// end .comment_content
	
// comment reply link
.comment-reply-link 
	
	&:hover,
	&:focus
		
// end .comment-reply-link 
					

//
// COMMENT FORM STYLES
//

.respond-form 
	
	form
		
		li
			
			label,
			small
		
		input[type=text], 
		input[type=email], 
		input[type=url], 
		textarea 
		
			&:focus
			
			// form validation 
			&:invalid 
		
		input[type=text],
		input[type=email], 
		input[type=url]
		
		textarea

// end .respond-form
	
// comment submit button
#submit
	
// comment form title
#comment-form-title 
	
// cancel comment reply link
#cancel-comment-reply 
	a
			
// logged in comments
.comments-logged-in-as
		
// allowed tags 
#allowed_tags 	
	
// no comments
.nocomments 
	
	
//
// SIDEBARS & ASIDES
//

.sidebar

.widgettitle

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

//
// FOOTER STYLES
//

.footer
	
//
// 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