/* https://coolors.co/f22400-fdb900-51ba50-ffffd3-111516 */

body { font-family: 'Roboto', sans-serif; min-width: 320px; }
h1  { font-size:30px; line-height: 42px; text-align: center; font-weight: 700; margin: 0; padding: 0 0 0 10px; }
h2  { font-size:24px; line-height: 30px; font-weight: 700; }
h3  { font-size:18px; line-height: 24px; font-weight: 700; color:#e4603f; }
p { font-size: 16px; line-height: 21px; font-weight: 300; }
p b { color: #10bef0; }
.pad { padding: 0 0 0 10px; }

input { -webkit-appearance: none;-moz-appearance: none; }

#lucky { font-size: 0; }
#shiny { font-size: 0; }

#lucky h3, #shiny h3    { border-bottom: 2px solid #ccc; font-size:24px; }



#nav-toggle 					{ cursor: pointer; padding: 10px 35px 16px 0px; position:absolute; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { cursor: pointer; border-radius: 1px; height: 4px; width: 35px; background: #333; position: absolute; display: block; content: ''; }
#nav-toggle span:before 		{ top: -10px; }
#nav-toggle span:after 			{ bottom: -10px; }
#nav-toggle span, #nav-toggle span:before, #nav-toggle span:after { transition: all 500ms ease-in-out; }
#nav-toggle.active span 		{ background-color: transparent; }
#nav-toggle.active span:before, #nav-toggle.active span:after { top: 0; }
#nav-toggle.active span:before 	{ transform: rotate(45deg); }
#nav-toggle.active span:after 	{ transform: rotate(-45deg); }	

header                { max-width: 980px; margin:0 auto; box-sizing: border-box; position: relative; padding: 10px; border-bottom:1px solid #ccc; }
header a.logo         { display:block; float:left; width: 70px; z-index: 99; }
header a.logo img     { width:70px; }
header .navicon       { display:block; float: right; height: 50px; width: 35px; padding: 30px 0px 0px 0px; box-sizing: border-box; }

header h1             { font-size:32px; line-height: 70px; margin: 0; padding: 10px 0 0 0; text-align: center; width: 100%; display:block; text-transform: uppercase; top:0; left:0; position: absolute; pointer-events: none; }
header::after   		  { content: ""; display: table; clear: both; }

footer                { border-top:1px solid #ccc; }

.pittpokenav          { text-align: center; }
.pittpokenav nav a    { display:block; font-size:21px; line-height: 35px; text-decoration: none; color:inherit; }

.box { padding:0; max-width: 980px; margin:0 auto; }
.boxwithpad { padding:0 20px 20px 20px; max-width: 980px; margin:0 auto; } 
.box.settings { max-width: 500px; }

.poke { display:inline-block; width:24%; box-sizing: border-box; padding: 15px; border:1px solid #ccc; margin: 0.5%; text-decoration: none; color:inherit; font-size: 16px; line-height: 30px; vertical-align:top; position:relative; -webkit-tap-highlight-color: transparent; }
.poke:hover { background-color: #E1FBFF; }

.poke b { font-size: 18px; color:#afafaf; font-weight:700; line-height: 30px; padding-right: 5px; }

.poke i.s { position: absolute; top: -8px; left:-8px; box-sizing: border-box; width:24px; height:24px; background-image: url(../svg/i-shiny.svg); border-radius:14px; background-color:rgba(216,221,0,1.00); border:2px solid #fff; background-size: 12px 12px; background-position:center center; background-repeat:no-repeat; }

.poke i.possess     { position: absolute; top: 13px; right:6px; box-sizing: border-box; border:4px solid #ccc; width:34px; height:34px; border-radius:17px; background-color:rgba(255,255,255,1.00); transition: all 300ms ease-in-out; }

.poke i.possess.own {  border:4px solid #fff; background-color: rgba(0,187,45,1.00); }
.poke i.possess.own::before  { position: absolute; display:block; width: 8px; height:3px; background-color: #fff; top:14px; left:5px; transform: rotate(45deg); content:' '; }
.poke i.possess.own::after   { position: absolute; display:block; width: 15px; height:3px; background-color: #fff; top: 12px; left:8px; transform: rotate(-45deg);  content:' '; }





#sharable       { max-width: 98%; margin: 0 auto; font-size: 0; }
#sharable p     { text-align: center; }
#sharable h3    { border-bottom: 1px solid #000; margin: 0 0 5px 0; padding: 30px 0 5px 0; font-size:24px; }
#sharable h3 b	{ float:right; font-size:18px; color:#000; }

#sharable .poke { display:inline-block; width:25%; box-sizing: border-box; padding: 5px 5px 5px 34px; border:none; border-bottom:0 solid #ccc; margin: 0; text-decoration: none; color:inherit; font-size: 16px; line-height: 18px; vertical-align:top; position:relative; -webkit-tap-highlight-color: transparent; }
#sharable .poke:hover { background-color: #E1FBFF; }

#sharable .poke b { font-size: 14px; color:#afafaf; font-weight:700; line-height: 18px; padding-right: 3px; }
#sharable .poke i.s { display:none; position: absolute; top: -8px; left:-8px; box-sizing: border-box; width:24px; height:24px; background-image: url(../svg/i-shiny.svg); border-radius:14px; background-color:rgba(216,221,0,1.00); border:2px solid #fff; background-size: 12px 12px; background-position:center center; background-repeat:no-repeat; }
#sharable .poke i.possess     { position: absolute; top: 2px; left:3px; box-sizing: border-box; border:4px solid #ccc; width:24px; height:24px; border-radius:8px; background-color:rgba(255,255,255,1.00); transition: all 300ms ease-in-out; }
#sharable .poke i.possess.own {  border:3px solid rgba(0,187,45,1.00); background-color: rgba(0,187,45,1.00); }
#sharable .poke i.possess.own::before  { width: 8px; height:3px; top:10px; left:1px; }
#sharable .poke i.possess.own::after   { width: 15px; height:3px; top: 8px; left:4px; }

.progressbar 			{ width:100%; border-radius:5px; height:16px; margin: 15px 0 0 0; background-color:#ccc; }
.progressbar i 		{ display:block; height:16px; background-color:rgba(0,187,45,1.00); border-radius:5px; }
.progressbar-text { text-align:right; font-size:14px; line-height:19px; color:#111; }

@media print {
  body       { zoom:64%; }
  .navicon   { display:none; }
  .filterbar { display:none; }
  .searchbar { display:none; }
  footer     { display:none; }
}


.settings input { font-size:20px; padding: 0 10px; border:1px solid #ccc; height:40px; line-height: 40px; border-radius:20px; width:200px; }

.settings li    { line-height: 25px; }

.action-button  { display:inline-block; font-size:16px; text-align: center; padding: 0 20px; border-radius:30px; height:40px; line-height: 40px; border:1px solid #ff1c1c; background-color: #ff1c1c; color:#fff; text-decoration: none; outline:0; vertical-align: top; }
.action-button-small  { display:inline-block; font-size: 13px; text-align: center; padding: 0 12px; border-radius:20px; height:19px; line-height: 19px; background-color: #ff1c1c; color:#fff; text-decoration: none; outline:0; }

.action-button:hover        { opacity: 0.9; }
.action-button-small:hover  { opacity: 0.9; }

.g-signin2 { display:block; width: 120px; margin: 30px auto; }

.logout { line-height: 30px; font-size:16px; padding: 30px 0; text-align: center; }
.logout a { color:inherit; }

.copy { color:#ccc; font-size:13px; line-height: 19px; text-align: center; padding: 20px 0; }





#trade-menu-tabs                    {  box-sizing: border-box; padding: 0; font-size: 0; background-color: #ccc; }
#trade-menu-tabs .action-open-tab   {  box-sizing: border-box; display: inline-block; width:33.33%; text-align: center; text-decoration: none; font-weight:500; font-size: 16px; color:#111; padding:10px 0; }
#trade-menu-tabs .action-open-tab.on  { font-weight:700; }

.topitem  { min-height: 500px; }

.ts-tablelist { padding: 0; margin: 0; width:100%; border-top:1px solid #ccc; }
.ts-tablelist td  { padding: 8px; border-bottom:1px solid #ccc; }
td.name-cell    	{ text-align: left; font-size: 18px; font-weight: 300; }
td.name-cell.title{ text-align: left; font-size: 18px; font-weight: 300; }
td.name-cell.new  { font-weight: 700; }
td.name-cell a  	{ text-decoration: none; color:inherit; }
td.action-cell 		{ text-align: right; }

h2.nonmodal { line-height: 24px; height:24px; margin: 0; padding: 0; }
h2.nonmodal a { height:24px; line-height: 24px; font-size: 16px; width:70px; border:1px solid #111; margin: 0; }

h3.pokemon-trade-name { font-size: 30px; line-height: 40px; font-weight:700; text-transform: uppercase; margin: 0; padding: 0; }

.add-tradesheet-screen              { display:block; margin: 0; padding:0; box-sizing: border-box; border:1px solid #111; border-radius:5px; text-align: center; }
.add-tradesheet-screen .action-bar  { padding: 20px 0; }

.boxpad      { padding: 20px; box-sizing: border-box; }

.button-red   { display:inline-block; border:1px solid #ccc; padding:10px 14px; border-radius:25px; text-decoration:none; color:#fff; font-size:16px; background-color:#F22400; }
.button-green { display:inline-block; border:1px solid #ccc; padding:10px 14px; border-radius:25px; text-decoration:none; color:#fff; font-size:16px; background-color:#51ba50; }
.button-gray   { display:inline-block; border:1px solid #ccc; padding:10px 14px; border-radius:25px; text-decoration:none; color:#fff; font-size:16px; background-color:#aaa; }

.field-tsname { font-size:20px; width:200px; padding: 5px; border:1px solid #ccc; }
.field-zip    { font-size:20px; width:70px; padding: 5px; border:1px solid #ccc; }
.field-select { font-size:18px; width:250px; height:40px; padding: 5px; border:1px solid #ccc; -webkit-appearance: none;-moz-appearance: none; }

label { display:block; font-size: 16px; line-height: 20px; padding: 10px 0 0 0; }

.topheader          { width:100%; font-size:24px; margin: 0; padding: 15px 10px; background-color: #FDB900; box-sizing: border-box; }
.topheader h2       { font-size:24px; margin: 0; padding: 0; color:#111516; }

.modalheader        { width:100%; font-size:24px; margin: 0; padding: 20px 10px; background-color: #FDB900; box-sizing: border-box; }
.modalheader h2     { font-size:24px; margin: 0; padding: 0; color:#111516; }

.modalsubheader     { width:100%; margin: 0; background-color: #FFFFD3; padding: 5px 20px; text-align: left; box-sizing: border-box; }
.modalsubheader h3  { line-height: 36px; font-size:18px; margin: 0; padding: 0; color:#111516; font-weight: 500; }

.modalboxwhite     	{ width:100%; margin: 0; background-color: #FFF; padding: 5px 20px; text-align: left; box-sizing: border-box; }
.modalboxwhite.line	{ border-bottom:1px solid #ccc; }
.modalboxwhite textarea { width:100%; height:120px; border:1px solid #ccc; font-size: 18px; font-weight:500; }

.circleor	{ width:100%; height:8px; background-color: #111516; position: relative; }
.circleor:after	{ display:block; content:"For Your"; font-size:18px; text-transform: uppercase; width:80px; height:80px; border-radius:50px; border:8px solid #111516; background-color:#fff; position: absolute; top:-36px; left:50%; margin-left:-40px;
    color: #111516;text-align: center;padding: 10px 0;box-sizing: border-box;line-height: 21px; font-weight: 500; }

.modalsubheader.beforeor		{ padding: 20px 20px 50px 20px; text-align: center; }
.modalsubheader.beforeor p	{ padding: 0; margin: 4px 0; }
.modalsubheader.beforeor h3.pokename { line-height: 36px; font-size:22px; padding: 10px 0 0 0; }
.modalsubheader.beforeor h3.customoffertext { line-height: 28px; font-size:20px; padding: 10px 0 0 0; }
.modalsubheader.afteror			{ padding: 50px 20px 20px 20px; text-align: center; border-bottom:1px solid #ccc;  }
.modalsubheader.afteror p	{ padding: 0; margin: 4px 0; }
.modalsubheader.afteror h3.pokename { line-height: 36px; font-size:22px; padding: 10px 0 0 0; }


.ts-pokegroup                 { display:block; margin: 0; padding: 0; font-size:0; border-top:1px solid #ccc; box-sizing: border-box; }
.ts-pokegroup .msg            { font-size: 18px; line-height: 30px; text-align: center; }
.ts-pokegroup .ts-pokemon     { display:block; box-sizing:border-box; width: 100%; vertical-align: top; text-align: center; font-size:16px; text-decoration: none; color:#333; margin:0; padding: 6px 20px; border-bottom:1px solid #ccc; }
.ts-pokegroup .ts-pokemon h4 a { box-sizing:border-box; width: 100%; font-size:12px; text-decoration: none; color:#333; text-transform: uppercase; }
.ts-pokegroup .ts-pokemon h4  { display:block; width:90px; font-size: 12px; line-height: 36px; font-weight:700; margin: 0; padding: 0; float:left; text-align: left; }
.ts-pokegroup .ts-pokemon p   { display:block; width:40%; font-size: 12px; margin: 0; padding: 2%; float:left; text-align: left; vertical-align: middle; }
.ts-pokegroup .ts-pokemon::after   		{ content: ""; display: table; clear: both; }		





.edit-tradesheet-screen .choice-group { padding: 20px; text-align: center; }


.button-addplus { display:block; float:right; width: 36px; height:36px; line-height: 36px; text-align: center; border-radius:25px; font-size: 30px; font-weight: 300; /*background-color:#12CB00;*/ color:#111; text-decoration: none; }
.button-addpluswords { display:block; float:right; width: 66px; height:36px; line-height: 36px; text-align: center; border-radius:25px; font-size: 12px; font-weight: 500; color:#111; text-decoration: none; border:1px solid #ccc; }
.button-removex { display:block; float:right; width: 70px; height:32px; line-height: 32px; text-align: center; border-radius:18px; font-size: 15px; font-weight: 500; color:#111; text-decoration: none; border:1px solid #ccc; }
.button-remove-pokemon { display:block; float:right; width: 70px; height:32px; line-height: 32px; text-align: center; border-radius:18px; font-size: 12px; font-weight: 500; color:#111; text-decoration: none; border:1px solid #ccc; }
.button-view-trade { display:inline-block; width: 70px; height:32px; line-height: 32px; text-align: center; border-radius:18px; font-size: 12px; font-weight: 500; color:#111; text-decoration: none; border:1px solid #ccc; }
.button-makeoffer { display:inline-block; width: 100px; height:32px; line-height: 32px; text-align: center; border-radius:18px; font-size: 14px; font-weight: 500; color:#fff; text-decoration: none; border:0px solid #ccc; background-color:#51ba50; }


.add-pokemon-screen     { display:block; box-sizing: border-box; border-radius:5px; text-align: center; }
.add-pokemon-screen h2  { width:100%; font-size:24px; margin: 0; padding: 0 0 10px 0; }
.add-pokemon-screen h3  { font-size:40px; line-height:50px; margin: 0; padding: 0 0 5px 0; text-align: center; font-weight:500; }
.add-pokemon-screen p   { margin: 0; padding: 6px 0; }

.add-pokemon-screen input.pokemonlist { width:90%; height:40px; border:1px solid #ccc; -webkit-appearance: none;-moz-appearance: none; font-size: 20px; }
.add-pokemon-screen select  { font-size:16px; width:200px; height:40px; border:1px solid #ccc; -webkit-appearance: none;-moz-appearance: none; }
.add-pokemon-screen .action-bar { padding: 20px 0; }

.cancel     { display:none; width:80px; font-size: 14px; text-align: center; padding: 2px 12px; margin: 0 auto; border-radius:20px; height:19px; line-height: 19px; background-color:#BBBBBB; color:#fff; text-decoration: none; outline:0; }
.cancel.on  { display:block }

.choice { display:inline-block; border:1px solid #bbb; padding:8px; border-radius:5px; text-decoration:none; color:#333; font-size:16px; }
.choice.on, .choice:hover { background-color:#bbbbbb; color:#fff; }

.submit { display:inline-block; border:1px solid #ccc; padding:10px 20px; border-radius:25px; text-decoration:none; color:#fff; font-size:18px; background-color:#51ba50; }



a.button-search             { display:inline-block; padding: 0 25px; font-size: 18px; font-weight:500; height:35px; line-height: 35px; border-radius: 24px; text-align: center; background-color: #51ba50; color:#fff; text-decoration:none; transition: all .2s ease; }
a.button-search:after        { content: "Search The Market"; } 
a.button-search.loading       { width: 35px; height:35px; opacity: 0.9; color:#fff; padding:0; animation: loader .5s linear infinite; background-color:#fff; border: 3px solid #51ba50; border-top:3px solid #fff;  }
a.button-search.loading:after        { content: " "; } 
@keyframes loader {0% {transform: rotateZ(0);}100% {transform: rotateZ(360deg);}}


.loaderboxframe							{ display:block; width:200px; height:250px; margin: auto; background-color: #fff; box-sizing: border-box; padding:98px 0 0 0; }
.loaderbox									{ display:none; transition: all .2s ease; border-radius: 24px; width: 35px; height:35px; opacity: 0.9; color:#fff; padding:0; margin: 0 auto; }
.loaderbox.loading       		{ display:block; animation: loader .5s linear infinite; background-color:#fff; border: 3px solid #51ba50; border-top:3px solid #fff;  }



.choice-group { padding: 6px 0; text-align: center; }


input.pokemonsearchlist { width:90%; height:40px; border:1px solid #ccc; -webkit-appearance: none;-moz-appearance: none; font-size: 20px; max-width: 320px; margin: 0 auto; padding: 10px 10px; box-sizing: border-box; }

.search-pokemon-screen     { display:block; box-sizing: border-box; text-align: center; }
.search-pokemon-screen .action-bar { padding: 10px 0; }

.poke-trade-search-result { max-width:500px; margin: 10px auto; padding: 10px; border-radius:5px; border:1px solid #ccc; box-sizing: border-box; box-shadow: 0 0 10px 0 rgba(0, 81, 114, .1), 0 0 1px 1px rgba(0, 81, 114, .15); }
.poke-trade-search-result h3 { font-size: 16px; color:#111; text-transform: uppercase; font-weight:500; margin: 0; padding: 10px 0 5px 0; }
.poke-trade-search-result p  { font-size: 14px; }
.poke-trade-search-result p b { color: inherit; }

.new-offer-screen     		{ display:block; box-sizing: border-box; text-align: center; }
.new-offer-screen h4			{ font-size: 18px; line-height: 24px; margin: 0; font-weight:700; padding: 10px 0; text-transform: uppercase; }
.new-offer-screen select 	{ height:34px; max-width:500px; width:100%; font-size:18px; line-height: 24px; padding: 5px; border:1px solid #ccc; -webkit-appearance: none;-moz-appearance: none; margin:0; font-weight:500; }
.new-offer-screen .action-bar { padding: 10px 0; }

.offer-want				{ display: block; font-size:0; font-weight:500; }
.offer-want .c1		{ display:inline-block; width:35%; font-size: 18px; line-height: 24px; box-sizing:border-box; padding: 5px; text-align: right; vertical-align: top; text-transform:uppercase; }
.offer-want .c2		{ display:inline-block; width:65%; font-size: 18px; line-height: 24px; box-sizing:border-box; padding: 5px; vertical-align: top; }
.offer-want h3		{ font-size: 18px; line-height: 24px; margin: 0; font-weight:700; padding: 0; }
.offer-want p			{ font-size: 16px; line-height: 21px; margin: 0; font-weight:300; padding: 2px 0; }

@media only screen and (max-width: 767px) {
  header                { padding: 10px; }
  header a.logo         { width: 50px; }
  header a.logo img     { width: 50px; }
  header .navicon       { padding: 15px 10px 0px 0px; }
  
  header h1             { font-size:18px; line-height: 50px; letter-spacing:normal; }
  @media only screen and (max-width: 360px) {
    header h1 { letter-spacing: -0.05em; }
  }
  
  .box { padding:0; max-width: auto; margin:0 auto; font-size: 15px; }
  .boxwithpad { padding:0 10px 10px 10px; max-width: 980px; margin:0 auto; } 
  .poke { width:49%; }
	
	.poke { width:49%; padding: 7px 15px; }
	.poke i.possess     { top: 6px; }
	
	#sharable .poke { width:50%; }
  
  /*.ts-pokegroup a { width: 100%; }*/
}