@font-face {
    font-family: 'COM4tSansMediumRegular';
    src: url('fonts/com4s_m-webfont.eot');
    src: url('fonts/com4s_m-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/com4s_m-webfont.woff') format('woff'),
         url('fonts/com4s_m-webfont.ttf') format('truetype'),
         url('com4s_m-webfont.svg') format('svg');
    font-weight: normal;
    font-style: normal;

}

body {
	background-color: #FFFFFF;
	margin: 0;
	padding: 0;
	font-family: "COM4tSansMediumRegular", Verdana, Arial, Helvetica, sans-serif;
	letter-spacing: 0.25em;
}

/* ~~ Element/tag selectors ~~ */
h1, h2, h3, h4, h5, h6, p {
	margin-top: 0;	 /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
	padding-right: .5em;
	padding-left: .5em; /* adding the padding to the sides of the elements within the divs, instead of the divs themselves, gets rid of any box model math. A nested div with side padding can also be used as an alternate method. */
}

#streetsign img
{
	border-style: none;
	padding-top: 2em;
	padding-bottom: 0px;
}
a:link, a:visited {
	color:#333;
	text-decoration: none;
}
.ritalinks, .archlinks {
	font-size:1em;
	}

.ritalinks:visited, .ritalinks {
	color: #333;
	text-decoration: none
}
 
.ritalinks:hover, .ritalinks:active, .ritalinks:focus {
	color: #6c3;
	text-decoration: none;
	text-shadow: #333 0px 0px 2px;
	-moz-text-shadow: #333 0px 0px 2px;
	-webkit-text-shadow: #333 0px 0px 2px;

}


.archlinks:hover, .archlinks:active, .archlinks:focus, .archsublinks:hover, .archsublinks:active, .archsublinks:focus {
	color: #f00;
	text-decoration: none;
	text-shadow: #333 0px 0px 2px;
	-moz-text-shadow: #333 0px 0px 2px;
	-webkit-text-shadow: #333 0px 0px 2px;

}
.archlinks, .archlinks:visited {
	font-size:1em;
	color: #333;
	text-decoration: none
}

.archsublinks {	
	font-size: 0.75em;
	letter-spacing: 0.25em;
}


/* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
.container {
	width: 100%;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
	background-color: #FFF;
}

.header {
	background-color: #FFFFFF;
	font-family: "COM4tSansMediumRegular", Verdana, Arial, Helvetica, sans-serif;
	text-shadow: #666 0px 0px 4px;
	-moz-text-shadow: #666 0px 0px 4px;
	-webkit-text-shadow: #666 0px 0px 4px;
	letter-spacing: 17%;
	text-align: center;
	font-size: 2em;
	padding-top: .5em;
}

.architecture {
	float: left;
	width: 40%;
	padding-bottom: 10px;
	padding-top: 10px;
	text-align: center;
}
.furniture {
	float: left;
	width: 20%;
	padding: 10px 0;
	text-align: center;
}
.graphicdesign {
	float: left;
	width: 40%;
	padding: 10px 0;
	text-align: center;
}


/* ~~The footer ~~ */
#streetsign
{
	background: url(../images/sky3.png) repeat;
	width: 100%;
	border-bottom: 1px solid #696969;
	margin-bottom: 0px;
	padding-top: 3em;
	padding-bottom: 0px;
}

.footer {
	font-size: 0.625em;
	font-family: Verdana, Arial, Helvetica;
	padding: 3em 0 0;
	background-color: #FFFFFF;
	position: relative;/* this gives IE6 hasLayout to properly clear */
	clear: both;
	letter-spacing: normal;
	text-align: center;
	margin-top: 3em;
}

.navigation-separators {	color: #696969
}

.footer p
{
	padding: 1em, 0, 2em, 0;
}

.footer p a img
{
	padding-top: 0.125em;
}