Responsive Base CSS

styles.css

/*
 * Main CSS by Joshua Pekera
*/

/* Table of Content
==================================================
  :: Global Site Styles
  :: Header & Global Nav
  :: Side Nav
  :: Content Containers & Grids
  :: Page Specific
  :: Media Queries
  :: Font-Face 
*/

/* Global Site Styles
================================================== */
body {}

/* Links */
a {}
a:hover, a:focus {}

/* Headers */
h1, h2, h3 {}
h1 strong {}
h2 {}
h3 {}
h4 {}
p {}

/* Header & Global Nav
================================================== */

/* Header */


/* Global Nav */



/* Side Nav
================================================== */


/* Content Containers & Grids
================================================== */
/* Default display */

/* Main Content Area */

/* Grids */

/* Grid Lists */

/* Grid Columns */

/* Debug Output */


/* Page Specific Styles
================================================== */

/* Page Titles & Shapes
------------------------- */

/* Home Page
---------------- */

/* Blog Page
---------------- */

/* Work Page
---------------- */

/* Labs Page
---------------- */

/* Contact Page
---------------- */


/* Footer
================================================== */



/* Share Widgets
================================================== */

/* Facebook Responsive
-----------------------*/
.fb-comments,.fb_iframe_widget iframe[style],.fb_iframe_widget span[style] {
	width:100%!important;
}

.fb-like {
	margin-bottom:20px;
	overflow:hidden;
	float:left!important;
}

.fb-like span[style],.fb-like span iframe[style] {
	width:90px!important;
}

/* Multimedia Elements
================================================== */

/* Responsive video embeds (must be wrapped container)
-------------------------------------------------------*/
.embed-container {
	position:relative;
	padding-bottom:56.25%;/*16/9 ratio*/
	padding-top:0;
	height:0;
	overflow:hidden
}

.embed-container iframe,.embed-container object,.embed-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%
}

/* !Responsive Queries
================================================== */
/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

/* Very small (Detailed) devices (mobile, less than 480) */
@media (max-width: @screen-xs-max) {
  
}// Close Query

/* === START HERE BY DEFAULT ==== */
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) {
  
}// Close Query

/* Small devices (Detailed) (tablets, min 768px and max 991px) */
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
  
}// Close Query

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) {
  
}// Close Query

/* Small devices (Detailed) (desktop, min 992px and max 1199px) */
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
  
}// Close Query

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) {
  
}// Close Query

/* !Special Media Queries
================================================== */
/* These are for very unique instances */

/* !iPads - portrait and landscape */
// ------------------------------------------------------
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */

}// Close Query

/* !iPads - landscape */
// ------------------------
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */

}// Close Query

/* !iPads - portrait */
// -----------------------
@media only screen 
and (min-device-width : 768px)
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */

}// Close Query

// This is a special 
/* !XLarge Desktop - (non-standard query) */
// ----------------------------------------
@media (min-width: 1441px) and (max-width: 1919px) {
/* Styles */

}// Close Query

// This is a special 
/* !XXLarge Desktop - (non-standard query) */
// ----------------------------------------
@media (min-width: 1920px) and (max-width: 2560px) {
/* Styles */

}// Close Query