CSS Utility Framework

framework.css

/* ==|== framework styles ===================================================
   Author: DHigginbotham 
   ========================================================================== */
/* apply a natural box layout model to all elements  <3 paul irish */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}


/* prefixes */
div { display: block; margin: 0; padding: 0; }
.pull-right { float: right; }
.pull-left { float: left; }
.drop-all {margin:0;padding:0;}
.make-stick, .force-tall {min-height:475px;}

/* alerts & messages */
.alert {
	background: #ffcf4f;
}
.success {
  background: #94da30;
}
.message {
 	border-radius: 5px;
  border: 2px solid rgba(50,50,50,0.1);
  margin: 1em 0;
}

/* static wrappers */
.wrapper {
  width: 100%;
}

.gsify { 
  width: 960px;
  margin: 0 auto; 
}

/* section elements */
.boxed {
  float: left;
  width: 100%;
  /*padding: 0 0.75em; does funny stuff to the boxes*/
}

.boxed-y {
	padding: 1.25em 0;
}

.boxed-x {
	padding: 0 1.145em 0 0;
}

.boxed-xy {
	padding: 1.25em 1.145em 0 0;
}

.last-boxed {
  float: right; clear: right;
}

.clear-padding {
	padding-right: 0; margin-right: 0;
}

.boxed-xx {
	padding: 0 0 0 1.145em;
}

.triple { /*this in conjunction with .four will give you 2 column */
	width: 75%;
}

.middle { /* slightly larger center or larger sidebar w/ .quad */
	width: 60%;
}

.two { 
 width: 50%; 
}

.quad { /* slightly larger sidebar */
	width: 40%;
}

.three {
  width: 33.3%;
}

.three-even {
	width: 30%;
}

.four {
  width: 25%;
}

.five {
 width: 20%; 
}

/* form ui */
label {
	display: inline-block;
}

input[type="text"], input[type="submit"] {
	display: block;
}

/* ==|== primary styles =====================================================
   Author: DHigginbotham & Edward Beshara
   ========================================================================== */
body {
  background: #f3f3f3;
  color: #333;
  margin: 0; padding: 0;
  font: 100%/1 "Trebuchet MS", Verdana, Tahoma, Arial, Serif;
}

a, a:visited { color: #439E1F; text-decoration: none;}
a:active, a:hover { color: #212121; }


/* ui elements */

#header {
	background: #494949;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	box-shadow: 0 1px 3px rgba(0,0,0,0.6);
	position: relative; z-index: 1000;
}
/* logo / branding */
	.brand {
		color: #fff;
		text-shadow: 0 1px 1px rgba(0,0,0,0.6);
		padding: 0.65em 0;
		/*line-height: 90px;*/
		position: relative;
		text-align: center;
	}
	
	.brand a, .brand a:visited {
		color: #fff;
	}

	.brand a:hover, .brand a:active {
		color: #439E1F;
		text-shadow: -1px -1px 0 rgba(0,0,0,0.2);
	}
	
	.brand span {
		padding-right: 0.345em;
		color: #439E1F;
	}

/* header nav */

#top-nav {
	list-style: none;
	float: right;
}

.top-nav-text {
	display: block;
	font-size: 14px;
	line-height: 1;
	font-weight: 400;
}

	#top-nav li {
		display: block;
		float: left; 
		border-left: 1px solid rgba(0,0,0,0.2);
		box-shadow: inset 1px 0 0 rgba(255,255,255,0.2);
		text-align: center;
		width: 100px;
		line-height: 60px;
	}
	
	#top-nav li.last-elem {
		border-right: 1px solid rgba(255,255,255,0.2);
		box-shadow: inset -1px 0 0 rgba(0,0,0,0.2), inset 1px 0 0 rgba(255,255,255,0.2);
	}
	
		#top-nav li a, #top-nav li a:visited {
			/*line-height: 90px;*/
			padding: 0.45em 0;
			/*min-height: 90px;*/
			color: #fff;
			font-weight: 700;
			display: block;
		}
		
		#top-nav li a:hover, #top-nav li a:active {
			color: #439E1F;
			background: rgba(255,255,255,0.1);
			text-shadow: 0 1px 2px rgba(0,0,0,0.4);
		}

/*before content*/

#before-content {
	padding: 0.75em 0;
	background: #eee;
	border-bottom: 1px solid #e1e1e1;
}

	#before-content h1 {
		color: #439E1F;
	}

	#before-content p {
		color: #c1c1c1;
		text-shadow: 1px 1px 0 #fff;
		font-style: italic;
	}

/*design megaphone ui */	
	.megaphone {
		background: #eee;
		padding: 1.235em;
		margin: 1.125em 0;
		border-radius: 5px;
		border: 1px solid rgba(0,0,0,0.1);
		box-shadow: inset 0 0 5px rgba(0,0,0,0.1), 0 1px 0 #fff;
	}
	
	.megaphone h2, .megaphone h3,  .megaphone p {
		line-height: 1.3;
		text-shadow: 0 1px 1px rgba(0,0,0,0.1);
		margin: 0; padding: 0; /* inline-margin-padding setting */
	}
	
	.megaphone h2, .megaphone h3 { 
		color: #439E1F; 
		border-bottom: 1px dashed rgba(0,0,0,0.3);
	}
	
	.megaphone-column {
		margin: 1em;
	}
	
/* slider ui */
	
#slider {
	min-height: 300px;
	background: #CBCBCB;
}

	/*#slider*/.loudspeaker {
		font-size: 80px;
		color: #444;
		line-height: 1;
	}
	
/* .multimedia ui */
.multimedia {
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,0.2);
	margin: 1.125em 0;
	margin-right: 1em;
}

	.multimedia h2 {
		color: #439E1F;
	}

	.multimedia img {
		width: 100%;
		padding: 0;
		border-top: 1px solid #444;
	}


/*zelda (3 Column View)*/
#zelda .gsify {
	border-bottom: 1px solid #ccc; 
	padding-bottom: 30px;
}

#zelda h2 {
	border-bottom: 2px solid #000;
}


/*main content*/
#content {
	/*min-height: 600px; sticky footer? mebe.*/
	font-size: 100%;
}

	#content h2 {
		border-bottom: 1px dashed rgba(0,0,0,0.2);
		font-size: 2em;
	}

	#content h2, p {
		line-height: 1.3;
		padding: 0; margin: 0;
	}

	#content span {
		line-height: 55px;
	}

	#content p {
		font-size: 1em;
		padding: 0.5em 0.425em 0;
		background: #eee;
		min-height: 110px;
		border-bottom: 1px solid rgba(0,0,0,0.1);
	}
	
	#content img {
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
		border: 3px solid #fff;
		max-width: 95%;
		display: block;
		margin: 0 auto;
	}
	
	/*#content*/.social-list {
		border-top: 1px solid rgba(255,255,255,0.4);
		border-bottom: 1px solid rgba(0,0,0,0.1);
		box-shadow: inset 0 -1px -1px rgba(0,0,0,0.1);
		padding: 0 0.425em;
		background: rgba(50,50,50,0.1);
		list-style: none;
		width: 100%;
		float: right;
	}
	/*#content*/.social-list li{
		line-height: 32px;
		float: left;
		display: block;
		width: 33.3%;
		text-align: center;
		font-size: 0.875em;
		border-right: 1px solid rgba(0,0,0,0.1);
	}
	/*#content*/.social-list li:last-child {
		border: none;
	}
	
	
/* ui elements */

.ui-container.first-elem { /* '.ui-container:first-child' used once only, may merge to selector */
	border-left: 1px solid #d9d9d9;
}

.ui-container {
	border-right: 1px solid #d9d9d9;
	line-height: 1;
	padding: 0.75em 0 0.75em 0.65em;
}

	.ui-content img {
		box-shadow: 0 1px 3px rgba(0,0,0,0.2);
		border: 3px solid #fff;
		display: block;
		margin: 0 auto;
	}

	.ui-container p {
		line-height: 1;
		font-weight: bold;
		margin: 0; padding: 0;
	}
	
	.ui-container span.small-text, .content-body span.small-text, span.small-text, .small-text {
		font-size: 13px;
		font-weight: 400;
		color: #439E1F;
		text-shadow: 0 1px 1px #fff;
	}

	.large-text { /* used for navbar, mainly */
		font-size: 1.725em;
	}


.ui-highlight {
	font-size: 1.725em;
	margin-right: 0.35em;
	margin-bottom: 0.25em; 
	float: left; 
	color: #439E1F;
}

.ui-list {
	list-style: none;
	margin-top: 20px;
}

/*after content*/
#after-content {}

/*footer elements*/
#footer {
	background: #212121; /*url(http://subtlepatterns.com/patterns/low_contrast_linen.png) repeat;*/
	border-top: 1px solid rgba(0,0,0,0.2);
	box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
	margin-top: 2em;
	padding-top: 1.75em;
	color: #fff;
	text-shadow: -1px -1px 0 rgba(0,0,0,0.4);
	font-size: 100%;
}

#footer .boxed.four {
	min-height: 300px;
	border-left: 1px solid #111;
	box-shadow: inset 1px 0 0 rgba(255,255,255,0.1);
	padding: 0 40px;
	margin-bottom: 0.755em;
}

#footer .boxed.four.first-elem {
	border: none;
	box-shadow: none;
}

#copyright {
	font-size: 0.885em;
	color: rgba(255,255,255,0.6);
	text-shadow: -1px -1px 0 rgba(0,0,0,0.5);
	background: #212121;
}

/* ==|== media queries ======================================================
   EXAMPLE Media Query for Responsive Design.
   This example overrides the primary ('mobile first') styles
   Modify as content requires.
   ========================================================================== */

/* Landscape phones and down */
  @media (max-width: 480px) {

/*
	HOMECARDS RESPONSIVE DAWG
*/


	 html { overflow-x: hidden; }
 
  .pd_body_wrap li {
    float: none;
    clear:both;
    width: 100%;
    
  }
  .pd_body_content {
    padding: 0 0.3em;
  }
  .pd_body_img_bx {
    margin: 0;padding:0;min-width:100%;
    height: auto;
  }
  .hc_img {
    width: 100% !important;
    min-height: 100% !important;
    margin: 0 auto !important;
  }
	.pd_wrapper thead tr th a {
		font-size: 14px;
	}
	 		
 		.gsify {max-width: 100%;clear:both;}
 		.boxed {float: none;clear: both;margin: 0 auto;}
 		.ul-highlight { font-size: 13px; }
 		.ui-container {border: none !important;}
 		.ui-container.first-elem {border: none !important;}
 		.two, .three, .four, .five, .triple, .quad, .middle { width: 100%;clear:both; margin:0;padding:0;}

		.multimedia img, .boxed img {
			max-width: 100%;
			height: auto;
		}

		.brand {
			min-width: 100%;
		}
		
		#slider {
			min-height: 100px;
		}
		
 		#top-nav li, #top-nav li a {
 			min-width: 100%;
 			border: none !important;
 			box-shadow: none !important; 
 		}
 		
 		.megaphone { max-width: 100%; margin: 0 auto;}
 		
 		#content { max-width: 100%; margin: 0 auto;}
 		
 		.ui-content img {
 			max-width: 97%;
 		}
	.visible-phone { visibility: visible; }
	.hidden-phone { visibility: hidden; display: none;}
 		 		 	
}
 
  /* Landscape phone to portrait tablet */
  @media (max-width: 767px) {
 		.gsify {max-width: 100%;clear:both;}
 		.boxed {float: none;clear: both;}
 		.ul-highlight { font-size: 13px; }
 		.ui-container {border: none;}
 		.two, .three, .four, .five, .triple, .quad, .middle { width: 100%;clear:both; margin:0;padding:0;}

		.multimedia img, .boxed img {
			max-width: 100%;
			max-height: 100%;
		}

		#slider.wrapper {
			min-height: 100px;
		}

 		.ui-content img {
 			max-width: 97%;
 		}
	.visible-tablet { visibility: visible; }
	.hidden-tablet { visibility: hidden; display: none; }
 		
  }

 
  /* Portrait tablet to landscape and desktop */
  @media (min-width: 768px) and (max-width: 979px) {
 		.gsify {max-width: 100%;clear:both;}
 		.boxed {float: none;clear: both;}
 		.ul-highlight { font-size: 13px; }
 		.ui-container {border: none;}
 		.two, .three, .four, .five, .triple, .quad, .middle { width: 100%;clear:both; margin:0;padding:0;}

		.multimedia img, .boxed img {
			min-width: 100%;
			max-width: 100%;
			max-height: 100%;
		}
		#slider.wrapper {
			min-height: 100px;
		}

 		.ui-content img {
 			max-width: 97%;
 		}
	.visible-desktop { visibility: visible; }
	.hidden-desktop { visibility: hidden; display: none; }

  }

.touchdown-list {display: none;}
.touchdown {display: block;padding: 0.35em;display:block;clear:both;width:90%;margin:0.675em auto;}

@media only screen and (min-width: 768px) {
.touchdown-list {display: block;}
.touchdown {display: none;}
}



/* ==|== non-semantic helper classes ========================================
   Please define your styles before this section.
   ========================================================================== */

/* For image replacement */
.ir { border: 0; font: 0/0 a; text-shadow: none; color: transparent; background-color: transparent; }

/* Hide from both screenreaders and browsers: h5bp.com/u */
.hidden { display: none !important; visibility: hidden; }

/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }

/* Extends the .visuallyhidden class to allow the element to be focusable when navigated to via the keyboard: h5bp.com/p */
.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }

/* Hide visually and from screenreaders, but maintain layout */
.invisible { visibility: hidden; }

/* Contain floats: h5bp.com/q */
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

/** END HTML5 Boilerplate CSS **/