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

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

Stylesheet: Tablet & Small Desktop Stylesheet

Here's where you can start getting into the good stuff.
This size will work on iPads, other tablets, and desktops.
So you can start working with more styles, background images,
and other resources. You'll also notice the grid starts to
come into play. Have fun!

******************************************************************/


/*********************
GENERAL STYLES
*********************/

body {}

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

.rtl {}
.home {}                            /* home page */
.blog {}                            /* blog 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 {}
	.page-child {}
	.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 {
	max-width: 1140px;
}
	/*
		This is a combination of the 1140 grid and Twitter Boostrap.
		I liked 1140 but Boostrap's grid was way more detailed so
		I merged them together, let's see how this works out.
		If you want to use 1140, the original values are commented
		out on each line.
	*/
	.onecol    { width: 5.801104972%;  }       /* 4.85%;  } /* grid_1  */
	.twocol    { width: 14.364640883%; }       /* 13.45%; } /* grid_2  */
	.threecol  { width: 22.928176794%; }       /* 22.05%; } /* grid_3  */
	.fourcol   { width: 31.491712705%; }       /* 30.75%; } /* grid_4  */
	.fivecol   { width: 40.055248616%; }       /* 39.45%; } /* grid_5  */
	.sixcol    { width: 48.618784527%; }       /* 48%;    } /* grid_6  */
	.sevencol  { width: 57.182320438000005%; } /* 56.75%; } /* grid_7  */
	.eightcol  { width: 65.74585634900001%; }  /* 65.4%;  } /* grid_8  */
	.ninecol   { width: 74.30939226%; }        /* 74.05%; } /* grid_9  */
	.tencol    { width: 82.87292817100001%; }  /* 82.7%;  } /* grid_10 */
	.elevencol { width: 91.436464082%; }       /* 91.35%; } /* grid_11 */
	.twelvecol { width: 99.999999993%; }       /* 100%;   } /* grid_12 */
	
	/* layout & column defaults */
	.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol { 
		position: relative;
		float: left; 
		margin-left: 2.762430939%;
	}
	
	.first {
		margin-left: 0;
	}
	
	.last {
		float: right;
	}

/*********************
HEADER SYTLES
*********************/

.header {}

	#logo {}
	
/*********************
NAVIGATION STYLES
*********************/

.nav {
	background: #eee; 
	border: 0;
			
	li {
		float: left;
		position: relative;
				
		a {
			border-bottom: 0;
					
			/*
			you can use hover styles here even though this size
			has the possibility of being a mobile device.
			*/
			&:hover, &:focus {
				background-color: #dedede;
					
			}
		}
				
		&:first-child {}
		&:last-child {}
				
		/*
		plan your menus and drop-downs wisely.
		*/
		ul.sub-menu,
		ul.children {
			width: 200px;
			border: 1px solid #ccc;
			border-top: 0;
			position: absolute;
			display: none;
			z-index: 8999;
						
			li {
		
				a {
					padding-left: 10px;
					border-right: 0;
					display: block;
					width: 180px;
					border-bottom: 1px solid #ccc;
							
					&:hover,
					&:focus {}
		
					&:link {}
				}
		
				&:first-child {}
	
				&:last-child {
		
					a {
						border-bottom: 0;
					}
				}
						
				/*
				if you need to go deeper, go nuts
				just remember deeper menus suck
				for usability. k, bai.
				*/
				ul {}
			}
					
			/* highlight sub-menu current page */
			li.current-menu-item, 
			li.current_page_item,
			li.current-page-ancestor {
				a {}
			}
		}
				
		/* showing sub-menus */
		&:hover ul {
			top: auto;
			display: block;
		}
				
	} /* end .menu ul li */
			
	/* highlight current page */
	li.current-menu-item, 
	li.current_page_item,
	li.current-page-ancestor {
		a {}
	}  /* end current highlighters */
	
} /* end .nav */
	
/*********************
SIDEBARS & ASIDES
*********************/

.sidebar {
	margin-top: 2.2em;
}

	.widgettitle {
		border-bottom: 2px solid #444;
		margin-bottom: 0.75em;
	}

	.widget {
		padding: 0 10px;
		margin: 2.2em 0;
		
		ul {
			li {
				margin-bottom: 0.75em;
				
				&:first-child {}
				&:last-child {}
				a {}
				/* deep nesting */
				
				ul {
					margin-top: 0.75em;
					padding-left: 1em;
				}
			}
		}
	}


	/* links widget */
	.widget_links {}
	.widget_links ul {}
	.widget_links ul li {}
	.widget_links ul li a {}
	
	/* meta widget */
	.widget_meta {}
	.widget_meta ul {}
	.widget_meta ul li {}
	.widget_meta ul li a {}
	
	/* pages widget */
	.widget_pages {}
	.widget_pages ul {}
	.widget_pages ul li {}
	.widget_pages ul li a {}
	
	/* recent-posts widget */
	.widget_recent_entries {}
	.widget_recent_entries ul {}
	.widget_recent_entries ul li {}
	.widget_recent_entries ul li a {}
	
	/* archives widget */
	.widget_archive {}
	.widget_archive ul {}
	.widget_archive ul li {} 
	.widget_archive ul li a {}
	.widget_archive select {}
	.widget_archive option {}
	
	/* tag-cloud widget */
	.widget_links {}
	.widget_links li:after {}
	.widget_links li:before {}
	.widget_tag_cloud {}
	.widget_tag_cloud a {}
	.widget_tag_cloud a:after {}
	.widget_tag_cloud a:before {}
	
	/* calendar widget */
	.widget_calendar {}
	#calendar_wrap {}
	#calendar_wrap th {}
	#calendar_wrap td {}
	#wp-calendar tr td {}
	#wp-calendar caption {}
	#wp-calendar a {}
	#wp-calendar #today {}
	#wp-calendar #prev {}
	#wp-calendar #next {}
	#wp-calendar #next a {}
	#wp-calendar #prev a {}
	
	/* category widget */
	.widget_categories {}
	.widget_categories ul {}
	.widget_categories ul li {} 
	.widget_categories ul ul.children {}
	.widget_categories a {}
	.widget_categories select{}
	.widget_categories select#cat {}
	.widget_categories select.postform {}
	.widget_categories option {}
	.widget_categories .level-0 {}
	.widget_categories .level-1 {}
	.widget_categories .level-2 {}
	.widget_categories .level-3 {}
	
	/* recent-comments widget */
	.recentcomments {}
	#recentcomments {}
	#recentcomments li {}
	#recentcomments li a {}
	.widget_recent_comments {}
	
	/* search widget */
	#searchform {}
	.widget_search {}
	.screen-reader-text {}
	
	/* text widget */
	.textwidget {}
	.widget_text {}
	.textwidget p {}
	

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

/*
you'll probably need to do quite a bit
of overriding here if you styled them for
mobile. Make sure to double check these!
*/
.footer-links {
	ul {
		li {
			a {
				&:hover {}
			}
			/* 
			be careful with the depth of your menus.
			it's very rare to have multi-depth menus in
			the footer.
			*/
			ul {}
		}
	}
} /* end .footer-links */