/*

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;}

html {
	background-color:	#f4f4f4;}

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:10px; margin-left:  4px;}
	img.floatLeft  					{float: left;  margin-top:10px; margin-right: 4px;}
	img.profilePicture				{margin-top:4px;margin-left:10px;}
	img.wideTopMarginImg  			{margin-top: 10px;}
	div.showFullTopBorder			{border-top: 1px solid #c0c0c0;}
	div.showFullBottomBorder		{border-bottom: 1px solid #c0c0c0;}
	body div.noTopBorder			{border-top: 0px solid #ffffff;}
	body div .noTopMargin			{margin-top: 0px;}
	body div .mediumTopMargin		{margin-top: 20px;}	/* corrects a subtle error related to multi-image images. */
	body div .wideTopMargin			{margin-top: 30px;}
	div#thePage .startPageSection	{margin-top: 35px;}
	.wideBottomMargin				{margin-bottom: 15px;}
	.doubleWideBottomMargin			{margin-bottom: 30px;}
	.noBottomMargin					{margin-bottom:	0px;}
	.positioningContext				{position:relative}
	.containFloats					{overflow:auto; zoom:1;}
	.cssCentered					{display:block; margin-right:auto; margin-left:auto;}
	div#content .overflowHidden		{overflow:hidden}
	div#design-portfolio-header img.noRightMarginExtension	{margin-right:auto;}


/* page structures */

	div#thePage {
		position:			relative;
		width:				91.1818em;			/* equates to 1003px. */
		width:				66.18em;			/* 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;
			margin-left:		0;
			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;}
		
			.noHeadlineThisColumn				{padding-top:36px;}
			div.twoColumns.extendRightMargin	{width: 686px;}	/* allows image shadows outside of the container when necessary */
			div.multiImage img					{margin-bottom:15px;}
			body div.interpageDivider			{margin-top:52px;}

		
		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-right:	30px;
				margin-bottom:	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 {
	display:none;
		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 {
			display:			block;
			
			border-top:			1px solid #da2028;
			border-bottom:		0px solid #da2028;
			padding-bottom:		13px;
			font-size:			12px;
			line-height:		22px;
			text-align:			right;
			text-transform:		uppercase;
			text-decoration:	none;
			color:				#000;}

		div#mainMenu a:link		 {}
		div#mainMenu a:visited	 {}
		div#mainMenu a:focus	 {}
		a.mainMenuSelected:hover {}
		div#mainMenu a:active	 {}

		div#mainMenu a#homePage						{background: url(../miscellaneous/navigation-icons.gif) 0px    5px no-repeat;}
		div#mainMenu a#homePage:hover				{background: url(../miscellaneous/navigation-icons.gif) 0px -195px no-repeat; color:#da2028;}
		div#mainMenu a#homePage.mainMenuSelected	{background: url(../miscellaneous/navigation-icons.gif) 0px    5px no-repeat #e5e4e4; color:#000;}
		
		div#mainMenu a#services						{background: url(../miscellaneous/navigation-icons.gif) 0px  -45px no-repeat;}
		div#mainMenu a#services:hover				{background: url(../miscellaneous/navigation-icons.gif) 0px -245px no-repeat; color:#da2028;}
		div#mainMenu a#services.mainMenuSelected	{background: url(../miscellaneous/navigation-icons.gif) 0px  -45px no-repeat #e5e4e4; color:#000;}
		
		div#mainMenu a#portfolio					{background: url(../miscellaneous/navigation-icons.gif) 0px  -95px no-repeat;}
		div#mainMenu a#portfolio:hover				{background: url(../miscellaneous/navigation-icons.gif) 0px -295px no-repeat; color:#da2028;}
		div#mainMenu a#portfolio.mainMenuSelected	{background: url(../miscellaneous/navigation-icons.gif) 0px  -95px no-repeat #e5e4e4; color:#000;}
		
		div#mainMenu a#contact						{background: url(../miscellaneous/navigation-icons.gif) 0px -145px no-repeat;}
		div#mainMenu a#contact:hover				{background: url(../miscellaneous/navigation-icons.gif) 0px -345px no-repeat; color:#da2028;}
		div#mainMenu a#contact.mainMenuSelected		{background: url(../miscellaneous/navigation-icons.gif) 0px -145px no-repeat #e5e4e4; color:#000;}


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

		div#mainMenu a.mainMenuSelected {
			background:			#e5e4e4;
			border-top:			1px solid #333;
			color:				#000;}

		p#ourService {
			margin-top:			33px;
			margin-bottom:		6px;
			border-bottom:		1px solid #da2028;
			padding-bottom:		34px;
			font-size:			14px;
			line-height:		18px;
			font-style:			italic;
			text-align:			center;
			color:				#da2028;}


	/* Current projects */

	div#currentProjects h3			{margin-bottom:7px; font-size:10px; font-weight:normal; }
	div#currentProjects h4			{margin-bottom:5px; font-size:10px; font-weight:normal; }
	div#currentProjects p			{margin-top:0px; margin-bottom:6px; font-size:9px; line-height:14px; }
	div#currentProjects p span		{color:#da2028; }

	div#mainMenu div#currentProjects a				{display:inline; border-top:0; padding-bottom:0px; text-transform:none;font-size:9px; line-height:14px;}
	div#mainMenu div#currentProjects a:link			{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	div#mainMenu div#currentProjects a:visited		{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	div#mainMenu div#currentProjects a:focus		{color: #000000; text-decoration:none;border-bottom: 1px dotted #da2028}
	div#mainMenu div#currentProjects a:hover		{color: #da2028; text-decoration:none;border-bottom: 1px solid  #da2028}
	div#mainMenu div#currentProjects a:active		{color: #000000; text-decoration:none;border-bottom: 1px dotted #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  {display:none; background: url(../web-design/website-design-ProjectStory.jpg)  no-repeat;}
			div#portfolioSamples2  {display:none; background: url(../web-design/website-design-WedBlend-wedding-vendors-quotes.jpg) no-repeat;}
			div#portfolioSamples3  {display:none; background: url(../interface-design/interface-design-for-web-application-Elite-SEM-Supplier-Portal.jpg) no-repeat;}
			div#portfolioSamples4  {display:none; background: url(../web-design/website-design-360Partners-clear_visual_communication_design_for_a_suppliers_page.jpg) no-repeat;}
			div#portfolioSamples5  {display:none; background: url(../web-design/website-design-Beretta-bowden-cable.jpg) no-repeat;}
			div#portfolioSamples6  {display:none; background: url(../calligrams/calligram-design-Free-your-mind-Laura-Ruggeri-calligramma-calligramme.jpg) no-repeat;}
			div#portfolioSamples7  {display:none; background: url(../brochures/brochure-Unione-Industriale-Torino-communication-design-by-Laura-Ruggeri.jpg) no-repeat;}
			div#portfolioSamples8  {display:none; background: url(../logo-design/logo-Book-Marketing-Connections-Laura-Ruggeri-designer-for-Irene-Watson.jpg) no-repeat;}
			div#portfolioSamples9  {display:none; background: url(../interface-design/AdminPortal-home-option2.jpg) no-repeat;}
			div#portfolioSamples10 {display:none; background: url(../interface-design/PSCertify-web_application-interface_design-visual_design.jpg) no-repeat;}
			div#portfolioSamples11 {display:none; background: url(../interface-design/RapidRecon-web_app-smartphone-UI_visual_design.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 */

	div.portfolioContainer			{overflow:auto; zoom:1;}
	div#portfolioFilter				{display:none; margin-bottom:30px;}
	div#portfolioFilter	a:link		{display:inline-block; width:111px; background-color:#f4f4f4; border-bottom:none; font-size:10px; text-align:center; text-transform:uppercase;
									-moz-transition-duration: .25s; -o-transition-duration: .25s; -webkit-transition-duration: .25s; transition-duration: .25s;}
	div#portfolioFilter	a:hover		{}
	div#portfolioFilter	a.selected	{background-color:#da2028; color:white;}
	
	body#portfolioPage h2 a:link	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}
	body#portfolioPage h2 a:visited	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}
	body#portfolioPage h2 a:focus	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}
	body#portfolioPage h2 a:hover	{color: #da2028; text-decoration:none;border-bottom: 1px solid  #da2028;}
	body#portfolioPage h2 a:active	{color: #da2028; text-decoration:none;border-bottom: 0px solid  #da2028;}


/* portfolio example pages */
	
	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}


/* berettabowden */

	img#BerettaBrochureImage				{margin-top:6px; margin-right:-6px;}

	div#FotoGallery {
		float:			right;
		width:			174px;
		border:			1px solid #ccc;
		background:		url(../miscellaneous/Prodotti-gallery-background.jpg) bottom;
		padding:		10px 10px 2px 10px ; 
		text-align:		center;
	}
	
	div#Schermo	img {padding-bottom:10px }

	#CaviBowden-02, #CaviBowden-03, #CaviBowden-04, #CaviBowden-05, #CaviBowden-06, #CaviBowden-07, 
	#CaviBowden-08, #CaviBowden-09, #CaviBowden-10, #CaviBowden-11, #CaviBowden-12,  #CaviBowden-13, #CaviBowden-14 
	{display:none;}
	
	img#Prev, img#Next	{cursor:pointer;}
	
	
/* Screen Caffeine */

	div.SCCDs				{overflow:auto; zoom:1; margin-bottom:32px; border-top:0;}
	img.cdTwo				{margin-right:0;   margin-left:5px;}
	img.cdThree				{margin-right:5px; margin-left:0; }
	div.SCVideos			{border-top:0;}
	div.SCVideos iframe		{margin-bottom:30px;}


/* Miscellaneous pages */

img#AustinMagazineFeatures		{display:block; margin:0 auto; }
img#calligramTShirt				{margin-right:48px; margin-bottom: 20px;}
img#calligramLove				{margin-top:40px;}
img#lypLogotype					{margin-top:23px;}
img#lypLogo						{display:block; margin: 50px auto 0 auto; }
img#lypLogoReunion				{display:block; margin:58px auto 0 auto; }
img#automobileMilanoBrochures	{margin-top:180px;}
img#largeScaleGraphic			{margin-bottom:73px;}

/* logo-design.html */
div.onImageDescription			{position:absolute; top:0; left:0;}

/* Contact page */

	div#thankYouPanel	{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, #zsr74 {
			width: 			30.00em;
			margin-bottom:	16px;
			padding:		3px;}
		
		#zsr74 {width:12em;}
		#comments {height:7.25em;}

		#theSubmitButton {width:246px; }
	


/* Site map page */

	ul#sitemap li		{margin-bottom:10px}
	ul#sitemap ul		{margin-top:10px; margin-bottom:10px;}
	ul#sitemap ul li	{margin-bottom:3px;}
	


/* web-portal-application-interface-design-ETI.html */

	img#ETIIntegrationCenterReport		{cursor:pointer;}
	div#ETIIntegrationCenterReportLarge	{display:none; padding-top:40px; margin-left:200px;}

	a.close								{background-image: url(../miscellaneous/overlay-close.png); position:absolute; right:0px; top:5px; border:0; cursor:pointer; height:35px; width:35px;}
	#exposeMask							{cursor:pointer;}


/* overlays */

	.overlayTrigger				{cursor:pointer;}
	.genericOverlay				{display:none; z-index:10000; background-color:white; padding:10px; border:1px solid silver; box-shadow:0px 10px 20px #000; -webkit-box-shadow:0px 10px 20px #000;}


/* temporary rules */

.doNotShow {display:none;}
.unfinishedPortfolioPageAdjustment {height:520px;}