#topPatterns a{
	font-size:13px;
	color:#333;
}

#topPatterns  .description a{
	display:block;
	height:65px;
}
#topPatterns a.description .code{
	font-weight:bold;
}
#topPatterns a:hover{
	text-decoration:none;
	
}

#topPatterns a.btn{
	margin-top:10px;
	margin-bottom:20px;
	color:#ffffff;

}

#topPatterns .code{
display:block;
font-weight:bold;
}




/* start general header idea */

#topPatternsHeader.col-xs-12{
padding-left:0px;
padding-right:0px;
	
}

/* end general header idea */


.topTenPosition{
	position:absolute;
	left:25px;
	top:25px;
}

.topTenText{
	z-index:100;
	position:absolute;
	color:#2e3e4f;
	font-weight:bold;
	font-size:15px;
	top:6px;
	left:0px;
	line-height:1;
	text-align:center;
}




.topTen{
  -webkit-box-sizing: content-box;
  -moz-box-sizing: class="support css-value">content-box;
  box-sizing: content-box;
  width: 40px;
  height: 40px;
  position: relative;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(46,62,79,1);
  text-align: center;
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #CCC091;
  opacity:.95;
}

.topTen::before {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 40px;
  height: 40px;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
   color: rgba(46,62,79,1);
  -o-text-overflow: clip;
  text-overflow: clip;
  background: #CCC091;
  text-shadow: none;
  -webkit-transform: rotateZ(30deg)   ;
  transform: rotateZ(30deg)   ;
}

.topTen::after {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  width: 40px;
  height: 40px;
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  border: none;
  font: normal 100%/normal Arial, Helvetica, sans-serif;
  color: rgba(46,62,79,1);
  -o-text-overflow: clip;
  text-overflow: clip;
 background: #CCC091;
  text-shadow: none;
  -webkit-transform: rotateZ(60deg)   ;
  transform: rotateZ(60deg)   ;
}



.topPattern {
    border-top: 2px solid #ccc;
    padding-top: 20px;
}


/* Start Media Queries */




@media (min-width: 750px) and (max-width: 1049px){

		.topTenPosition{
			position:absolute;
			left:40px;
			top:45px;
		}			
}

@media (min-width: 450px) and (max-width: 749px){

		.topTenPosition{
			position:absolute;
			left:55px;
			top:50px;
		}
		#topPatterns .code {
			font-size:11px;
		}		
}

@media (max-width: 449px){
	
	.topTenPosition{
			position:absolute;
			left:35px;
			top:35px;
		}
	#topPatterns .description a {
		height:80px;
	}
	#topPatterns .code {
		font-size:11px;
	}	
}


/* END Media Queries */



/* testing styling "view pattern" buttons */
#topPatterns .btn-primary {
    color: #fff;
    background-color: #2e3e4f;
    border-color: #2A2953;
}

/* end testing styling "view pattern" buttons */