/*-----------------------------------------------------------------------------
		FRAMEWORK STYLES - DEFAULT TO SMALLER SCREENS FIRST
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
		TESTING
-----------------------------------------------------------------------------*/
                                                                                
IMG.mockSideAd1, IMG.mockSideAd2 {
			width: 300px;
			height: 250px;
}
IMG.mockTopAd {
			width: 320px;
			height: 50px;
}

@media only screen and (min-width: 650px)
{
		IMG.mockSideAd1 {
			width: 160px;
			height: 600px;
		}
}
@media only screen and (min-width: 850px)
{
		IMG.mockSideAd1 {
			width: 300px;
			height: 250px;
		}
}

@media only screen and (min-width: 320px) and (min-height: 370px)
{
		IMG.mockTopAd {
			width: 320px;
			height: 50px;  /* changed from 100 */
		}
}
@media only screen and (min-width: 650px)
{
		IMG.mockTopAd {
			width: 468px;
			height: 60px;
		}
}
@media only screen and (min-width: 760px)
{
		IMG.mockTopAd {
			width: 728px;
			height: 90px;
		}
}


/*-----------------------------------------------------------------------------
		FONTS
-----------------------------------------------------------------------------*/
@font-face {
			font-family: 'PT Sans';
			src: url('/fonts/pt_sans-web-regular-webfont.eot');
			src: url('/fonts/pt_sans-web-regular-webfont.eot?#iefix') format('embedded-opentype'),
					url('/fonts/pt_sans-web-regular-webfont.woff2') format('woff2'),
					url('/fonts/pt_sans-web-regular-webfont.woff') format('woff'),
					url('/fonts/pt_sans-web-regular-webfont.ttf') format('truetype'),
					url('/fonts/pt_sans-web-regular-webfont.svg#pt_sansregular') format('svg');
			font-weight: normal;
			font-style: normal;
}

@font-face {
			font-family: 'Covered By Your Grace';
			src: url('/fonts/coveredbyyourgrace-webfont.eot');
			src: url('/fonts/coveredbyyourgrace-webfont.eot?#iefix') format('embedded-opentype'),
					url('/fonts/coveredbyyourgrace-webfont.woff2') format('woff2'),
					url('/fonts/coveredbyyourgrace-webfont.woff') format('woff'),
					url('/fonts/coveredbyyourgrace-webfont.ttf') format('truetype'),
					url('/fonts/coveredbyyourgrace-webfont.svg#covered_by_your_graceregular') format('svg');
			font-weight: normal;
			font-style: normal;

}

HTML, HTML A {
			-webkit-font-smoothing: antialiased;
			-moz-osx-font-smoothing: grayscale;
			filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=/images/browser_fixes/hIEfix.png,sizingMethod=crop);
			zoom: 1;
}


/*-----------------------------------------------------------------------------
		SPRITES
-----------------------------------------------------------------------------*/
#img_buttonAdvanced, #img_buttonGirl, #img_buttonBoy, 
#img_buttonPopularity,
#img_buttonByLetter, #img_buttonByName, #img_buttonByOrigin,
#img_arrowUp, #img_questionNoBG {
      background-image: url( "/images/navSprite.png" );
}

#img_buttonAdvanced, #img_buttonGirl, #img_buttonBoy, 
#img_buttonPopularity,
#img_buttonByLetter, #img_buttonByName, #img_buttonByOrigin {
			margin: 7px 0px 2px 0px;   /* top right bottom left */
			width: 40px;
			height: 40px;
			border: 0px;
}
#img_buttonAdvanced {
			background-position: 0px 0px;
}
#img_buttonGirl {
			background-position: -40px 0px;
}
#img_buttonBoy {
			background-position: -80px 0px;
}
#img_buttonPopularity {
			background-position: -120px 0px;
}
#img_buttonByLetter {
			background-position: -160px 0px;
}
#img_buttonByName {
			background-position: -200px 0px;
}
#img_buttonByOrigin {
			background-position: -240px 0px;
}

#img_arrowUp {
			background-position: -121px 109px;
      width: 35px;
      height: 35px;
      border: 0px;
}

#img_questionNoBG {
			background-position: -4px 221px;
      width: 16px;
      height: 16px;
      border: 0px;
}


/*-----------------------------------------------------------------------------
		GENERAL
-----------------------------------------------------------------------------*/
BODY {
			margin: 0px 0px 0px 0px;   /* top right bottom left */
			background-color: #B9D3EE; /* #B9D3EE */
			font-family: PT Sans, arial, sans-serif;
			color: normal;
			font-size: 16px;
			font-weight: 400;
}

A {
      color: blue;
			font-family: PT Sans, arial, sans-serif;  
      font-weight: normal;
      text-decoration: underline;
}


/*-----------------------------------------------------------------------------
		80x25, 160x51, 240x76, 260x82, 280x88, 290x91, 300x95, 320x101(55% of 582),
		400x126, (480x152, 560x177, 582x184(182% of 320 & largest shoes))
-----------------------------------------------------------------------------*/
IMG.logo {
			width: 290px;
			height: 91px;
			margin: 0px 0px 0px 0px;   /* top right bottom left */
			border-style: none;
}

IMG.buttonSearch {
			margin: 7px 1px 2px 0px;   /* top right bottom left */
			width: 40px;
			height: 40px;
}

IMG.topTape {
			width: 100%;
			height: 20px;
}  


#cssCheck {
			font-size: 1px;
			width: 1px;
			height: 1px;
}

.showItBlock {
			display: block:
}
.hideIt {
			display: none;
}

.quickSearchFld {
      font-size: 16px;  /* min 16px PREVENTS auto input zoom */
      font-weight: normal;
      text-decoration: none;
      vertical-align: middle;
}
#qsdd {
			line-height: 26px;
			height: 26px;
			vertical-align: middle;
}
#qstext {
			line-height: 22px;
			height: 22px;
			max-width: 50px;
			vertical-align: middle;
}

.buttonQs {
			width: 65px;
			height: 25px;
			vertical-align: middle;
}
.buttonSocial {
			width: 22px;
			height: 20px;
}


/*-----------------------------------------------------------------------------
		POST-ITS
-----------------------------------------------------------------------------*/
DIV.postIt {
			/* horz. distance, vert. distance, blur, spread */
			-moz-box-shadow: 5px 5px 5px rgba(0,0,0,.5);  /* Mozilla Firefox 3.5 - 3.6 */
			-webkit-box-shadow: 5px 5px 5px rgba(0,0,0,.5);  /* Safari 3.1 - 5 */
			box-shadow: 5px 5px 5px rgba(0,0,0,.5);  /* All Else */			
			width: 300px;
			margin: 20px auto 20px auto;  /* top right bottom left */
			font-family: Covered By Your Grace, cursive, arial, sans-serif;
			font-size: 21px;
}

DIV.postItBanner {
			height: 40px;
			padding: 0px 0px 0px 0px;  /* top right bottom left */
			text-align: center;
			background-color: #FFEF00;
			color: white;
			font-size: 28px;
			text-decoration: underline;
}

DIV.postItText {
			min-height: 60px;
			padding: 10px 10px 20px 10px;  /* top right bottom left */
			text-align: left;
			background-color: #FFEF00;
			color: black;
}

DIV.pin {
			/* horz. distance, vert. distance, blur, spread */
			-moz-box-shadow: 2px 3px 6px rgba(0,0,0,.55);  /* Mozilla Firefox 3.5 - 3.6 */
			-webkit-box-shadow: 2px 3px 6px rgba(0,0,0,.55);  /* Safari 3.1 - 5 */
			box-shadow: 2px 3px 6px rgba(0,0,0,.55);  /* All Else */
			-moz-border-radius: 50%;
			-webkit-border-radius: 50%;
			border-radius: 50%;
			width: 16px;
			height: 16px;
}
DIV.pinLeft {
			float: left;
			margin: 5px 0px 0px 7px;  /* top right bottom left */
}
DIV.pinRight {
			float: right;
			margin: 5px 6px 0px 0px;  /* top right bottom left */
}

.postItText{
			font-family: Covered By Your Grace, cursive, arial, sans-serif;
			font-size: 21px;
}

A.postItText {
      color: blue;
      font-weight: normal;
      text-decoration: underline;
}

A.postItTextHilite {
			color: red;
			white-space: normal;
}

.postItTextLarge {
			font-family: Covered By Your Grace, cursive, arial, sans-serif;
			font-size: 28px;
}


DIV.postItBanner1 {
			background-color: gold;
}
DIV.postItBanner2 {
			background-color: mediumAquaMarine;
}
DIV.postItBanner3, DIV.postItBannerAlert {
			background-color: lightCoral;
}
DIV.postItBanner4 {
			background-color: cornflowerBlue;
}
DIV.postItBanner5 {
			background-color: gray;
}

DIV.postItText1 {
			background-color: lemonChiffon;
}
DIV.postItText2 {
			background-color: aquaMarine;
}
DIV.postItText3 {
			background-color: bisque;
}
DIV.postItText4 {
			background-color: powderBlue;
}
DIV.postItText5 {
			background-color: lightGray;
}

DIV.pin1 {
			background: yellow;
			background: rgba(250,255,219,1);
			background: -moz-linear-gradient(-45deg, rgba(250,255,219,1) 0%, rgba(241,255,51,1) 100%);
			background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(250,255,219,1)), color-stop(100%, rgba(241,255,51,1)));
			background: -webkit-linear-gradient(-45deg, rgba(250,255,219,1) 0%, rgba(241,255,51,1) 100%);
			background: -o-linear-gradient(-45deg, rgba(250,255,219,1) 0%, rgba(241,255,51,1) 100%);
			background: -ms-linear-gradient(-45deg, rgba(250,255,219,1) 0%, rgba(241,255,51,1) 100%);
			background: linear-gradient(135deg, rgba(250,255,219,1) 0%, rgba(241,255,51,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#faffdb', endColorstr='#f1ff33', GradientType=1 );
}
DIV.pin2 {
			background: springGreen;
			background: rgba(179,220,237,1);
			background: -moz-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
			background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(179,220,237,1)), color-stop(100%, rgba(41,184,229,1)));
			background: -webkit-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
			background: -o-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
			background: -ms-linear-gradient(-45deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
			background: linear-gradient(135deg, rgba(179,220,237,1) 0%, rgba(41,184,229,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#29b8e5', GradientType=1 );
}
DIV.pin3 {
			background: indianRed;
			background: rgba(255,151,107,1);
			background: -moz-linear-gradient(-45deg, rgba(255,151,107,1) 0%, rgba(235,55,0,1) 100%);
			background: -webkit-gradient(left top, right bottom, color-stop(0%, rgba(255,151,107,1)), color-stop(100%, rgba(235,55,0,1)));
			background: -webkit-linear-gradient(-45deg, rgba(255,151,107,1) 0%, rgba(235,55,0,1) 100%);
			background: -o-linear-gradient(-45deg, rgba(255,151,107,1) 0%, rgba(235,55,0,1) 100%);
			background: -ms-linear-gradient(-45deg, rgba(255,151,107,1) 0%, rgba(235,55,0,1) 100%);
			background: linear-gradient(135deg, rgba(255,151,107,1) 0%, rgba(235,55,0,1) 100%);
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff976b', endColorstr='#eb3700', GradientType=1 );
}


/*-----------------------------------------------------------------------------
		LAYOUT DIVS AND H1 RIBBON
-----------------------------------------------------------------------------*/
DIV.banner, DIV.content, DIV.topEdge, #topAd {
			width: 100%;
}

DIV.overallShadow {
			-moz-box-shadow: 1px 3px 3px #555;  	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 1px 3px 3px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 1px 3px 3px #555;
			width: 320px;
			margin: 0px 0px 6px 0px;   /* top right bottom left */
}

DIV.banner {
			border-top: 1px solid black;  /* width style color */
			border-bottom: 1px solid black;  /* width style color */
			background-color: #587498;
			min-height: 135px;
}

DIV.bannerLeft {
			width: 310px;
			text-align: center;
			margin: 0px auto 0px auto;	/* top right bottom left */
}

DIV.bannerLeft A {
			text-decoration: none;
}

DIV.logoLine {
			width: 100%;
			margin: 0px auto 0px auto;	/* top right bottom left */
			border-bottom: 1px solid white;  /* width style color */			
}

DIV.slogan {
			display: none;
      font-size: 15px;
      font-weight: normal;
      xfont-style: italic;
      text-align: center;
      color: #FDFDA0;  /* yellow - FFFF80, FDFDA0 */
      xtext-shadow: 1px 1px #222;
      padding: 6px;
}

DIV.bannerRight {
			width: 310px;
			margin: 0px auto 0px auto;	/* top right bottom left */
}

DIV.quickSearch {
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			border-radius: 4px;
			-moz-box-shadow: 5px 5px 5px #333333;	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 5px 5px 5px #333333;
			box-shadow: 5px 5px 5px #333333;
			display: none;
			background-color: lightgray;
			width: 288px;  /* 288px */
			margin: 0px auto 15px auto;   /* top right bottom left */
			padding: 5px;
			text-align: center;
}

DIV.quickButtons {
			margin: 0px auto 0px auto;	/* top right bottom left */
			padding: 0px;
			padding-top: 3px;
			text-align: center;
}

#topAd {
		background-color: mistyrose; /* FFE4E1. 255 229 225 */
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
}

DIV.topEdge {
			-moz-box-shadow: 0px 4px 5px -2px #555;  	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 0px 4px 5px -2px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 0px 4px 5px -2px #555;
			margin: 0px 0px 4px 0px;   /* top right bottom left */
			background-color: mistyrose; /* FFE4E1. 255 229 225 */
      padding-top: 0px;
      padding-bottom: 6px;
      line-height: 0px;
      text-align: center;
			xborder-bottom: 3px solid #666666;  /* width style color */
}

DIV.content {
			background-color: mistyrose; /* FFE4E1. 255 229 225 */
			min-height: 260px;
			overflow: auto;
}

DIV.bulletins, DIV.details {
			-moz-box-shadow: 3px 3px 3px #555;  /* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 3px 3px 3px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 3px 3px 3px #555;
}

DIV.bulletins {
			float: none; 
			background: url( "/images/bgBulletinBoardNew.gif" ) top left repeat;
			min-height: 160px; 
			text-align: center;
			width: 308px;
			padding: 10px 0px 10px 0px; /* top right bottom left */
			margin: 0px auto 20px auto;
}

DIV.topTape {
			margin: 4px 0px 0px 0px;
			padding: 0px;
}

DIV.details {
			background: white; 
			min-height: 170px; 
			padding: 5px; /* top right bottom left */
			margin: 0px 0px 20px 0px;   /* top right bottom left */
}

.ribbon {
			-moz-box-shadow: 0 2px 0 rgba(0,0,0,.5); 	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 0 2px 0 rgba(0,0,0,.5);
			box-shadow: 0 2px 0 rgba(0,0,0,.5);
			color: white;
			font-weight: bold;
			font-style: italic;
			font-size: 21px;
			text-shadow: 1px 1px #000;
			background-color: #98AFC7; /* CCC or FFC1C1 or 98AFC7 */
			position: relative;
			display: block;
			padding: 10px 10px 10px 10px; 
			margin: 0px -5px 20px -12px;  /* related to details padding plus before after border width, bottom */
}

.ribbon:before, .xribbon:after {
			content: '';
			position: absolute;
			border-style: solid;
			border-color: transparent;
			bottom: -7px; /* related to before after border width */
}

.ribbon:before {
			border-width: 0px 7px 7px 0px;
			border-right-color: #222;
			left: 0px;
}

.xribbon:after {
			border-width: 0px 0px 7px 7px;
			border-left-color: #AE4117;
			right: 0px;
}

.ribbonGirl {
			background-color: #E6AEAE; /* FFC1C1 (rosy brown 1) or E6AEAE or E6BDBD */
}

.ribbonBoy {
			background-color: #98AFC7; /* CCC or FFC1C1 or 98AFC7 */
}

.ribbonUnisex {
			background-color: #9DCF9D; /* 9DCF9D or AEE6AE */
}

DIV.footer, DIV.footer A {
			background-color: mistyrose; /* FFE4E1. 255 229 225 */
			color: #444;
			font-size: 12px;
			font-weight: 400;
			text-align: center;
}
DIV.footer {
			padding: 20px 20px 30px 20px;
}

DIV.arrowUp	{ 
	    position: fixed; 
	    bottom: 10px; 
	    right: 8px;
		z-index: 2;
		x-moz-border-radius: 50%;
		x-webkit-border-radius: 50%;
		xborder-radius: 50%;
	    xpadding: 5px;
	    xbackground: #FFFEA1; 
	    xborder: 1px solid #3C4F68;  /* #FC0FC0 */
}


/*-----------------------------------------------------------------------------
		MARKER - MEDIA QUERIES
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 1px)
{
		#cssCheck {
			font-size: 1px;
		}
		
		#postItAd1, #postItAd2 {
			margin-left: -1px;
			margin-right: -1px;
		}
}


/*-----------------------------------------------------------------------------
		320 IS SMALLEST OFFICIALLY SUPPORTED SIZE
-----------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
		ROOM FOR PAGE ADS
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 320px)
{
		#cssCheck {
			font-size: 320px;
		}

		DIV.overallShadow {
			width: auto;
		}
}


/*-----------------------------------------------------------------------------
		A LITTLE MORE COMFORTABLY WIDER
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 340px)
{
		#cssCheck {
			font-size: 340px;
		}

		#postItAd1, #postItAd2 {
			margin-left: auto;
			margin-right: auto;
		}

		DIV.overallShadow {
			-moz-box-shadow: 3px 3px 3px #555;  /* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 3px 3px 3px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 3px 3px 3px #555;
			margin: 0px 6px 6px 4px;   /* top right bottom left */
		}

		DIV.topEdge {
			padding-bottom: 10px;
		}
  
		DIV.bulletins {
			width: 322px;
		}
}


/*-----------------------------------------------------------------------------
		MORE COMFORTABLE FOR PAGE ADS
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 375px)
{
		#cssCheck {
			font-size: 375px;
		}

		DIV.topTape {
			margin: 4px 10px 0px 10px;
		}

		DIV.details {
			margin: 0px 10px 20px 10px;   /* top right bottom left */
			padding: 15px;
		}
		
		.ribbon {
			margin: 0px -15px 20px -22px;  /* related to details padding plus before after border width, bottom */
		}
}


/*-----------------------------------------------------------------------------
		STACKED BANNER GETS A BIT WIDER
		Could set content bulletins and details side by side with bulletins
		moving to 128, but wait until 650.
		Ads (1 or both) will be put in details programatically between 340 and 850.
		Bulletins will be below details, again programatically until 650.
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 480px)
{
		#cssCheck {
			font-size: 480px;
		}

		DIV.bannerLeft, DIV.bannerRight {
			width: 320px;
		}

/*		
		DIV.bulletins {
			float: left;
			width: 128px;
			padding: 10px 0px 40px 0px;
			margin: 0px 3px 10px 0px;
		}

		DIV.postIt {
			width: 120px;
		}
		
		DIV.postItBanner {
			height: 60px;
			font-size: 24px;
		}

		DIV.pin {
			width: 12px;
			height: 12px;
		}
		
		DIV.pinLeft {
			margin: 2px 0px 0px 2px;
		}
		
		DIV.pinRight {
			margin: 2px 2px 0px 0px;
		}
		
		DIV.topTape {
			margin: 7px 10px 0px 143px;
		}

		DIV.details {
			padding: 10px;
			margin: 0px 10px 10px 143px;
		}

		.postItText{
			font-size: 19px;
		}
		
		.postItTextLarge {
			font-size: 24px;
		}

		.ribbon {
			margin: 0px -10px 20px -17px;  // related to div padding plus before after border width, bottom
		}
		
		IMG.topTape {
				height: 32px;
		}
*/
}


/*-----------------------------------------------------------------------------
		Content bulletins and details could be already set to side by side or
		set here, with bulletins moving to 168, but wait until 650.
		Ads (1 or both) will be put in details programatically between 340 and 850.
		Bulletins will be below details, again programatically until 650.
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 520px) and (min-height: 370px)
{
		IMG.logo {
			width: 320px;
			height: 101px;
		}
}


@media only screen and (min-width: 520px)
{
		#cssCheck {
			font-size: 520px;
		}
		
		IMG.topTape {
			height: 32px;
		}

/*
		DIV.bulletins {
			width: 168px;
			padding: 10px 0px 40px 0px;
			margin: 0px 3px 10px 0px;
		}

		DIV.postIt {
			width: 160px;
		}

		DIV.topTape {
			margin: 7px 10px 0px 183px;
		}

		DIV.details {
			padding: 10px;
			margin: 0px 10px 10px 183px;
		}
  
		.ribbon {
			margin: 0px -10px 20px -17px;  // related to div padding plus before after border width, bottom
		}
*/
}


/*-----------------------------------------------------------------------------
		BULLETINS AND DETAILS GO SIDE BY SIDE		
		Content bulletins and details could be already set to side by side, and
		this could just move to a more roomy bulletins at 168.
		Instead do here at 650.
		Ads (1 or both) will be put in details programatically between 340 and 850.
		Bulletins will be below details, again programatically until 650.
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 650px)
{
		#cssCheck {
			font-size: 650px;
		}

/*
		DIV.bulletins {
			margin: 0px 5px 15px 0px;
		}
		
		DIV.topTape {
			margin: 10px 14px 0px 185px;
		}

		DIV.details {
			padding: 10px 15px 10px 15px;
			margin: 0px 15px 15px 185px;
		}

		.ribbon {
			margin: 0px -15px 20px -22px;  // related to div padding plus before after border width, bottom
			padding-left: 20px;
		}
*/		
		
		DIV.bulletins {
			float: left;
			width: 168px;
			padding: 10px 0px 40px 0px;
			margin: 0px 5px 15px 0px;
		}

		DIV.postIt {
			width: 160px;
		}
		
		DIV.postItBanner {
			height: 60px;
			font-size: 24px;
		}

		DIV.pin {
			width: 12px;
			height: 12px;
		}
		
		DIV.pinLeft {
			margin: 2px 0px 0px 2px;  /* top right bottom left */
		}
		
		DIV.pinRight {
			margin: 2px 2px 0px 0px;  /* top right bottom left */
		}
		
		DIV.topTape {
			margin: 10px 14px 0px 185px;
		}

		DIV.details {
			padding: 10px 15px 10px 15px;
			margin: 0px 15px 15px 185px;
		}

		.postItText{
			font-size: 19px;
		}
		
		.postItTextLarge {
			font-size: 24px;
		}

		.ribbon {
			margin: 0px -15px 20px -22px;  // related to div padding plus before after border width, bottom
			padding-left: 20px;
		}
}


/*-----------------------------------------------------------------------------
		TOP BANNER GOES HORIZONTAL
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 700px)
{
		#cssCheck {
			font-size: 700px;
		}

		DIV.bannerLeft {
			width: 320px;
			margin-left: 20px;
			float: left;
		}

		DIV.logoLine {
			width: 294px;
		}
		
		DIV.slogan {
			display: block;
		}
		
		DIV.bannerRight {
			width: 320px;
			margin: 17px 10px 0px 0px;	/* top right bottom left */
			float: right;
		}
		
		DIV.quickSearch {
			display: block;
			margin-bottom: 0px;
		}

		.buttonQs {
			width: 27px;
		}

		IMG.logo {
			width: 320px;
			height: 101px;
		}
}


/*-----------------------------------------------------------------------------
		MENU GOES HORIZONTAL
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 830px)
{
		#cssCheck {
			font-size: 800px;
		}

		DIV.overallShadow {
			-moz-box-shadow: 5px 5px 5px #555;  	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 5px 5px 5px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 5px 5px 5px #555;
			width: auto;
			margin: 0px 15px 15px 15px;   /* top right bottom left */
		}

		DIV.bannerLeft {
			margin-left: 20px;
			float: left;
		}

		DIV.bannerRight{
			margin-left: 80px;
			float: left;
		}

		DIV.topEdge {
			-moz-box-shadow: 0px 7px 5px -2px #555;  	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 0px 7px 5px -2px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 0px 7px 5px -2px #555;
			margin: 0px 0px 5px 0px;   /* top right bottom left */
		}

		DIV.bulletins, DIV.details {
			-moz-box-shadow: 5px 5px 5px #555;  	/* horz. distance, vert. distance, blur, spread */
			-webkit-box-shadow: 5px 5px 5px #555;  /* rgba(0,0,0,0.5) */
			box-shadow: 5px 5px 5px #555;
		} 
}


/*-----------------------------------------------------------------------------
		ROOM FOR FULL SIZE ADS
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 850px)
{
		#cssCheck {
			font-size: 850px;
		}

		DIV.bulletins {
			width: 322px;
			padding: 10px 0px 40px 0px; /* top right bottom left */
			margin: 0px 5px 15px 0px;   /* top right bottom left */
		}

		DIV.postIt {
			width: 300px;
		}

		DIV.postItBanner {
			height: 40px;
			font-size: 28px;
		}

		DIV.pin {
			width: 16px;
			height: 16px;
		}
		
		DIV.pinLeft {
			margin: 5px 0px 0px 7px;  /* top right bottom left */
		}
		
		DIV.pinRight {
			margin: 5px 6px 0px 0px;  /* top right bottom left */
		}

		DIV.topTape {
			margin: 10px 14px 0px 340px;
		}

		DIV.details {
			padding: 10px 20px 10px 20px; /* top right bottom left */
			margin: 0px 15px 15px 340px;   /* top right bottom left */
		}

		.postItText{
			font-size: 21px;
		}
		
		.postItTextLarge {
			font-size: 28px;
		}

		.ribbon {
			margin: 0px -20px 20px -27px;  /* related to div padding plus before after border width, bottom */
		}	
}


/*-----------------------------------------------------------------------------
		TO INFINITY AND BEYOND...
-----------------------------------------------------------------------------*/
@media only screen and (min-width: 1000px)
{
		#cssCheck {
			font-size: 1000px;
		}

		DIV.overallShadow {
      width: 970px;
			margin: 0px auto 15px auto;   /* top right bottom left */
		}
}