/*

If you are taking a look at this code set your editor to show tabs as 4 spaces and use a mono-spaced font. 
(The rules will be much easier to read.)

LR Communication Design

*/


*						{font-family: Verdana, Helvetica, sans-serif;}
body, h1, h2, h3, p, 
ul, ol, li				{margin:0; padding:0;}

body {
	background-color:	#000;
	font-size:			11px;
	line-height:		18px;
	background-color:	#f4f4f4;
	color:				#555;}


/* general use elements */

	h1 {
		/* reserved for the page title */
		width:				37.00em;			/* equates to 666px */
		padding-top:		24px;
		padding-bottom:		22px;
		font-size:			18px;
		line-height:		24px;
		text-transform:		uppercase;
		color:				#000;}
	
		h1 span {
			font-weight: 	normal;
			text-transform:	none;}

	h2 {
		font-size:			12px;
		line-height:		18px;
		padding-top:		6px;
		font-weight:		normal;
		text-transform:		uppercase;
		color:				#da2028;}
	
	p {
		margin-bottom:		1.25em;
		font-size:			11px;
		line-height:		18px;}	

	ul, ol {
		margin-left:		1.50em;
		margin-bottom:		1.25em;
		
		line-height:		18px;
	}

	ul ul {margin-bottom: 0px;}


	a:link					{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	a:visited				{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	a:focus					{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	a:hover					{color: #da2028; text-decoration:none;border-bottom: 1px solid  #da2028}
	a:active				{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	
	a img					{border: none;}
	label 					{margin-left: 4px;}
	img.floatRight 			{float: right; margin-top:4px; margin-left:  4px;}
	img.floatLeft  			{float: left;  margin-top:4px; margin-right: 4px;}
	img.wideTopMarginImg  	{margin-top: 10px;}
	div.showFullTopBorder	{border-top: 1px solid #c0c0c0;}
	body div.noTopBorder	{border-top: 0px solid #ffffff;}
	body div .noTopMargin	{margin-top: 0px;}
	body div .wideTopMargin	{margin-top: 30px;}
	.noBottomMargin			{margin-bottom:	0px;}


/* page structures */

	div#thePage {
		position:			relative;
		width:				91.1818em;			/* equates to 1003px. */
		margin:				0px auto;}
	
		div#content {
			position:			relative;
			width:				973px;
			width:				63.2727em;		/* equates to 696px. I.e 973 minus (247 + 30) */
			margin-left:		247px;
			padding-left:		30px;
			background-color:	#fff;}
	
	
		div.oneColumn {
			width:			60.5454em;			/* equates to 666px */
			border-top:		1px solid #c0c0c0;}
		
		
		div.twoColumns {
			overflow:		auto;
			width:			60.5454em;			/* equates to 666px */
			margin-top:		15px;				/* will need an override on the 1st row. */ }
		
			div.halfColumn {
				float:			left;
				width:			28.9090em;		/* equates to 318px */
				border-top:		1px solid #da2028;}
			
			body div.column1of2 {margin-right:	15px;}
			body div.column2of2 {margin-left:	15px;}
		
			div.twoColumns.extendRightMargin {width: 686px;}	/* allows image shadows outside of the container when necessary */

		
		
		div.threeColumns {
			overflow:		auto;
			width:			62.00em;			/* equates to 682px (not using 666 here.)
												The threeColumns div extends into the 30 pixel right margin.
												This extension allows for the shadow on the images.
												Since this margin is created by a width on the content div and the 
												columns are all narrower than the content div width there are no problems.
												The 30 pixel right "margin" was designed to be used this way when necessary. */
			margin-top:		30px;}
		
			div.onethirdColumn {
				position:		relative;
				float:			left;
				width:			18.3636em;		/* equates to 202px */
				height:			17.4545em;		/* equates to 192px */
				margin-left:	30px;
				border-top:		1px solid #c0c0c0;}
		
				body div.onethirdColumnNoMarginLeft {margin-left: 0px;}
		
				img.onethirdColumnImage {
					position:		absolute;
					bottom:			0px;
					right:			-7px;		/* the edge of the image aligns with the column edge and the shadow extends beyond. */
					}


/* main menu */

	div#mainMenu { 
		position:			absolute;
		top:				0px;
		left:				0px;
		width:				187px;				/* preventing text zoom for this structure */
		background-color:	#f4f4f4;
		padding:			17px 30px 30px 30px ;}
	
		div#mainMenu a#graphicWebInterfaceDesignServices {
			background: 	none; 
			margin:			0px;
			border: 		0px solid #f4f4f4;
			padding:		0px;}
		
		img#LRCommunicationDesignLogo {margin-bottom: 24px;}
		
		div#mainMenu a:link {
			display:			block;
			background:			url(../graphic-design/icon-home-page-link.gif) no-repeat;
			border-top:			1px solid #da2028;
			border-bottom:		0px solid #da2028;
			padding-bottom:		13px;
			font-size:			14px;
			line-height:		22px;
			text-align:			right;
			text-decoration:	none;
			color:				#000;}

		div#mainMenu a:visited {
			display:			block;
			background:			url(../graphic-design/icon-home-page-link.gif) no-repeat;
			border-top:			1px solid #da2028;
			border-bottom:		0px solid #da2028;
			padding-bottom:		13px;
			font-size:			14px;
			line-height:		22px;
			text-align:			right;
			text-decoration:	none;
			color:				#000;}

		div#mainMenu a:focus {
			display:			block;
			background:			url(../graphic-design/icon-home-page-link.gif) no-repeat;
			border-top:			1px solid #da2028;
			border-bottom:		0px solid #da2028;
			padding-bottom:		13px;
			font-size:			14px;
			line-height:		22px;
			text-align:			right;
			text-decoration:	none;
			color:				#000;}

		div#mainMenu a:hover {
			display:			block;
			background:			url(../graphic-design/icon-home-page-link.gif) no-repeat  #e5e4e4;
			border-top:			1px solid #da2028;
			border-bottom:		0px solid #da2028;
			padding-bottom:		13px;
			font-size:			14px;
			line-height:		22px;
			text-align:			right;
			text-decoration:	none;
			color:				#000;}

		div#mainMenu a:active {
			display:			block;
			background:			url(../graphic-design/icon-home-page-link.gif) no-repeat;
			border-top:			1px solid #da2028;
			border-bottom:		0px solid #da2028;
			padding-bottom:		13px;
			font-size:			14px;
			line-height:		22px;
			text-align:			right;
			text-decoration:	none;
			color:				#000;}

		div#mainMenu a#contact {
			border-bottom:		1px solid #da2028;}

		div#mainMenu a.mainMenuSelected {
			background:			url(../graphic-design/icon-home-page-link-selected.gif) no-repeat #e5e4e4;
			border-top:			1px solid #333;
			color:				#000;}

		p#ourService {
			margin-top:			33px;
			font-size:			14px;
			line-height:		18px;
			font-style:			italic;
			color:				#da2028;}


/* footer */

	div#footer {
		width:			74.00em;				/* equates to 666px */
		margin-top:		25px;					/* allows for line-height on preceeding paragraphs. Created 30px of space */
		border-top:		1px solid #da2028;
		padding-top:	17px;
		padding-bottom:	29px;
		font-size:		9px;
		line-height:	13px;
		color:			#333;}

		a#siteMap {
			display:			block;
			float:				left;
			text-transform:		uppercase;
			color:				#333;}
		
		div#copyright {text-align: right;}




/* page specific rules */


/* home page */

	div#homepagePortfolioDesignSamples {
		position:	relative;					/* setup a positioning context */
		width:		60.5454em;					/* equates to 666px */ }

		div.graphic-web-interface-design-samples {
			width:				60.5454em;		/* equates to 666px */ 
			height:				29.6363em;		/* equates to 319px */ }
	
			div#portfolioSamples1 {				 background: url(../web-design/website-design-LR-Communication-design.jpg)  no-repeat;}
			div#portfolioSamples2 {display:none; background: url(../web-design/website-design-LR-Communication-design2.jpg) no-repeat;}
			div#portfolioSamples3 {display:none; background: url(../web-design/website-design-LR-Communication-design3.jpg) no-repeat;}

			div.graphic-web-interface-design-samples h2				{width: 16.00em;   margin-left: 10px;  }
			div.graphic-web-interface-design-samples p				{width: 17.4545em; margin-left: 10px;}
			div.graphic-web-interface-design-samples p.clientAndurl {
				margin-top:		11px; 
				margin-bottom:	11px; 
				margin-left:	10px;}

			div.graphic-web-interface-design-samples p.theCaption {
				position:			absolute;
				width:				48.8333em;	/* equates to 586px */ 
				top:				27.3333em;	/* equates to 320 */ 
				left:				30px;
				font-size:			12px;
				line-height:		30px;
				text-align:			center;
				text-transform:		uppercase;
				color:				#000;}

			div#designSamplesNavigatior {
				width:				55.50em;	/* equates to 666px */
				border-top:			1px solid #000;
				background-color:	#ccc;
				font-size:			12px;
				line-height:		30px;
				text-align:			center;
				text-transform:		uppercase;
				color:				#000;}
		
				#arrowPrevious	{display:none; float: left;  margin-top: 6px; cursor: pointer;}
				#arrowNext		{display:none; float: right; margin-top: 6px; cursor: pointer;}


		img.homepageMiniImage {
			float:				right;
			margin-top:			10px; 
			margin-left:		4px;}
	
		div#mini-design-web-graphic-interface-portfolio {
			float:				right;
			margin-top:			10px; 
			margin-left:		4px;}
			div#mini-design-web-graphic-interface-portfolio img			{display:none}
			div#mini-design-web-graphic-interface-portfolio img#first	{display:inline}

		body#index div.halfColumn p {margin-bottom: 0px;}


/* portfolio page */
	body#portfolio h2 a:link	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}
	body#portfolio h2 a:visited	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}
	body#portfolio h2 a:focus	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}
	body#portfolio h2 a:hover	{color: #da2028; text-decoration:none;border-bottom: 1px solid  #da2028;}
	body#portfolio h2 a:active	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}


/* portfolio example page */
	
	div#design-portfolio-header 			{width: 60.5454em;	/* equates to 666px */ }
	div#design-portfolio-header h2			{width: 16.83em;  }
	div#design-portfolio-header p			{width: 18.3636em;}
	
	div#design-portfolio-header p.clientAndurl {
		margin-top:		11px; 
		margin-bottom:	11px; 
		margin-left:	0px;}

	div#design-portfolio-header img			{margin-right:-10px;}
	body.designExamplePage div.halfColumn	{border-top: 0px solid #fff;}
	span.design-item						{font-style: italic; color: #da2028}
	


/* Contact page */

	div#thankYouPanel	{display: none; margin-top: 1em;}

	form#LRCommunicationDesignContactForm h3 {
		font-size:			11px;
		line-height:		18px;
		font-weight:		normal;
		text-transform:		uppercase;
		color:				#000;}

		form#LRCommunicationDesignContactForm div {margin-top: 17px;}
	
		#name, #email, #comments {
			width: 			30.00em;
			margin-bottom:	16px;
			padding:		3px;}
			
		#comments {height:7.25em;}

		#theSubmitButton {width:246px; }



/* temporary rules */

.doNotShow {display:none;}