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

/******************************************************************
Site Name: 
Author: 

Stylesheet: 481px and Up Stylesheet

This stylesheet is loaded for larger 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
*********************/

.nav {}

	/* .menu is clearfixed inside mixins.less */
	.menu {
		ul {
			li {
				a {
					
					/*
					you can use hover styles here even though this size
					has the possibility of bieng a mobile device.
					*/
					&:hover, &:focus {
					
					}
				}
				
				&:first-child {}
				&:last-child {}
				
				/*
				plan your menus and drop-downs wisely.
				*/
				ul.sub-menu,
				ul.children {
					li {
						a {
							&:hover,
							&:focus {}
							&:link {}
						}
						&:first-child {}
						&:last-child {}
					}
				}
			} /* end .menu ul li */
			
			/* highlight current page */
			li.current-menu-item, 
			li.current_page_item,
			li.current-page-ancestor {
				a {}
			}  /* end current highlighters */
		} /* end .menu ul */
	} /* end .menu */

/*********************
POSTS & CONTENT STYLES
*********************/

#content {}
	
		.hentry {
			header {}
			footer {}
		} /* end .hentry */
		
		.single-title, 
		.page-title {}
		.single-title {}
		.page-title {}
		.archive_title { }
	
		/* want to style individual post classes? Booya! */
		.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) */
	
		/* 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 {}
			
			/* at this larger size, we can start to align images */
			.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 {}
			}
		}
		
		/* current page link */	
		li.bpn-current { 
			a {
				/* hovering on current page link */
				&:hover,
				&:focus {}
			}
		} /* end .bones_page_navi .bpn-current */
		
		/* 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 {}
		} 
	} /* end .bones_page_navi */
	
	/* 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 {}
	}
}
		
.commentlist {	
	li { 
		&:last-child {}
		
		ul.children {
			li {}
			
			/* variations */
			.comment {}
			.alt {}
			.odd {}
			.even {}
			.depth-1 {} /* change number for different depth */
			.byuser {}
			.bypostauthor {}
			.comment-author-admin {}
		
		} /* end .commentlist li ul.children */
	}
	
	li[class*=depth-] {}
	li.depth-1 {}
	
	li:not(.depth-1) {}
	
	li.depth-2 {}
	li.depth-3 {}
	li.depth-4 {}
	li.depth-5 {}
	
	/* general comment classes */
	.alt {}
	.odd {}
	.even {}
	.parent {}
	.comment {}
	.children {}
	.pingback {}
	.bypostauthor {}
	.comment-author {}
	.comment-author-admin {}
	.thread-alt {}
	.thread-odd {}
	.thread-even {}	
			
	/* vcard */
	.vcard { 
		
		cite.fn {
			a.url {}
		}
		
		time {
			a {
				&:hover {}
			}
		}
		
		img.photo {}
		img.avatar {}
	} /* end .commentlist .vcard */

	/* comment meta */
	.comment-meta {
		a {}
	} 
	.commentmetadata {
		a {}
	}
	
	/* comment content */
	.comment_content {
		p {}
	} /* end .commentlist .comment_content */
	
	/* comment reply link */
	.comment-reply-link {
		&:hover,
		&:focus {}
	} /* end .commentlist .comment-reply-link */
		
} /* end .commentlist */

/******************************************************************
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 {}
	}
}
	
	/* 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 {}
			}
		}
	}

/*********************
FOOTER STYLES
*********************/

.footer {}
	
	/*
	check your menus here. do they look good?
	do they need tweaking?
	*/
	.footer-links {
		ul {
			li {}
		}
	} /* end .footer-links */
			
	.attribution {}