@charset "utf-8";
/* CSS Document */

/*  **********  Begin Header Navigation Links - Services Page  *********  */

.graphicArt2x { width: 18rem; }												/*  tile width:  288px (18rem)		tile height:  32px (2rem)  */

.graphicArt {
	display: block;
	max-width: 100%;
	height: 0;
	background: url(../../images/sprites/portfolio/navsPortfolio.png) left top no-repeat;	/*  Text Left, 10 rows (40 tiles), 4 columns  */
}																		/*  sprite width: 1792px (112rem)  sprite height: 320px (20rem)  */

.graphicArt {
	padding-bottom: 11.1111%;												/*  tile height (32px)  ÷  tile width (288px)  X  100  */
	-webkit-background-size: 622.2222% auto;									/*  sprite width (1792px)  ÷  tile width  X  100  */
	-moz-background-size: 622.2222% auto;
	-o-background-size: 622.2222% auto;
	background-size: 622.2222% auto;
}																		/*  x-pos = 100 X tile left  ÷  abs(tile width - sprite width)  */
																		/*  y-pos = 100 X tile top  ÷  abs(tile height - sprite height [288])  */
																		/*  tile position (left, top) (x,y)  */
i.graphicArt			{ background-position: 89.3617% 0; }						/*  1344,   0  */
i.graphicArt:hover		{ background-position: 89.3617% 0; }						/*  1344,   0  */

/*  **********  End Headers & Inline Text Navigation Links - Services & Portfolio Pages  *********  */
/*  **********  Begin Headers & Inline Text Navigation Links - Portfolio Graphic Art Designs Page  *********  */

.brand2x				{ width: 13.25rem; }									/*  tile width:  212px (13.25rem)		tile height:  32px (2rem)  */
.lineArt2x			{ width: 8rem; }										/*  tile width:  128px (8rem)			tile height:  32px (2rem)  */
.logo2x				{ width: 5.875rem; }									/*  tile width:  94px (5.875rem)		tile height:  32px (2rem)  */
.map2x				{ width: 12rem; }										/*  tile width:  192px (12rem)		tile height:  32px (2rem)  */
.webButton2x			{ width: 15rem; }										/*  tile width:  240px (15rem)		tile height:  32px (2rem)  */
.webIcon2x			{ width: 12.625rem; }									/*  tile width:  202px (12.625rem)		tile height:  32px (2rem)  */
.webSprite2x			{ width: 13.625rem; }									/*  tile width:  218px (13.625rem)		tile height:  32px (2rem)  */

.brand15x				{ width: 9.9375rem; }					/*  2x X 75%		/*  tile width:  159px (9.9375rem)		tile height:  24px (1.5rem)  */
.lineArt15x			{ width: 6rem; }						/*  2x X 75%		/*  tile width:  96px (6rem)			tile height:  24px (1.5rem)  */
.logo15x				{ width: 4.4063rem; }					/*  2x X 75%		/*  tile width:  70.5px (4.4063rem)	tile height:  24px (1.5rem)  */
.map15x				{ width: 9rem; }						/*  2x X 75%		/*  tile width:  144px (9rem)			tile height:  24px (1.5rem)  */
.webButton15x			{ width: 11.25rem; }					/*  2x X 75%		/*  tile width:  180px (11.25rem)		tile height:  24px (1.5rem)  */
.webIcon15x			{ width: 9.4688rem; }					/*  2x X 75%		/*  tile width:  151.5px (9.4688rem)	tile height:  24px (1.5rem)  */
.webSprite15x			{ width: 10.2188rem; }					/*  2x X 75%		/*  tile width:  163.5px (10.2188rem)	tile height:  24px (1.5rem)  */

.brand, .lineArt, .logo, .map, .webButton, .webIcon, .webSprite {
	display: block;
	max-width: 100%;
	height: 0;
	background: url(../../images/sprites/portfolio/navsaGraphicArt.png) left top no-repeat;	/*  Text Left, 7 rows (28 tiles), 4 columns (4 links)  */
}																		/*  sprite width: 960px (60rem)  sprite height: 224px (14rem)  */

.brand {
	padding-bottom: 15.0943%;												/*  tile height (32px)  ÷  tile width (212px)  X  100  */
	-webkit-background-size: 452.8302% auto;									/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 452.8302% auto;
	-o-background-size: 452.8302% auto;
	background-size: 452.8302% auto;
}

.lineArt {
	padding-bottom: 25%;													/*  tile height (32px)  ÷  tile width (128px)  X  100  */
	-webkit-background-size: 750% auto;										/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 750% auto;
	-o-background-size: 750% auto;
	background-size: 750% auto;
}

.logo {
	padding-bottom: 34.0426%;												/*  tile height (32px)  ÷  tile width (94px)  X  100  */
	-webkit-background-size: 1021.2766% auto;									/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 1021.2766% auto;
	-o-background-size: 1021.2766% auto;
	background-size: 1021.2766% auto;
}

.map {
	padding-bottom: 16.6667%;												/*  tile height (32px)  ÷  tile width (192px)  X  100  */
	-webkit-background-size: 500% auto;										/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 500% auto;
	-o-background-size: 500% auto;
	background-size: 500% auto;
}

.webButton {
	padding-bottom: 13.3333%;												/*  tile height (32px)  ÷  tile width (240px)  X  100  */
	-webkit-background-size: 400% auto;										/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 400% auto;
	-o-background-size: 400% auto;
	background-size: 400% auto;
}

.webIcon {
	padding-bottom: 15.8416%;												/*  tile height (32px)  ÷  tile width (202px)  X  100  */
	-webkit-background-size: 475.2475% auto;									/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 475.2475% auto;
	-o-background-size: 475.2475% auto;
	background-size: 475.2475% auto;
}

.webSprite {
	padding-bottom: 14.6789%;												/*  tile height (32px)  ÷  tile width (218px)  X  100  */
	-webkit-background-size: 440.367% auto;										/*  sprite width (960px)  ÷  tile width  X  100  */
	-moz-background-size: 440.367% auto;
	-o-background-size: 440.367% auto;
	background-size: 440.367% auto;
}
																		/*  x-pos = 100 X tile left  ÷  abs(tile width - sprite width)  */
																		/*  y-pos = 100 X tile top  ÷  abs(tile height - sprite height [192])  */
																		/*  tile position (left, top) (x,y)  */
.brand				{ background-position: 0 0; }								/*  0,   0  		tile width:  212px  */
.lineArt				{ background-position: 0 16.6667%; }						/*  0,  32  		tile width:  128px  */
.logo				{ background-position: 0 33.3333%; }						/*  0,  64  		tile width:   94px  */
.map					{ background-position: 0 50%; }							/*  0,  96  		tile width:  192px  */
.webButton			{ background-position: 0 66.6667%; }						/*  0, 128  		tile width:  240px  */
.webIcon				{ background-position: 0 83.3333%; }						/*  0, 160  		tile width:  202px  */
.webSprite			{ background-position: 0 100%; }							/*  0, 192  		tile width:  218px  */

.brand:visited			{ background-position: 32.0856% 0; }						/*  240,   0  */
.lineArt:visited		{ background-position: 28.8462% 16.6667%; }					/*  240,  32  */
.logo:visited			{ background-position: 27.7136% 33.3333%; }					/*  240,  64  */
.map:visited			{ background-position: 31.25% 50%; }						/*  240,  96  */
.webButton:visited		{ background-position: 33.3333% 66.6667%; }					/*  240, 128  */
.webIcon:visited		{ background-position: 31.6623% 83.3333%; }					/*  240, 160  */
.webSprite:visited		{ background-position: 32.345% 100%; }						/*  240, 192  */

.brand:hover			{ background-position: 64.1711% 0; }						/*  480,   0  */
.lineArt:hover			{ background-position: 57.6923% 16.6667%; }					/*  480,  32  */
.logo:hover			{ background-position: 55.4273% 33.3333%; }					/*  480,  64  */
.map:hover			{ background-position: 62.5% 50%; }						/*  480,  96  */
.webButton:hover		{ background-position: 66.6667% 66.6667%; }					/*  480, 128  */
.webIcon:hover			{ background-position: 63.3245% 83.3333%; }					/*  480, 160  */
.webSprite:hover		{ background-position: 64.69% 100%; }						/*  480, 192  */

.brand:active			{ background-position: 96.2567% 0; }						/*  720,   0  */
.lineArt:active		{ background-position: 86.5385% 16.6667%; }					/*  720,  32  */
.logo:active			{ background-position: 83.1409% 33.3333%; }					/*  720,  64  */
.map:active			{ background-position: 93.75% 50%; }						/*  720,  96  */
.webButton:active		{ background-position: 100% 66.6667%; }						/*  720, 128  */
.webIcon:active		{ background-position: 94.9868% 83.3333%; }					/*  720, 160  */
.webSprite:active		{ background-position: 97.035% 100%; }						/*  720, 192  */

/*  SAME AS :ACTIVE  */

i.brand, i.lineArt, i.logo, i.map, i.webButton, i.webIcon, i.webSprite { margin: 0 auto; }

i.brand				{ background-position: 96.2567% 0; }						/*  720,   0  */
i.lineArt				{ background-position: 86.5385% 16.6667%; }					/*  720,  32  */
i.logo				{ background-position: 83.1409% 33.3333%; }					/*  720,  64  */
i.map				{ background-position: 93.75% 50%; }						/*  720,  96  */
i.webButton			{ background-position: 100% 66.6667%; }						/*  720, 128  */
i.webIcon				{ background-position: 94.9868% 83.3333%; }					/*  720, 160  */
i.webSprite			{ background-position: 97.035% 100%; }						/*  720, 192  */

i.brand:hover			{ background-position: 96.2567% 0; }						/*  720,   0  */
i.lineArt:hover		{ background-position: 86.5385% 16.6667%; }					/*  720,  32  */
i.logo:hover			{ background-position: 83.1409% 33.3333%; }					/*  720,  64  */
i.map:hover			{ background-position: 93.75% 50%; }						/*  720,  96  */
i.webButton:hover		{ background-position: 100% 66.6667%; }						/*  720, 128  */
i.webIcon:hover		{ background-position: 94.9868% 83.3333%; }					/*  720, 160  */
i.webSprite:hover		{ background-position: 97.035% 100%; }						/*  720, 192  */


/*  **********  End Headers & Inline Text Navigation Links - Portfolio Graphic Art Designs Page  *********  */