@import url('../twentytwelve/style.css');

/*
Theme Name: HotFreeSamplesUK 2015
Author: HotFreeSamples.co.uk
Template: twentytwelve
Version: 0.1.0
*/

/********** Site Wrapper & Body **********/
.wrapper {
		/*background-color: #EFE9EE;*/
}

body {
    background-color: #FFFFFF;				/* change background colour to white */
	border-top: 10px solid #EEEEEE;			/* add line at top of website */
}

body .site {
    box-shadow: none; 						/* get rid of shadow border around site */
	margin-top: 0px;						/* push site content and header right to top of browser */
}


/********** Anchor Text - Main Content **********/

a {
	color: #ED2877;							/* makes links in main content Pink */
}

a:hover {
	color: #ED2877;							/* keeps links Pink on hover */	
	text-decoration: none;					/* turns on hover underlining of links in main content */
}

/********** Navigation Menu **********/

.main-navigation {
	margin-top: 0px;						/* was 24 px - Push the navigation menu higher up, directly below header graphic */
}

.main-navigation a {
	color: #333333 !important;				/* make navigation anchors different color */
	font-size: 18px;						/* makes navigation anchors text size bigger */
}

.main-navigation a:hover {
	color: #FFFFFF !important;				/* make navigation anchors different color */
}

.main-navigation li {
	border-right: 1px solid #FFFFFF; 		/* Seperate menu items with white line */
	margin: 0 0 0 0;						/* gets rid of the right margin on the navigation menu items */
}

.main-navigation li:hover{
	background-color: #333333; 				/* grey background when hover over navigation menu items */
}

.main-navigation li  a {
	padding: 0px 12px 0px 12px;			/* adding padding around menu item text */
}

.main-navigation li a:hover {
	color: #FFFFFF;
}

.main-navigation ul.nav-menu, 
.main-navigation div.nav-menu > ul {
    /*border-bottom: 3px double #EDEDED;*/		/* giving the navgiation menu double lines */
    /*border-top: 3px double #EDEDED;*/			/* giving the navgiation menu double lines */
	background-color: #EEEEEE; 					/* add navigation menu background color */
	font-family: "Oswald", Helvetica, Arial, sans-serif;	/* Google Font on Navigation Menu */
}

/********** Header **********/

.header-image {
	margin-top: 0px;						/* pushses header graphic RIGHT to top */
}

.site-header {
    padding: 0px;							/* pushes header  graphic to VERY TOP of page */
} 

img.header-image {
	box-shadow: none;						/* get rid of box shadow around header image */
}

/********** Page Content **********/

.entry-header {
	font-family: "Oswald",Helvetica,Arial,sans-serif; /* Customize the Post Title Font to a Google Custom Font */
	text-transform: uppercase;							/* Make post titles all capitals */
}

.entry-header .entry-title  a {
	/*font-size: 30px;*/
	/*line-height: 30px; */
	color: #333333;							/* post titles non-hover */
}

.entry-header .entry-title a:hover {
	color: #ED2877;							/* pink color on hover post titles */
}

.site-content article {
    border-bottom: 4px solid #EEEEEE;		/* adds a solid line seperating posts */
}

/********** Widget Area **********/

.widget-area .widget {
    /*border-bottom: 3px double #E5E5E5;*/		/* adds double lines under each wdiget */
	border-bottom: 3px solid #EFE9EE;			/* adds a solid line under each widget */
    margin: 0 0 15px;
    padding: 0 0 20px;
	/*background-color: #EFE9EE;*/				/* gives the widgets a background color - not so good for conversion */
}

.widget-area .widget h3 {
    font-size: 14px;						/* changing font size on sidebar widget headings */
    margin: 0 0 5px;						/* changing margin on sidebar widget headings */
	font-family: "Oswald", Helvetica, Arial, sans-serif;	/* Custom Google Font on Widget Titles */
}

.widget-area .widget a {
	text-decoration: none;					/* Remove underlining of links in sidebar wadgets */
	color: #ED2877;							/* make links Pink in sidebar widgets */
}

.widget-area .widget a:hover {
	color: #0069d6;							/* widget links hover colour */
}


/********** Footer **********/

footer[role="contentinfo"] {
    border-top: none;						/* remove line at top of footer area */
	background-color: #EEEEEE;				/* add footer background color */
}

.site-info{
	text-align: center;						/* customize the footer area */
}

.template-front-page .widget-area .widget:nth-child(2n+1) {
	border-bottom: none;					/* remove the bottom border underneith footer widgets */
}

.template-front-page .widget-area .widget li {
    list-style: none;						/* Remove bullet points from footer widget content */
}

/********** Search **********/

button, input, textarea {
	border: 2px solid #EEEEEE;				/* thick border around search button - make it stand out */
	border-radius: 0px;						/* giving search box sharp edges */
	margin-top: 30px;
}

/********** Breadcrumbs **********/
#breadcrumbs {
	margin-left:10px;
	margin-bottom:10px;
	margin-top:10px;
}

/********** Bullet Points **********/
.entry-content ul li{ 							/*  Add custom bullet points */
	list-style:url("http://www.hotfreesamples.co.uk/wp-content/uploads/2013/08/kiss-bullet.jpg");
}

/********** YARPP **********/
.entry-content h3, .comment-content h3 {
    font-family: "Oswald",Helvetica,Arial,sans-serif;	/* YARPP Font Style - change to Google Custom font */
}

span.yarpp-thumbnail-title {
	text-decoration: none !important;					/* YARPP remove underline of anchor text */
}

/*********** SidebarDomination ***********/
.sd-sidebar-widget-wrapper .sd-sidebar-box .title {			/* Box Heading */
	font-family: "Oswald", Helvetica, Arial, sans-serif;	/* Custom Google Font */
	color: #ED2877 !important;
}

button, input, textarea {
    border: 4px solid #ED2877;
    border-radius: 0 0 0 0;
    color: #222222;
    margin-top: 30px;
}

.sd-sidebar-widget-wrapper .sd-sidebar-box input[type="text"]{		/* input fields */
	border: 4px solid #ED2877;
}

.sd-color-vanilla {							/* add a graphic background */
    /*background: none !important;*/
	/*background-image:url("http://www.hotfreesamples.co.uk/wp-content/uploads/2013/07/action-box-logo.png") !important;*/	
}

/*********** Styling the Extra Head Info ***********/
.extra-header-info {
	text-align: right !important;
	margin-top: 20px !important;
}

.extra-header-info a {
	text-decoration: none !important;
	color: #222222 !important;
	font-family: "Oswald", Helvetica, Arial, sans-serif !important;	/* Custom Google Font */
}

.extra-header-info a:hover {
	color: #ED2877 !important;
}

/*********** Styling the Extra Footer Info ***********/
.footer-legal-info {
	text-align: center;
}

.footer-legal-info a {
	text-decoration: none;
	font-family: "Oswald", Helvetica, Arial, sans-serif;	/* Custom Google Font */
}

.footer-about-info {
	text-align: center;
}

.footer-about-info a {
	text-decoration: none;
	font-family: "Oswald", Helvetica, Arial, sans-serif;	/* Custom Google Font */
}

/*********** Styling the Category Description text ***********/
.archive-meta {
		font-size: 100%;
}

/*********** Aweber Optin Box - Adding Google Custom Font ***********/

#af-form-602905087 .bodyText p {
    font-family: "Oswald", Helvetica, Arial, sans-serif;	/* Custom Google Font */
}

/*********** WP Paginate plugin - navigation buttons ***********/
.wp-paginate .current {
    background: none repeat scroll 0 0 #ed2877 !important;
    border: 1px solid #ed2877 !important;
}

/*********** move Sidebar Left for Higher AdSense Earnings ***********/
/** http://wordpress.org/support/topic/move-main-sidebar-in-twenty-twelve **/

/** move sidebar to the left **/
@media screen and (min-width: 600px) {
    .site-content {
        float: right !important;
    }
    .widget-area {
        float: left !important;
    }
}

/** for IE8 and IE7 **/
.ie .site-content {
    float: right !important;
}
.ie .widget-area {
    float: left !important;
}

.ie .template-front-page #secondary.widget-area {
 width: 100%; 
}
  .ie .template-front-page #secondary.widget-area .first.front-widgets {
width: 50.1%; margin-right: 3%; background: #f4f4f4; 
}
  .ie .template-front-page #secondary.widget-area .second.front-widgets {
width: 46.8%; margin-right: 0; background: #f4f4f4; 
}
 .ie .template-front-page #secondary.widget-area .widget {
 width: 100%;  
}


/* Custom Category Posts Styling */

.custom-posts-wrapper {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.custom-post-card {
    width: 48%;
    margin: 1%;
    background: #ffffff;
    box-sizing: border-box;
    border: 1px solid #eee;
}

.custom-post-image img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.custom-post-content {
    padding: 20px;
}

.custom-post-content {
    padding: 25px;
}

.custom-post-title {
    margin: 0 0 18px 0;
    font-size: 20px;
}

.custom-post-excerpt {
    margin: 0 0 20px 0;
    line-height: 1.7;
    font-size: 15px;
}