/* @override 
	http://test.angusjournal.com/_netajsite/southdevon2013/css/mobile.css */

/* ====================================
	Design: The North American South Devon Association 
	CSS: Tim Blumer (Angus Journal Web Services)
	Built: 07/05/2013
	Last Edit: 07/05/2013
	URI: 
	v1.0 | 05-01-2013
=======================================*/

/* ---------- Tablets (portrait) ---------- */

@media screen and (min-width: 700px) and (max-width: 800px){

body{}
#container{width: 100%;}
header {
	background-color: #5a0624;
	background-size: 100%;
	height: 108px;
}
header img{}
header a {
	height: auto;
}
#wrapper{}
.primarynav{
	width: 100%;
	padding: 10px 0;
	top: 108px;
}
.primarynav ul li a {}
#content{
	width: 81%;
}

#content img, figure img{
	max-width: 95%;
	height: auto;
	float: none;
	margin: 0;
}
.main{
	width: 66%;
	margin-bottom: 10px;
}
.sidebar{
	width: 30%;
}
.newsbox{
	background-color: #e7ddcc;
}
.lowerpic{
	width: 100%;
	display: block;
}

.lowerpic .threeCol{
	width: 32%;
	margin-right: 4px;
	margin-left: 4px;
}
.lowerpic .threeCol img{
	max-width: 100%;
	height: auto;
}
.twoCol, .threeCol{
	width: 100%;
	float: none;
	margin: 0;
}

.animalBox{
	width: 100%;
}
.animalBox a img{
	max-width: 95%;
	height: auto;
}
.animalBox a:hover{}
form .twoCol{width: 100%;
	padding: 0;
}
.realname, .ranch, .address, .email{width: 92%;}
.city{width: 93%;}
.state{width: 48%;}
.zip{width: 43%;}
.phone{ width: 42.8%;}
.comments{
	width: 89%;
	height: 155px;
}
footer{
	
}

}/* << don't delete this */

/* -------------- Phones ---------------- */
@media screen and (max-width: 700px){

body {}
#container {width: 100%;}
#wrapper {
	padding-right: 0px;
	padding-left: 0px;
	margin: 0;
	width: 100%;
}
header {
	background-color: #590624;
	background-image: url("../images/template/mobileHead.png");
	background-size: auto;
	background-position-x: center;
	height: auto;
}
header a {
	height: 79px;
	padding-top: 10px;
	padding-bottom: 10px;
}
header a h1 {}
.main{
	display: block;
	float: none;
}
.sidebar, .lowerpic{
	display: block;
	width: auto;
	float: none;
	margin: 10px auto auto;
	text-align: center;
}
.lowerpic .threeCol{
	display: block;
	float: none!important;
	width: 100%;
}
.lowerpic .threeCol img{
	max-width: 95%;
	height: auto;
}
.newsbox, .newsboxEnd{
	background-size: 95%;
	text-align: left;
}
.newsbox{
	padding-top: 35%;
	padding-right: 10%;
	padding-left: 10%;
}
.newsboxEnd{
	height: 60px;
}
.primarynav{
	clear: both;
}
.primarynav {
	position: static!important;
	width: auto;
	padding: 0;
	font-size: 1.5em;
	margin: auto;
	float: none;
}
.primarynav ul {
	display: block;
	position: static;
	width: 100%;
}
.primarynav li {
	display: block;
}
.primarynav li a {
	display: block;
}
.primarynav li a:hover {}

#subnav{
	position: static!important;
	width: auto;
	padding: 0;
	font-size: 1.5em;
	margin: auto;
	float: none;
}

#subnav > li.sub {
	position: relative;
}
#subnav li.sub a:after{
	content: "";
	float: right;
}
#subnav > li.sub ul {
	list-style: none;
	position: relative;
	left: 28px;
	background-color: #570026;
	width: 80%;
	-moz-box-shadow: none;
	-webkit-box-shadow: none;
	box-shadow: none;
	
}

#subnav > li.sub ul li {
	display: block;
	width: 100%;
}

#subnav > li.sub ul li a {
	height: 100%;
	display: block;
	color: #fff;
	text-decoration: none;
	padding: 8px;
}

#subnav > li.sub ul li a:hover {
	background-color: #efe0ba;
	color: #570026;
}

/* Step 3: Hover effect */

#subnav > li.sub:hover ul {
	top: 0;
	left: 50px;
	width: auto;
	border: none;
}



#content {
	width: auto;
	float: none;
	margin: auto;
}
#content img{
	max-width: 95%;
	height: auto;
	float: none;
	margin: 0;
}
#content, #content p, #content ul li, #content ol li{}	

.main{
	display: block;
	float: none;
	margin: auto;
	width: auto;
}
footer{
	width: 100%;
	margin: 0;
	border-top: 1px dashed #efdcae;
	padding: 20px 0;
}
#api {
	width: 85%;
	margin: 10px auto 20px;
}
a.menu{
	visibility: visible;
	width: auto!important;
	text-decoration: none;
	font-weight: bold;
	padding: 9px;
	border-bottom: 1px solid #051024;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	color: #ffffff;
	text-shadow: 0 -1px #0c2960;
	margin: 0;
	height: auto;
	font-size: 1.5em;
	line-height: 1.5em;
	background-color: #5a0624;
}

i.menu-button {
	font-size: 1.5em;
}

a.menu i{
	float: right;
}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.twoCol, .threeCol, .animalBox {
	display: block;
	float: none;
	margin: 0;
	width: 100%;
}
.memBox{
	float: none;
	width: auto;
}
.left {
	float: none;
	margin-right: 0px;
	margin-bottom: 10px;
}

.right {
	float: none;
	margin-left: 0px;
	margin-bottom: 10px;
}

form .twoCol{
	margin: 0 0 8px;
	width: 100%;
	padding: 0;
}
input, textarea {}
fieldset {width: 93%; margin: auto;}
fieldset p {}
fieldset ul {margin-left: 0;}
.realname, .ranch, .address, .email {width: 96%;}
.city {width: 96%; margin-bottom: 10px;}
.state {width: 96%;	margin-bottom: 10px;}
.zip {width: 96%;}
.phone {width: 96%; margin-bottom: 10px;}
.comments {width: 96%; height: 120px;}

/*EPDs and PEDs*/
.PedAnmName {
	color: #86003a;
	font-weight: bold;
	padding: 9px;
	text-align: center;
	font-size: 1.5em;
}

.PedCalvedRow {
	font-style: italic;
	padding-bottom: .75em;
	text-align: center;
	font-size: 1em;
}
.epdall {
	display: block;
	width: 100%;
}

.epdall td {display: block;}
.PedTable {
	width: auto;
	letter-spacing: -1px;
	line-height: 1.8em;
	font-size: 1em;
	margin: auto;
	-moz-box-shadow: none!important;
	-webkit-box-shadow: none!important;
	box-shadow: none!important;
}
.PedTable tbody tr{}

.PedPGS, 
.PedMGS, 
.PedPGD, 
.PedMGD 
{
	margin-left: 0;
	margin-right: 0;
}

.PedS, .PedD {
	color: #86003a;
	font-weight: bold;
}

.PedPGS, .PedPGD, .PedMGS, .PedMGD {
	margin-left: 3em;
	margin-right: 1em;
}

.PedPGS:before, 
.PedMGS:before 
{
	content: "\00250C\0000a0";
	display: block;
}
.PedPGD:before, 
.PedMGD:before {
	content: "\002514\0000a0";
}
.PedTable td {
	display: block;
	text-align: left;
}
.PedTable td:last-child {
	visibility: collapse;
	height: 0;
}

.divEpdTbl td {}

.EPDProdTable, 
.EPDMatTable, 
.EPDCarcTable, 
.EPDValueTable, 
.PerformanceDataTable, 
.DamProdAvgTable 
{
	border-top: 1px solid #b3b3b3;
	border-left: 1px solid #b3b3b3;
}

.EPDProdTable td, 
.EPDMatTable td, 
.EPDCarcTable td, 
.EPDValueTable td, 
.PerformanceDataTable td, 
.DamProdAvgTable td 
{
	border-right: 1px solid #b3b3b3;
	border-bottom: 1px solid #b3b3b3;
}

.EPDProdHeaderProd, 
.EPDMatHeaderMat, 
.EPDCarcHeaderCarc, 
.EPDValueHeaderValue, 
.PerformanceDataTableHeaderPerf, 
.DamProdAvgHead 
{
	text-align: center;
	text-shadow: 0 1px 0 #ffffff;
	font-size: 1.7em;
}

.EPDProdSubHeader, 
.EPDMatSubHeader, 
.EPDCarcSubHeader, 
.EPDValueSubHeader, 
.PerformanceDataSubHeader, 
.DamProdAvgSubHead 
{
	visibility: collapse;
	display: none;
	height: 0;
}

.EPDProdDataCED, 
.EPDProdDataBirth, 
.EPDProdDataWW, 
.EPDProdDataYR, 
.EPDProdDataRadg, 
.EPDProdDataYHT, 
.EPDProdDataSC, 
.EPDProdDataDoc, 
.EPDMatDataHP, 
.EPDMatDataCEM, 
.EPDMatDataMilk, 
.EPDMatDataMKHMKD, 
.EPDMatDataMWT, 
.EPDMatDataMHT, 
.EPDMatDataAnmEn, 
.EPDCarcDataCWT, 
.EPDCarcDataMARB, 
.EPDCarcDataRIB, 
.EPDCarcDataFAT, 
.EPDCarcDataCarcGrp, 
.EPDCarcDataUsndGrp, 
.EPDValueDataWv, 
.EPDValueDataFv, 
.EPDValueDataGv, 
.EPDValueDataQg, 
.EPDValueDataYg, 
.EPDValueDataBv 
{
	display: block;
	padding-left: 1px;
	text-align: center;
	background-color: #ffffff;
	font-weight: bold;
	text-shadow: 0 1px 1px #ffffff;
	color: #333333;
	font-size: 1.5em;
}

.EPDAcc {padding-left: 20px;}

.EPDProdDataCED:before,	
.EPDProdDataBirth:before, 
.EPDProdDataWW:before, 
.EPDProdDataYR:before, 
.EPDProdDataRadg:before, 
.EPDProdDataYHT:before, 
.EPDProdDataSC:before, 
.EPDProdDataDoc:before, 
.EPDMatDataHP:before, 
.EPDMatDataCEM:before, 
.EPDMatDataMilk:before, 
.EPDMatDataMKHMKD:before, 
.EPDMatDataMWT:before, 
.EPDMatDataMHT:before, 
.EPDMatDataAnmEn:before, 
.EPDCarcDataCWT:before, 
.EPDCarcDataMARB:before, 
.EPDCarcDataRIB:before, 
.EPDCarcDataFAT:before, 
.EPDCarcDataCarcGrp:before, 
.EPDCarcDataUsndGrp:before, 
.EPDValueDataWv:before, 
.EPDValueDataFv:before, 
.EPDValueDataGv:before, 
.EPDValueDataQg:before, 
.EPDValueDataYg:before, 
.EPDValueDataBv:before 
{
	background-color: #e3c68e;
	color: #86003a;
	text-shadow: 0 1px 1px #ffffff;
	display: block;
	text-align: center;
	margin: -3px -3px 4px;
	padding-top: 10px;
	padding-bottom: 10px;
	font-style: italic;
}

.EPDProdDataCED:before 		{content: "CED"}
.EPDProdDataBirth:before 	{content: "BW"}
.EPDProdDataWW:before 		{content: "WW"}
.EPDProdDataYR:before 		{content: "YW"}
.EPDProdDataRadg:before 	{content: "RADG"}
.EPDProdDataYHT:before 		{content: "YH"}
.EPDProdDataSC:before 		{content: "SC"}
.EPDProdDataDoc:before 		{content: "Doc"}
.EPDMatDataHP:before 		{content: "HP"}
.EPDMatDataCEM:before 		{content: "CEM"}
.EPDMatDataMilk:before 		{content: "Milk"}
.EPDMatDataMKHMKD:before 	{content: "MKH/MKD"}
.EPDMatDataMWT:before 		{content: "MW"}
.EPDMatDataMHT:before 		{content: "MH"}
.EPDMatDataAnmEn:before 	{content: "$EN"}
.EPDCarcDataCWT:before 		{content: "CW"}
.EPDCarcDataMARB:before 	{content: "MARB"}
.EPDCarcDataRIB:before 		{content: "RE"}
.EPDCarcDataFAT:before 		{content: "FAT"}
.EPDCarcDataCarcGrp:before 	{content: "Carc GRP/PRG"}
.EPDCarcDataUsndGrp:before 	{content: "Usnd GRP/PRG"}
.EPDValueDataWv:before 		{content: "$W"}
.EPDValueDataFv:before 		{content: "$F"}
.EPDValueDataGv:before 		{content: "$G"}
.EPDValueDataQg:before 		{content: "$QG"}
.EPDValueDataYg:before 		{content: "$YG"}
.EPDValueDataBv:before 		{content: "$B"}

}
