/***********************/
/*   shippingguide.css */
/*    2019.8.5 5:00    */
/*  last update: 10/8  */
/*    c0de by ty       */
/*                     */
/***********************/

/* presets */
html {
    box-sizing:border-box;
}
*,*::before,*::after {
    box-sizing:inherit;
}
img {
    display:block;
    width:100%;
    height:auto;
}
a:active,
a:hover {
	text-decoration:none;
	color:rgba(66, 173, 244, 1);
}
/* end presets */

/* page frame */
body {
    background:url("../images/bgdark.jpg") repeat 50% 0;  /* 50x50 */
    font-family:"Times New Roman", serif;
	font-size:1.675em;
	line-height:1.4;
}
/* end page frame */

/* outer div */
.outer {
	border:200px solid transparent;
	border-image:url("../images/sgbg.png") 50 repeat;
	border-width:100px;
}

/* content wrapper */
.contentwrap {
	background:#FFF;
	overflow:hidden;
	border:4px dashed pink; /* test outline */
	padding:0.5%;
}

.toplink {
	text-align:left;
}

.toplink a {
	font-size:0.8em;
	color:rgba(199,80,89);
}

.toplink a:hover,
.toplink a:active {
	color:rgba(221,154,159);
	text-decoration:none;
}

/* table of contents elements */
.introwrap {
	margin:0 auto;
	text-align:center;
}

h1 {
	font-size:3em;
	line-height:1.2;
	text-shadow:1px 3px 4px rgba(4, 180, 95, 1);
	margin:0 0 12px;
}

.introwrap img {
	max-width:404px;
	margin:0 auto;
}

.introwrap p:last-of-type {
    position:absolute;
    top:40%;
    left:0;
    width:100%;
    text-align:center;
	font-size:2em;
    z-index:-1;
}

h2 {
	padding-top:12px;
	font-size:2em;
	font-weight:normal;
	text-decoration:underline;
}

.introwrap ol {
	list-style-type:upper-roman;
	list-style-position:inside; /* required for Chrome */
	line-height:2;
	margin-right:36px;
}

.introwrap ol ol {
	list-style-type:lower-alpha;
	text-align:left;
	line-height:1.6;
	padding-left:42.5%;
	font-size:0.9em;
}

.introwrap ol ol a {
	color:rgba(89, 131, 131, 1);
}

.introwrap ol ol a:active,
.introwrap ol ol a:hover {color:rgba(124, 167, 167, 1);}

.introwrap::after { /* first page divider graphic */
	content:"";
	background:url("../images/pagedividers.gif") no-repeat center 0;
	display:block;
	height:171px;
	margin-top:50px;
}
/* end table of contents elements */

/* article elements */
.articlewrap {
	padding:1%;
}

h3 {
	text-decoration:underline;
	font-weight:normal;
	font-size:1.5em;
	padding:19px 0 0 16%;
	margin:110px 0 43px;
}

h3:first-of-type {margin-top:25px;}

/* left and right floated content boxes */
.right,
.left {
    overflow:hidden;
}

.right img,
.left img {
    max-width:780px;  /* set max-width of images here.  some images may be narrower, none will be wider. */
}

.right .imgwrap,
.left .imgwrap {
    display:table;
    border:4px ridge #000;
    margin:0;
}

.right .imgwrap {
    float:right;
    margin-left:1%;
}

.left .imgwrap {
    float:left;
    margin-right:1%;
}

.left p, .right p {
    margin-top:0;
}

/* article section links */
.articlenavlink {
	text-align:right;
}

.articlenavlink a {
	color:rgba(199,80,89);
	padding-right:3%;
}

.articlenavlink a:hover,
.articlenavlink a:active {
	color:rgba(221,154,159);
	text-decoration:none;
}

.articlenavlink span {
	background:url("../images/backarrow.gif") no-repeat;
	display:inline-block;
	height:26px;
	width:26px;
}

.articlenavlink .first {
	background-position:0 -26px;
}

/* unordered list for glossary of terms */
ul {
	margin-left:5%;
}

ul li {
	margin-bottom:26px;
}


/* text presets */
p.nofloat {
	max-width:86%;
	margin:0 auto;
	margin-bottom:2%;
}

span.bold {font-weight:bold;}
span.ital {font-style:italic;}
span.boldital {font-weight:bold; font-style:italic;}
span.freightpro {
	font-family:"Comic Sans MS";
	font-size:1.3em;
	text-shadow:3px 2px 3px rgba(62,165,64);
}
span.multi {
	font-family:"Arial";
	font-size:0.8em;
}


/* end article elements */


/* media queries */
@media screen and (max-width:1600px) {
	.right img, .left img {max-width:710px;}
}

@media screen and (max-width:1520px) {
	.right img, .left img {max-width:670px;}
}

@media screen and (max-width:1460px) {
	.right img, .left img {max-width:630px;}
}

@media screen and (max-width:1360px) {
	.right img, .left img {max-width:590px;}
}

@media screen and (max-width:1270px) {
	.right img, .left img {max-width:550px;}
}

@media screen and (max-width:1225px) {
	.right img, .left img {max-width:515px;}
}

@media screen and (max-width:1150px) {
	.articlenavlink {text-align:center;}
	.articlenavlink a {display:inline-block;}
	.articlenavlink a:first-of-type {padding-bottom:2%;}
	.right img, .left img {max-width:460px;}
}

@media screen and (max-width:1100px) {   /* clear the image floats */
	
	.right img, .left img {max-width:430px;}
	h3 {padding-left:10%; font-size:1.4em;}  /* resize article section headers */
}

@media screen and (max-width:1060px) {
	.right img, .left img {max-width:395px;}
}

@media screen and (max-width:1000px) {
	.toplink {text-align:center;}
	.introwrap ol ol {padding-left:28%;}
	h3 {
		padding-left:9%;
		font-size:1.3em;
	}
	.right img, .left img {max-width:380px;}
	ul li {margin-bottom:4%;}
}

@media screen and (max-width:940px) {
	.right img, .left img {max-width:345px;}
}

@media screen and (max-width:915px) {
	.introwrap::after {background-size:cover;}
	.right img, .left img {max-width:310px;}
	p.nofloat {max-width:90%;}
}

@media screen and (max-width:870px) {
	.introwrap::after {background-size:cover;}
	.right img, .left img {max-width:290px;}
	p.nofloat {max-width:90%;}
}


@media screen and (max-width:850px) {
	body {font-size:1.35em;}
	.outer {border-width:85px;}
	h1 {font-size:2.7em;}
	.introwrap p:last-of-type {font-size:1.65em;}
	h2 {font-size:1.8em;}
	h3 {padding-left:6%;}
	.left img, .right img {max-width:520px;}
	.left .imgwrap, .right .imgwrap {
		float:none;
		margin:0 auto;
	}
	.left p, .right p {padding-top:4%;}
	ul {
		margin-left:0;
		padding-left:10%;
	}
	p.nofloat {max-width:95%;}
}

@media screen and (max-width:800px) {
	.introwrap::after {
		height:98px;
		background-position:center -200px;
		background-size:initial;
	}
	.articlewrap{padding:0.5%;}
	ul li {margin-bottom:5%;}
}

@media screen and (max-width:750px) {
	body {font-size:1.2em;}
	.outer {border-width:75px;}
	h1 {font-size:2.4em;}
	.introwrap p:last-of-type {font-size:1.4em;}
	h3 {
		padding-left:0;
		text-align:left;
	}
}

@media screen and (max-width:700px) {
	.toplink {display:none;}
	.introwrap ol {
		text-align:left;
		list-style-position:outside;
		margin:0;
	}
	.introwrap ol ol {padding-left:15%;}
	ul li {margin-bottom:8%;}
}

@media screen and (max-width:630px) {
	.outer {border-width:50px;}
	.introwrap::after {background-position:center -302px;}
	p.nofloat {max-width:100%;}
}

@media screen and (max-width:600px) {
	.contentwrap {border:none;} /* clear dashed border */
	.introwrap ol ol {padding-left:10%;}
	.articlewrap {padding:0;}
	h3 {padding-top:15px;}
	ul li {margin-bottom:12%;}
}

@media screen and (max-width:550px) {
	h3 {padding:22px 0 12px;}
}

@media screen and (max-width:530px) {
	.introwrap p:last-of-type {font-size:1.15em;}
	.introwrap ol li {padding-bottom:15px;}
	.introwrap::after {background-position:center -403px;}
}

@media screen and (max-width:500px) {
	.contentwrap {padding:2px;}
	h2 {font-size:1.2em;}
	.introwrap ol ol {padding-left:5%;}
}

@media screen and (max-width:420px) {
	.outer {border-width:36px;}
}

@media screen and (max-width:375px) {
	h3 {
		text-align:center;
		margin-right:8px;
		padding:30px 0 17px;
	}
	ul li {margin-bottom:40px;}
}

@media screen and (max-width:345px) {
	.introwrap ol li {padding-bottom:20px;} 
	.introwrap::after {background-position:center -499px; padding-bottom:115px;}
	.articlenavlink {padding-top:10%;}
}