/*  
Theme Name: EP magazine 2013
Theme URI: http://www.electronicperceptions.com
Description: Custom responsive theme for ElectronicPerceptions.com
Version: 1 (March 2013)
Author: Kathy Burns-Millyard
Author URI: http://www.electronicperceptions.com

Inspired by PRiNZ BranfordMagazine 2.51 (released 2008-04-20)
http://www.der-prinz.com

#### Color notes
Dark green #7FAAA6;
Pale green/gray tint #B9CADC; */


/******************************************
*   HTML Elements & structure          
******************************************/

body 
{ 

    font: normal 100% "Segoe UI Light", Sans-Serif; 
	background: #B9CADC;
} 
 

#page { /*the main container*/
	margin: 0.5em; 
	font-size:1em;
	background:#FFF;
	padding: 2%;
	border:3px double #7FAAA6;
	}


/******************************************
*   Page top                        
******************************************/

.header {
	margin: 1em auto;
	text-align:left;
	border-bottom:3px double #999;
	padding: 0.18em 0em 0.18em 0; 
    float:none;
    width:100%;
clear:both;
	}

.spacer {
	height: 1em auto;
	clear:both;
	border-bottom:3px double #999;
	}

.header-right {
	width:46%;
	height:95%;
	float:right;
	text-align:right;
	}

  .search {
    float: none;
    width: auto;
  }



/******************************************
*   Headers                        
******************************************/

h1 {
	color: #840000;
	font: 1.6em Georgia, "Times New Roman", Times, serif;
	padding: 0.15em 0; 
	border-bottom:3px double #7FAAA6;
	margin: 0.85em 0;
	}

h2 {
	color: #840000;
	font: 1.5em Georgia, "Times New Roman", Times, serif;
	padding: 0.15em 0; 
	border-bottom:1px solid #B9CADC;
	margin: 0.85em 0;
	}

h3 {
	font: 1em Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:0.2em;
	border-top:3px double #7FAAA6;
	border-bottom:1px solid #B9CADC;
	padding: 0.18em 0em 0.18em 0.18em; 
	margin: 0.85em 0;
	color:#840000;
	}

wpscst_edit_div.h3 {
	font: 1em Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:0.2em;
	padding: 0.18em 0em 0.18em 0.18em; 
	margin: 0.85em 0;
	color:#840000;
	}

h3.sub {
	font: 0.85em Arial, Helvetica, sans-serif;
	text-transform:uppercase;
	letter-spacing:0.1em;
	border-top:3px double #7FAAA6;
	border-bottom:1px solid #B9CADC;
	padding: 0.18em 0em 0.18em 0.18em; 
	margin: 0.15em 0;
	color:#840000;
	}

h1 a, h2 a, h3 a{
	display: block;
	text-decoration: none;
	color:#840000;
	}

/******************************************
*   Images                       
******************************************/

img {
/*	width: 100%;*/
	max-width: 100%;
	border:1px solid #999;
	padding:1px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

img.logo {
	max-width: 100%;
    float:left;
	border:none;
	padding:1px;
}


stockGrid {
	width:23%;
    max-width: 100%;
    height: auto;
    overflow: hidden;
	float:left;
	margin:0.5%;
}
 


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

.footer {
	margin: 1em auto;
	font-size:0.9em;
	text-align:center;
	border-top:3px double #999;
	padding: 0.18em 0em 0.18em 0.18em; 
	}

/******************************************
*   Layout                       
******************************************/


/******************************************
* DEFAULT Full screen display on 768px+

*@media screen and (min-width:47em) {
******************************************/
    .main {
        width:74%; /* 784/1056 */
        float:left;
    }

    .spotlight {
        width:100%; /* 784/1056 */
        float:left;
    }


   .Ad728, .mobilebuy {
    display: none;
  }


    .half {
        width:48%;
        float:left;
	margin:0.5%;
    }

    .half450h {
        width:48%;
        float:left;
	margin:0.5%;
	max-height:450px;
	overflow:hidden;
    }

    .half180h {
        width:48%;
        float:left;
	margin:0.5%;
	max-height:190px;
	overflow:hidden;
    }

    .fifth149h {
        width:18.75%;
        float:left;
	padding:0.5%;
	max-height:200px;
	overflow:hidden;
    }

    .fifth149h-cat {
        width:18.75%;
        float:left;
	padding:0.5%;
	height:150px;
	max-height:200px;
	overflow:hidden;
    }


    .third {
        width:31%;
        float:left;
	margin:0.5%;
    }

    .fifth {
        width:19%;
        float:left;
	margin:0.5%;
    }

    .Leftmain {
        width:55%;
        float:left;
    }

    .Rightmain {
        width:32%;
        float:left;
	margin:1em 0 0 1em;
    }

    .side {
        width:22%; /* 240/1056 */
        float:right;
	border-left:3px double #B9CADC;
	padding-left:0.5em;
	margin-left:0.5em;
    }


    .Stockmain {
        width:54%; /* 784/1056 */
        float:left;
    }
    .Stockside {
        width:40%; /* 240/1056 */
        float:right;
	border-left:3px double #B9CADC;
	padding-left:0.5em;
	margin-left:0.5em;
    }





/******************************************
* landscape

@media screen and (min-width: 768px) and (orientation: landscape) {

    saved for later...

}
*****************************************/



/******************************************
* Smaller screens and windows
******************************************/


@media screen and (max-width: 767px) {

#page {
	margin: 0.005em;
	padding: 0.5em;
	font-size:0.9em;
	}

  .main, .header-right, .Stockmain, .Leftmain, .Rightmain, .spotlight {
    float: none;
    width: auto;
  }

    .half, .half450h, .half180h {
        width:48%;
        float:left;
	margin:0.5%;
    }

    .third, .fifth, .fifth149h {
        width:31%;
        float:left;
	margin:0.5% 0 2% 1%;
    }


   .Ad728, .mobilebuy {
    margin: 2px 2px 2px 10px;
  }


.left, .leftthumb {
	float:left;
	margin-right: 0.001em;
	}


.side,  .footer {
    float: none;
    width: auto;
	border-top:3px double #999;
	border-left:none;
	margin: 1em auto;
  }

}

/******************************************
* TINY  screens and windows
******************************************/

@media screen and (max-width: 467px) {

.left, .half, .third, .fifth, .fifth149h, .half450h, .half180h {
	float:none;
   width: auto;
   height: auto;
	}

   .Stockside {
    display: none;
  }

ul, li {
	padding:2px 2px 2px 8px;
	}

   .mobilebuy {
	display:block;
	float:none;
   width: auto;
   height: auto;
  }



}


/******************************************
*   Containers (IE 10 Only as of 3/18/13)      
******************************************/

.articleContainer
{ 
/*    column-count: 3; 
    column-gap: 20px; 
    column-rule: 1px solid black; 
     -ms-hyphens: auto; 
    text-align: left; */

  columns: auto 16em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: solid;
  column-rule-color: black;
  column-fill: balance;
	margin-top: 1em;
}

.stockContainer
{ 
  columns: auto 12em;
  column-gap: 1em;
  column-rule-width: 1px;
  column-rule-style: none;
	margin-top: 1em;
}

/******************************************
*   Main or page navigation styles                       
******************************************/

/*Main Navbar */

#Mainnav {
	font-size:0.9em;
	float:right;
	margin:0 0 0.15em 0;
	}
	
#Mainnav, #Mainnav ul {
	list-style:none;

	}

#Mainnav a, #Mainnav a:hover {
	display: block;
	text-decoration: none;
	border:none;
	}

#Mainnav a, #Mainnav a:visited {
	color: #333;
	}

#Mainnav li {
	float: left;
	list-style:none;
	border-right:1px solid #fff;
	}

#Mainnav a:hover, #Mainnav a:active {
	background:#DE9A73;
	text-decoration:none;
	}	

ul, li {
	padding:4px 4px 4px 12px;
	}


/******************************************
*   Forms                       
******************************************/

fieldset > div {
	background-color: #fff;
	border: none;
	margin: 0 15px;
	padding: 0 5px;
	}
	
input[type=text], textarea {
	background-color: transparent;
	border: 1px solid #ccc;
	line-height: 1.2em;
	margin: 0;
	outline: none;
	padding: 3px 0;
	width: 70%;
	}

fieldset > div, input[type=text], textarea {
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	}

/******************************************
*   Other                       
******************************************/