/* ------------  mainlinks_wapper - ie show case ------------ */

  
    
div.mainlinks_wapper {
    margin-top:15px;
    margin-bottom:15px;
    clear:both;
    overflow:hidden;
    border: 1px solid #ddd;  
    box-shadow: 0 0 4px #eee; 
    border-radius: 4px; 
}
    
    
a.mainlinks {
    display: block;
    padding:10px;
    position: relative; 
    width: 458px; 
    height: 226px;
    float:left; 
    cursor: pointer;
    text-decoration:none;
    border-left: 1px solid #ddd;
    border-right: 1px solid transparent;
    box-shadow: inset 1px 1px 1px 0px white;
    background: #fefefe; /* Fallback*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee'); /* for < IE9*/
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eeeeee)); /* Saf4+, Chrome */
    background: -webkit-linear-gradient(top,  #fff,  #eeeeee); /* Chrome 10+, Saf5.1+ */
    background: -moz-linear-gradient(top,  #fff,  #eeeeee); /* for firefox 3.6+ */
    background: -ms-linear-gradient(top, #fff, #eeeeee); /* for IE10*/
    background: -o-linear-gradient(top, #fff, #eeeeee); /* Opera 11.10+ */
    background: linear-gradient(top, #fff, #eeeeee);
    font-size:14px;
    line-height: 1.6em;
}
    
a.mainlinks:first-child {
    border-radius: 4px 0px 0px 4px;
    border:none;
}
    
a.mainlinks:last-child {
    border-radius: 0px 4px 4px 0px;
}
    
a.mainlinks:hover {
    /* Background Colour or Gradient */
    background: #fefefe; /* Fallback*/
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e5e5e5', endColorstr='#ffffff');
    background: -webkit-gradient(linear, left top, left bottom, from(#e5e5e5), to(#fff)); 
    background: -webkit-linear-gradient(top,  #e5e5e5, #fff); 
    background: -moz-linear-gradient(top,  #e5e5e5, #fff); 
    background: -ms-linear-gradient(top,  #e5e5e5, #fff); 
    background: -o-linear-gradient(top, #e5e5e5, #fff);
    background: linear-gradient(top, #e5e5e5, #fff);
}    
    
    
    
/* ---------- Title ---------- */

    a.mainlinks h2,
    a.mainlinks span.title {
        font-family: 'Roboto', 'Open Sans', sans-serif;
        font-size: 18px;
        font-weight: bold;
        line-height: 1.6em;
        display: block;
        margin-left: 240px;
        margin-right: 20px;
        margin-top: 15px;
        margin-bottom: 8px;
        color: black;
    }

    a.mainlinks:hover h2,
    a.mainlinks:hover span.title {
        color: red;
    }
        
/* ---------- Blurb ---------- */

a.mainlinks span.blurb {
    display: block;
    margin-left:240px;
    margin-right:20px;
    margin-top: 10px;
    color:#888;
}

/* ---------- Image ---------- */

a.mainlinks span.image {
    display: block;
    height:216px;
    width:216px;
    position:absolute;
    top:15px;    
    left:15px;
    border: 1px solid #ddd;
    background: #fff;
    background-repeat: no-repeat;
    background-position: top center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}
    
a.mainlinks span.image img {
    margin:8px;
} 
    
    
/* ---------- Buttons ---------- */
    
a.mainlinks span.button,
a.mainlinks span.button:visited {
    position:absolute;
    bottom:20px;    
    right:20px;
    height:20px;
    line-height:19px;
    font-size: 12px;
    color:white !important;
	-webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    -o-border-radius: 3px;
    border-radius: 3px;
    padding:0 10px;
    
    border: 1px solid #444;
    background: #111111;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#222222', endColorstr='#111111');
    background: -webkit-gradient(linear, left top, left bottom, from(#222222), to(#111111)); 
    background: -webkit-linear-gradient(top,  #222222,  #111111);
    background: -moz-linear-gradient(top,  #222222,  #111111);
    background: -ms-linear-gradient(top,  #222222,  #111111);
    background: -o-linear-gradient(top,  #222222,  #111111);
    background: linear-gradient(top,  #222222,  #111111);
}

a.mainlinks span.button:hover {
    text-decoration:none;
    color:#aaa !important;
    background: black;
    border: 1px solid #333;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#111111', endColorstr='#000000');
    background: -webkit-gradient(linear, left top, left bottom, from(#111), to(#000000));
    background: -webkit-linear-gradient(top,  #111,  #000000);
    background: -moz-linear-gradient(top,  #111,  #000000);
    background: -ms-linear-gradient(top,  #111,  #000000);
    background: -o-linear-gradient(top,  #111,  #000000);
    background: linear-gradient(top,  #111,  #000000);
}    
    
    
a.mainlinks span.button.white {
   	color:#999 !important;
   	border:1px solid #fff;
   	background: #e3e3e3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee');
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#eeeeee)); 
    background: -webkit-linear-gradient(top,  #ffffff,  #eeeeee);
    background: -moz-linear-gradient(top,  #ffffff,  #eeeeee);
    background: -ms-linear-gradient(top,  #ffffff,  #eeeeee);
    background: -p-linear-gradient(top,  #ffffff,  #eeeeee);
    background: linear-gradient(top,  #ffffff,  #eeeeee);
    text-shadow:1px 1px 0px white;
    box-shadow: 1px 1px 2px rgba(0,0,0,.2);
}

a.mainlinks span.button.white:hover {
    color:#777 !important;
   	border:1px solid #eee;
   	background: #e3e3e3;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e2e2e2');
    background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e2e2e2));
    background: -webkit-linear-gradient(top,  #f2f2f2,  #e2e2e2);
    background: -moz-linear-gradient(top,  #f2f2f2,  #e2e2e2);
    background: -ms-linear-gradient(top,  #f2f2f2,  #e2e2e2);
    background: -o-linear-gradient(top,  #f2f2f2,  #e2e2e2);
    background: linear-gradient(top,  #f2f2f2,  #e2e2e2);
}




/* MOBILE SITE */
@media screen and (max-width: 960px) {

.mob div.mainlinks_wapper {
	border: none;
}
.mob a.mainlinks {
	width: auto;
	height: auto;
	padding: 5px;
	margin-bottom: 10px;
	border: 1px solid #ddd;
    box-shadow: 0 0 4px #eee;
    border-radius: 4px;
}
.mob a.mainlinks:first-child {
	border-radius: 4px;
	border: 1px solid #ddd;
}
.mob a.mainlinks:last-child {
	border-radius: 4px;
	border: 1px solid #ddd;
	margin-bottom: 0px;
}

.mob a.mainlinks span.image {
	position: relative;
	display: block;
	top: auto;
	left: 5px;
}

    .mob a.mainlinks h2,
    .mob a.mainlinks span.title,
    .mob a.mainlinks span.blurb {
        margin: 5px;
    }
.mob a.mainlinks span.button, 
.mob a.mainlinks span.button:visited {
	position: inherit;
	margin-bottom: 5px;
	bottom: auto;
	right: auto;
}

}