@import url('https://fonts.googleapis.com/css?family=Lobster|Playfair+Display:400i|Roboto|Fjalla+One');

/***********************************
	application
************************************/
.appwrap2 {
position:relative;
width:550px;
height:492px;
border:8px solid #ddd;
margin:30px 0 3px;
}
.appwrap {
position:relative;
width:550px;
height:492px;
border:1px solid #999;
}
.ntitle {
width:530px;
height:30px;
background:#5f6b6d;
color:#fff;
font-family:'Lobster', cursive !important;
text-transform:capitalize;
font-weight:400 !important;
font-size:30px;
position:relative;
text-align:right;
font-style: normal !important;
padding:32px 10px 11px;
}
.ntitle img {
position:absolute;
left:10px;
top:10px;
width:100px;
height:100px;
border:5px solid #ddd;
z-index:50;
}
.nshipper {
height:470px;
background:#b6b6b6;
border-bottom:15px solid #111;
padding:0;
}
.Ncontainer {
position:relative;
height:400px;
}
.appav {
position:relative;
float:left;
width:250px;
height:400px;
}
.appav img {
position:relative;
float:left;
width:200px;
height:300px;
}
.nstuff {
position:relative;
float:left;
height:205px;
width:395px;
overflow:auto;
text-align:center;
font-family:tahoma,calibri,sans-serif;
font-size:10px;
line-height:150%;
color:#000;
padding:5px;
}
.nstuff2 {
position:relative;
float:right;
height:130px;
width:390px;
overflow:auto;
text-align:center;
font-family:tahoma,calibri,sans-serif;
font-size:10px;
line-height:150%;
color:#000;
padding:5px;
}
.nstuff3 {
position:relative;
float:right;
height:350px;
width:519px;
overflow:auto;
text-align:center;
font-family:tahoma,calibri,sans-serif;
font-size:10px;
line-height:150%;
color:#000;
padding:5px;
}
.appinfo2 p {
color:#111;
}
.head {
color:#333;
font-family:'Fjalla One', sans-serif !important;
font-weight:900;
text-transform:uppercase;
font-size:15px;
border-bottom:solid 1px #555;
text-align:left;
}
.head2 {
color:#333;
font-family:'Fjalla One', sans-serif !important;
font-weight:900;
text-transform:uppercase;
font-size:15px;
border-bottom:solid 1px #555;
text-align:right;
}
.appinfo2 {
height:360px;
width:530px;
overflow:auto;
text-align:justify;
color:#111;
font-family:'arial',sans-serif;
font-size:12px;
line-height:130%;
}
.appinfo2 .img1 {
width:100px;
height:100px;
float:right;
border:5px solid #ddd;
margin:20px 10px 0 5px;
}
.appinfo2 .img2 {
width:100px;
height:100px;
float:left;
border:5px solid #ddd;
margin:30px 5px 0 10px;
}

.appinfo2 img {
width:100px;
height:100px;
border:5px solid #ddd;
float:left;
margin:30px 5px 0 10px;
}
.appinfo2 img:first-child {
float:right;
margin:20px 10px 0 5px;
}

.appcontent {
width:531px;
height:360px;
top:41px;
left:0;
position:absolute;
background:#eee;
color:#000;
border-bottom:8px solid #5f6b6d;
padding:10px 10px 0;
}
.apptabs {
width:551px;
height:420px;
position:absolute;
top:73px;
clear:both;
background:#ddd;
}
.apptab {
float:left;
padding:5px 0;
}
.apptab label {
position:relative;
left:325px;
font-family:oswald;
font-size:11px;
text-align:left;
text-transform:uppercase;
color:#999;
margin-left:3px;
padding:5px 15px 0;
}
.apptab [type=radio] {
display:none;
}
[type=radio]:checked ~ label ~ .appcontent {
z-index:1;
}
[type=radio]:checked ~ label {
color:#5f6b6d;
border-bottom:5px solid #5f6b6d;
z-index:2;
}
.shiptabs {
position:relative;
left:-5px;
}
.aiw {
display:inline-block;
vertical-align:top;
width:190px;
font-family:tahoma;
font-size:11px;
}
.aih {
width:180px;
background:#ccc;
font-weight:700;
color:#000;
text-transform:uppercase;
font-size:11px;
text-align:left;
letter-spacing:1px;
font-family:calibri;
margin:10px 5px 0 0;
padding:0 0 0 10px;
}
.aiw2 {
display:inline-block;
width:253px;
font-family:tahoma;
font-size:11px;
background:#eee;
margin-bottom:5px;
vertical-align:top;
}
.aih2 {
width:246px;
background:#ccc;
font-weight:700;
color:#000;
text-transform:uppercase;
font-size:11px;
text-align:left;
letter-spacing:1px;
font-family:calibri;
padding:0 0 0 10px;
}
.aiww {
width:480px;
font-family:tahoma;
font-size:11px;
text-align:justify;
padding: 0 10px;
}
.aihw {
    position: relative;
    left: -10px;
width:500px;
background:#ccc;
font-weight:700;
color:#000;
text-transform:uppercase;
font-size:11px;
text-align:left;
letter-spacing:1px;
font-family:calibri;
margin:10px 5px 0 0;
padding:0 0 0 10px;
}
.aih::before,.aihw::before,.aih2::before {
content:" ///// ";
color:#5f6b6d;
}

mortal .ntitle {
background:#992f2f;
}
mortal [type=radio]:checked ~ label {
color:#111;
border-bottom:5px solid #992f2f;
z-index:2;
}
mortal .head,mortal .head2 {
color:#992f2f;
border-bottom:solid 1px #992f2f;
}
mortal .aih::before,mortal .aihw::before,mortal .aih2::before {
content:" ///// ";
color:#992f2f;
}
mortal .appcontent {
border-bottom:8px solid #992f2f;
}
sempiternal .ntitle {
background:#548134;
}
sempiternal [type=radio]:checked ~ label {
color:#111;
border-bottom:5px solid #548134;
z-index:2;
}
sempiternal .head,sempiternal .head2 {
color:#548134;
border-bottom:solid 1px #548134;
}
sempiternal .aih::before,sempiternal .aihw::before,sempiternal .aih2::before {
content:" ///// ";
color:#548134;
}
sempiternal .appcontent {
border-bottom:8px solid #548134;
}
immortal .ntitle {
background:#527a9f;
}
immortal [type=radio]:checked ~ label {
color:#111;
border-bottom:5px solid #527a9f;
z-index:2;
}
immortal .head,immortal .head2 {
color:#527a9f;
border-bottom:solid 1px #527a9f;
}
immortal .aih::before,immortal .aihw::before,immortal .aih2::before {
content:" ///// ";
color:#527a9f;
}
immortal .appcontent {
border-bottom:8px solid #527a9f;
}
eternal .ntitle {
background:#7e5d8f;
}
eternal [type=radio]:checked ~ label {
color:#111;
border-bottom:5px solid #7e5d8f;
z-index:2;
}
eternal .head,eternal .head2 {
color:#7e5d8f;
border-bottom:solid 1px #7e5d8f;
}
eternal .aih::before,eternal .aihw::before,eternal .aih2::before {
content:" ///// ";
color:#7e5d8f;
}
eternal .appcontent {
border-bottom:8px solid #7e5d8f;
}


/***********************************
	      SHIPPER
************************************/
#fsscw { width:550px; height:495px; position:relative; background-color:#bbb; border-bottom:10px solid #ddd; z-index:1;}   
#fsscw .tabs {position:absolute; padding-left:190px; top:25px; clear:both; width:360px;}      
#fsscw .tab { float:left;} 
#fsscw .tab label { display:inline-block; position:relative; width:50px; height:50px; background-color:#757575; border:2px solid #ccc; background-size:50px auto; background-position:top center; margin-right:5px;}
#fsscw .tab [type=radio] { display: none; }       
.fscontw { position:absolute; top:65px; width:510px; height:350px; left: 0; border-top:8px solid #ddd; padding:20px; z-index:6;}     
[type=radio]:checked ~ label .tab {z-index: 6; }
[type=radio]:checked ~ label:after { background-color:#ccc; z-index: 6; }
[type=radio]:checked ~ label ~ .fscontw {z-index: 7; }        
.fssinfo { height:17px; width:153px; background-color:#ccc; color:#000 !important; font-family:calibri; font-size:11px; font-weight:bold; text-align:left; letter-spacing:1px; padding:5px 10px 0 10px;}   
.fssinfo::after { position:absolute; right:20px; content:"/////////////"; font-family: arial; font-size: 12px; letter-spacing: 1px; font-style:}     
.fsmcinfo {position:absolute; top:0px; right:0; width:330px; height:377px; padding:10px; color:#000; line-height:130%; font-family:tahoma, calibri, sans-serif; font-size:11px; background:#eee; overflow:auto; text-align:justify;}     
.fsscinfo {height:205px; width:180px; position:absolute; top:0px; left:0px; background:#bbb; padding:90px 10px; line-height:120%; font-size:11px; font-family:tahoma,calibri,sans-serif; color:#222;}  
.fscont { width:150px; height:150px; background-color:#ddd; margin:auto; position:absolute; left:17px; top:-88px; z-index:99; -webkit-border-radius:87px; -moz-border-radius:87px; -o-border-radius:87px; border:8px solid #ddd; background-size:150px; background-position:top center;}
    
#mortal .fssinfo::after, #mortal .fshipinf::after{color:#992f2f !important;}    
#mortal b{color:#992f2f !important;}
#mortal .fscont, #mortal .fshipc {border:8px solid #992f2f !important;}
#mortal .ft1 {border-bottom:4px solid #992f2f;}
#mortal .fscontw, #mortal .fshipctw {border-top:8px solid #992f2f;}
    
#sempiternal .fssinfo::after, #sempiternal .fshipinf::after{color:#548134 !important;}
#sempiternal b{color:#548134 !important;}
#sempiternal .fscont, #sempiternal .fshipc {border:8px solid #548134 !important;}
#sempiternal .ft1 {border-bottom:4px solid #548134;}
#sempiternal .fscontw, #sempiternal .fshipctw {border-top:8px solid #548134;}
    
#immortal .fssinfo::after, #immortal .fshipinf::after {color:#527a9f !important;}
#immortal b{color:#527a9f !important;}
#immortal .fscont, #immortal .fshipc {border:8px solid #527a9f !important;}
#immortal .ft1 {border-bottom:4px solid #527a9f;}
#immortal .fscontw, #immortal .fshipctw {border-top:8px solid #527a9f;}
    
#eternal .fssinfo::after, #eternal .fshipinf::after{color:#7e5d8f !important;} 
#eternal b{color:#7e5d8f !important;} 
#eternal .fscont, #eternal .fshipc {border:8px solid #7e5d8f !important;}
#eternal .ft1 {border-bottom:4px solid #7e5d8f;}
#eternal .fscontw, #eternal .fshipctw {border-top:8px solid #7e5d8f;}

/***********************************
	      TRACKER
************************************/
#fstraw {width:575px; height:465px; position:relative;}
.fstram { position: relative; top:0px; width:525px; height:110px; line-height:100%; text-align: center; padding:0 50px 0 0;}
.fstram img {float:left; margin-top:16px; width:100px; height:100px; border:5px solid #ddd;}
.fstran {position:absolute; top:0; left:0; width:565px; padding:0 0 0 10px; color:#222; font-family:'Lobster', cursive; font-size:22px; text-align:left; line-height:80%; z-index:1;}
.fstracw { position:absolute; top:0px; left:110px; width:424px; height:390px; background:#555; border-top:8px solid #ddd; padding:20px; z-index:6;} 
.fstralt { position: relative; left:-31px; text-align: right; width:375px; border-bottom:1px solid #999; font-size:12px; font-family:'Oswald', sans-serif; color:#222; font-style: italic; line-height:100%; margin-bottom:3px; font-weight:bold;}  
    
.fstramic {position:absolute; top:0px; right:0; width:400px; height:410px; padding:10px 32px; color:#000; font-family:sans-serif; font-size:11px; background:#f1f1f1; overflow:auto; text-align:justify;}
    
.fstramic a {color:#333 !important;}

#fstraw .tabs { position:absolute; width:500px; top:16px; clear:both; color:#555 !important; z-index:2;}
#fstraw .tab { float:left;} 
#fstraw .tab label {display:inline-block; position:relative; width:20px; height:20px; top:-27px; left:300px; padding:5px; margin-right:3px; color:#555; font-size:18px; z-index:2}
#fstraw .tab label:hover {color:#5f6b6d;}
.fstracd b { font-weight: normal; padding:0 10px 10px 30px; color:#000; line-height:15px; text-transform: lowercase; font-family:tahoma,calibri,sans-serif; font-size:11px; text-align: justify;}
.fstracd { font-weight: normal; padding:0 10px 10px 30px; color:#000; line-height:15px; text-transform: lowercase; font-family:tahoma,calibri,sans-serif; font-size:11px; text-align: justify;}
.fstramic a {font-size:14px; font-family:'Oswald', sans-serif; font-weight:bold; text-decoration: none; text-transform: uppercase;}
.fstramic a:hover {color:#555 !important;}
.done a::before {content:"✔ " !important; font-size: 16px !important;}
.dropped a::before {content:"✘ " !important; font-size: 16px !important;}
.fstramic a::before {content:"★ "; font-size:16px;}
.dropped a {text-decoration: line-through;}
.ftccdc {font-family:sans-serif; font-size:11px; color:#000; font-weight: bold;}
.ftccdc2 {padding:0 10px 10px 60px; font-family:sans-serif; font-size:11px; color:#333;}


sempiternal .fstramic a::before {content:"★"; font-size:28px; color:#548134 !important; line-height: 12px;}
mortal .fstramic a::before {content:"★"; font-size:28px; color:#992f2f !important; line-height: 12px;}
immortal .fstramic a::before {content:"★"; font-size:28px; color:#527a9f !important; line-height: 12px;}
eternal .fstramic a::before {content:"★"; font-size:28px; color:#7e5d8f !important; line-height: 12px;}

    
#fstraw .tab [type=radio] { display: none; }
#fstraw [type=radio]:checked ~ label .tab {color:#000; z-index:6; }
#fstraw [type=radio]:checked ~ label:after { z-index: 6; }
#fstraw [type=radio]:checked ~ label ~ .fstracw {z-index:7; } 
#fstraw [type=radio]:checked ~ label { border-bottom:0px solid #111;}
#fstraw .tab [type=radio]:checked ~ label {color:#5f6b6d;}

mortal .fstram img {border:5px solid #992f2f !important;}
mortal .fstran {border-bottom:8px solid #992f2f;}
mortal .fstramic a {color:#992f2f;}
mortal #fstraw .tab label:hover {color:#992f2f;}
mortal .fstracw {border-top:8px solid #992f2f;}
mortal #fstraw .tab [type=radio]:checked ~ label {color:#992f2f;}

sempiternal .fstram img {border:5px solid #5c992f !important;}
sempiternal .fstran {border-bottom:8px solid #5c992f;}
sempiternal .fstramic a {color:#5c992f;}
sempiternal #fstraw .tab label:hover {color:#5c992f;}
sempiternal .fstracw {border-top:8px solid #5c992f;}
sempiternal #fstraw .tab [type=radio]:checked ~ label {color:#5c992f;}

eternal .fstram img {border:5px solid #714b84 !important;}
eternal .fstran {border-bottom:8px solid #714b84;}
eternal .fstramic a {color:#714b84;}
eternal #fstraw .tab label:hover {color:#714b84;}
eternal .fstracw {border-top:8px solid #714b84;}
eternal #fstraw .tab [type=radio]:checked ~ label {color:#714b84;}

immortal .fstram img {border:5px solid #2f7799 !important;}
immortal .fstran {border-bottom:8px solid #2f7799;}
immortal .fstramic a {color:#2f7799;}
immortal #fstraw .tab label:hover {color:#2f7799;}
immortal .fstracw {border-top:8px solid #2f7799;}
immortal #fstraw .tab [type=radio]:checked ~ label {color:#2f7799;}
/***********************************
	      SHIPPER 2.0
************************************/

#fs-scw { position:relative; width:600px; height:565px; background-color:#ddd; border-bottom:5px solid #bbb; border-top:5px solid #bbb;}  
#fs-scww { position:relative; width:600px; height:565px; clear:both; overflow:hidden; }   
#fs-scabout {position:absolute; top:441px; left:0; width:578px; height:100px; padding:5px 10px 5px 10px; }
#fs-scaboutc {
    position:absolute; 
    display: inline-block; 
    top:5px; 
    left:5px; 
    width:460px; 
    height:100px; 
    padding:2px; 
    overflow:auto; 
    font-size: 12px; 
    font-family: 'tahoma', sans-serif; 
    text-align: left; 
    color:#000;
    line-height: 130%;
}
#fs-scabout img {position:absolute; display: inline-block; top:5px; right:5px; margin-left:6px; width:100px; height:100px; padding:2px; border:1px solid #999;}   
    
    
#fs-scw .tabs {position:absolute; padding-left:6px; left:0; top:0px; width:593px;}
    
#fs-scw .tab { float:left;} 
#fs-scw .tab label { display:inline-block; position:relative; width:50px; height:50px; background-color:#757575; border:2px solid #ddd; background-size:52px auto; background-position:top center; margin-right:5px;}
#fs-scw .tab [type=radio] { display: none; }
    
.fs-scontw { position:absolute; top:65px; bottom: 0px; right: 0px;  width:560px; height:320px; left: -650px; padding:20px; border-top:8px solid #ddd; border-bottom:10px solid #ddd; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; opacity:0; border-top:8px solid #bbb; border-bottom:8px solid #bbb;}  

[type=radio]:checked ~ label .tab {z-index: 6; }
[type=radio]:checked ~ label:after { background-color:#ccc; z-index: 6; }
[type=radio]:checked ~ label ~ .fs-scontw {z-index: 7; left:0;  opacity:1;} 

    
.fs-sinfo { width:170px; border-bottom:1px solid #999; color:#000 !important; font-family:calibri; font-size:11px; text-align:left; padding:0 5px 0 5px; margin:15px 10px 5px 5px; text-transform: uppercase; font-weight: bold;}  
    
.fs-sinfo2 {  width:170px; border-bottom:1px solid #999; color:#000 !important; font-family:calibri; font-size:11px; text-align:right; padding:0 5px 0 5px; margin:15px 0 5px 17px; text-transform: uppercase; font-weight: bold;}  
    
.fs-scname {position:absolute; top:0; left:200px; width:380px; height:20px; background:#ccc; padding:15px 20px 16px 0px; font-family:'Fjalla One', cursive; font-size:28px; font-style: italic; text-align: right; color:#000;}
    
.fs-smcinfo {position:absolute; top:50px; right:0; width:379px; height:290px; padding:10px; color:#000; line-height:130%; font-family:tahoma, calibri, sans-serif; font-size:11px; background:#f1f1f1; overflow:auto; text-align:justify; border-right:1px solid #ccc;} 
    
.fs-scinfo {height:240px; width:190px; position:absolute; top:0px; left:0px; background:#ccc; padding:5px 10px 115px 0; line-height:120%; font-size:11px; font-family:tahoma,calibri,sans-serif; color:#222;} 
    
.fs-scont { width:180px; min-height:96px; background-color:#ddd; margin-bottom:20px; position:relative; left:5px; top:5px; z-index:99; border:2px solid #ddd; background-size:180px 98px; background-position:top center;}
    
.fs-simgs { width:180px; height:30px; margin:auto; position:absolute; left:5px; bottom:0px; z-index:99;}
.fs-simgs i { color:#222; font-size:20px;}
.fs-simgs a { width:50px; display:inline-block;}
    
#mortal .fs-sinfo::before, #mortal .fs-sinfo2::after{color:#992f2f !important;}    
#mortal b, #mortal .fs-simgs i {color:#992f2f !important;}
#mortal .fshipc {border:8px solid #992f2f !important;}
#mortal .ft1 {border-bottom:4px solid #992f2f;}
#mortal .fs-scontw {border-top:8px solid #992f2f; border-bottom:8px solid #992f2f;}
#mortal .fs-scont {border:2px solid #992f2f;}
#mortal label {border:2px solid #992f2f !important;}
    
#sempiternal .fs-sinfo::before, #sempiternal .fs-sinfo2::after{color:#548134 !important;}    
#sempiternal b, #sempiternal .fs-simgs i {color:#548134 !important;}
#sempiternal .fshipc {border:8px solid #548134 !important;}
#sempiternal .ft1 {border-bottom:4px solid #548134;}
#sempiternal .fs-scontw {border-top:8px solid #548134; border-bottom:8px solid #548134;}
#sempiternal .fs-scont {border:2px solid #548134;}
#sempiternal label {border:2px solid #548134 !important;}
    
#immortal .fs-sinfo::before, #immortal .fs-sinfo2::after{color:#527a9f !important;}    
#immortal b, #immortal .fs-simgs i {color:#527a9f !important;}
#immortal .fshipc {border:8px solid #527a9f !important;}
#immortal .ft1 {border-bottom:4px solid #527a9f;}
#immortal .fs-scontw {border-top:8px solid #527a9f; border-bottom:8px solid #527a9f;}
#immortal .fs-scont {border:2px solid #527a9f;}
#immortal label {border:2px solid #527a9f !important;}
    
#eternal .fs-sinfo::before, #eternal .fs-sinfo2::after{color:#7e5d8f !important;}    
#eternal b, #eternal .fs-simgs i {color:#7e5d8f !important;}
#eternal .fshipc {border:8px solid #7e5d8f !important;}
#eternal .ft1 {border-bottom:4px solid #7e5d8f;}
#eternal .fs-scontw {border-top:8px solid #7e5d8f; border-bottom:8px solid #7e5d8f;}
#eternal .fs-scont {border:2px solid #7e5d8f;}
#eternal label {border:2px solid #7e5d8f !important;}

/***********************************
	      SHIPPER 2.0 - 20
************************************/

#fs-scw2 { position:relative; width:600px; height:605px; background-color:#ddd; border-bottom:5px solid #bbb; border-top:5px solid #bbb;}  
#fs-scww2 { position:relative; width:600px; height:600px; clear:both; overflow:hidden; }   
#fs-scw2 #fs-scabout {position:absolute; top:497px; left:0; width:578px; height:100px; padding:5px 10px 5px 10px; }
#fs-scaboutc {position:absolute; display: inline-block; top:5px; left:5px; width:460px; height:100px; padding:2px; overflow:auto; font-size: 11px; font-family: sans-serif; text-align: left; color:#000;}
#fs-scabout img {position:absolute; display: inline-block; top:5px; right:5px; margin-left:6px; width:100px; height:100px; padding:2px; border:1px solid #999;}   
    
    
#fs-scw2 .tabs {position:absolute; padding-left:6px; left:0; top:0px; width:593px;}
    
#fs-scw2 .tab { float:left;} 
#fs-scw2 .tab label { display:inline-block; position:relative; width:50px; height:49px; background-color:#757575; border:2px solid #ddd; background-size:50px auto; background-position:top center; margin:2px 5px 2px 0px;}
#fs-scw2 .tab [type=radio] { display: none; }
    
.fs-scontw2 { position:absolute; top:123px; bottom: 0px; right: 0px;  width:560px; height:320px; left: -650px; padding:20px; border-top:8px solid #ddd; border-bottom:10px solid #ddd; -webkit-transition-duration: .8s; -moz-transition-duration: .8s; -o-transition-duration: .8s; opacity:0; border-top:8px solid #bbb; border-bottom:8px solid #bbb;}  

[type=radio]:checked ~ label .tab {z-index: 6; }
[type=radio]:checked ~ label:after { background-color:#ccc; z-index: 6; }
[type=radio]:checked ~ label ~ .fs-scontw2 {z-index: 7; left:0;  opacity:1;}