/* CSS Document */

/*------------------------------------------------------------------------------------------------------------------
Basic Style Sheet 

version: 2.0
author: reuben dykes
email: reuben@shabangweb.ca
website: http://www.shabangweb.ca
------------------------------------------------------------------------------------------------------------------*/


/* Body Styles 
------------------------------------------------------------------------------------------------------------------*/
* {
    padding: 0;
	margin: 0;
	font-family: tahoma, verdana, arial, sans-serif;
	color: #677582;
	font-size: small;
}
html, body  {
  height: 100%;
}

body {
    background: #656b74 url("images/bkg.jpg") top center repeat-x;
	position: relative;
	_position: absolute;
	#position: absolute;
	left: 0;
	#left: 2px;
	_left: 2px;
}

/* Structural Styles 
-----------------------------------------------------------------------------------------------------------------*/
#container {    
    background: #d2dce4 url("images/bkg.gif") top center repeat-y;
	margin: 0 auto;
	width: 800px;
	position: relative;
    min-height: 100%;
	height: 100%;
	clear: both;
}

#logo-left {
	width:300px;
	height:36px;
	display: inline;
	float: left;
}
#calgary-skyline-right {
	width:168px;
	height:36px;
	display: inline;
	float: right;
}
#home-banner {
	width:800px;
	height:198px;
	clear: both;
}
#footer {
    margin: 0;
    padding-top: 12px;
	width: 800px;
	height: 100px;
	background: url("images/footer.gif") top center no-repeat;
	clear: both;
}

#footer div {
	text-align: center;
	font-size: 80%;
}

#rightsidebar {
    float: right;
	width: 220px;
	padding: 0 15px 50px 15px;
	margin: 0 0 15px 15px;
	border-left: 1px solid #B3CAE2;
}
#rightsidebar img {
    border: 1px solid #B3CAE2;	
}

/* Navigation Styles
-------------------------------------------------------------------------------------------------------------*/
a {
    color: #c12925;
}

#content h2 a:link { color: #c12925; text-decoration: none; }
#content h2 a:visited { color: #c12925; text-decoration: underline; }

h3 { margin: 0; padding: 0; }

#main_navigation ul, #main_navigation li {
	height:36px;
	display: inline;
	list-style-type: none;
	white-space: nowrap;
	float: left;
}

#home a, #about a, #services a, #portfolio a, #contact a {    
	font-size: 8px;
	color: #fff;	
	height: 36px;
	display: block;
	text-decoration: none;
	text-indent: -1000px;
}

#home a {
    background-image: url("images/home.gif");
	width: 62px;
}
#home a:hover {
    background-image: url("images/home_over.gif");
}
#about a {
    background-image: url("images/about.gif");
	width: 58px;
}
#about a:hover {
    background-image: url("images/about_over.gif");
}
#services a {
    background-image: url("images/services.gif");
	width: 72px;
}
#services a:hover {
    background-image: url("images/services_over.gif");
}
#portfolio a {
    background-image: url("images/portfolio.gif");
	width: 71px;
}
#portfolio a:hover {
    background-image: url("images/portfolio_over.gif");
}
#contact a {
    background-image: url("images/contact.gif");
	width: 69px;
}
#contact a:hover {
    background-image: url("images/contact_over.gif");
}
#content a:link, #content a:active, #content a:visited {
    font-size: 100%;
	color: #8f9caf;
	display: inline;	
	text-decoration: underline;
}

#content a:hover {
    font-size: 100%;
	color: #8f9caf;
	border-bottom: 1px dotted #c12925;
	display: inline;
}

#link a:link  {
    display: inline;
	font-size: 90%;
	text-indent: 0;
	border-bottom: 1px dotted #c12925;
	color: #c12925;
}
#link a:visited  {
    display: inline;
	font-size: 90%;
	text-indent: 0;
	border-bottom: 1px dotted #c12925;
	color: #c12925;
}
#link a:hover  {
    display: inline;
	font-size: 90%;
	text-indent: 0;
	border-bottom: 1px solid #c12925;
	color: #c12925;
}
#link a:active  {
    display: inline;
	font-size: 90%;
	text-indent: 0;
	color: #c12925;
	border-bottom: 1px dotted #c12925;
}

/* Content Styles 
-------------------------------------------------------------------------------------------------------*/
#content {
	width:800px;
    background: url("images/content.gif") top center repeat-y;
	clear: both;
	overflow: hidden;
}

#content p, h1, h2 {
    margin: 0 40px;
}
#content h1 {
    color: #c12925;
	font-size: 160%;
	margin-bottom: 15px; margin-top: 5px;
}
#content p {
    margin-top: 12px; margin-bottom: 12px;
}
#content h2 {
    font-size: 105%;
	color: #c12925;
	font-weight: bold;
    margin-bottom: 15px; margin-top: 5px;
}

.smalltext {
    font-size: 10px;	
}

#rightsidebar h1 { font-size: 12px; margin: 0 0 10px 0; /*border-bottom: dotted 1px #c12925;*/ }
#rightsidebar p { padding: 0; margin: 0; } 

#content ul { margin: 0 0 0 40px; padding: 0; list-style-image: url("images/bullet_red.gif"); }
#content li { margin-left: 15px; font-size: 90%; }

#rightsidebar ul { margin: 0; padding: 0; list-style-image: url("images/bullet_red.gif"); }
#rightsidebar li { margin-left: 15px; font-size: 90%; }

#rightsidebar a { font-size: 90%; }

form {
    display : block; 
} 
textarea {
    background :  url("images/textarea_bg.gif") scroll; 
    width : 432px; 
    height : 130px; 
    padding : 6px; 
    margin : 0; 
    border : 0; 
    color : #444; 
    font-family : verdana, arial, sans-serif; 
    font-size: 10px;
    overflow : hidden; 
} 
input {
    color : #444; 
    width : 144px; 
    background :  url("images/input_bg.gif") scroll; 
    background-repeat: repeat-x;
    border : 0; 
    padding : 2px; 
    height: 14px;
    margin : 0; 
    font-family : verdana, arial, sans-serif; 
    font-size: 10px;
} 
input.button {
    color:#10422A;
	font-family:'trebuchet ms',arial,sans-serif;;
	font-weight:bold;
	background-color: #E6EAE8;
	border:1px solid #D3D3D3;
	cursor: pointer;
}
.submit {
    padding : 0; 
    margin : 5px 26px 0 95px; 
    float : left;
    display : block; 
    width : 66px; 
    height : 22px; 
    border : 0; 
} 
input, textarea {
	border: 1px solid #D3D3D3;
}
.shaded, .noshade { padding: 5px 0 5px 10px; margin: 0 0 0 0; }  
.shaded { background-color: #dbe0e5; }
.noshade { background-color: #e4eaef; }
.border { border: 1px solid #888; width: 720px; margin: 0 40px; padding: 0; }
/*#contact_table {
    padding-left: 100px;
}*/

ul#clients
  {
    text-align: center;
	padding-left: 70px;
    width: 49.8em;
	list-style-type: none;
	list-style-image: none;
  }
  
  #clients img {
    border: 1px solid #888;
  }

  ul#clients {
	list-style-type: none;  
	list-style-image: none;
  }

  /* float & allow room for the widest item */
  ul#clients li
  {
    float: left;
    width: 16em;
	/*height: 3em;*/
	padding: 11px 4px 10px 4px;	
	margin: 10px 0;
	height: 100px;
	list-style-type: none;
	list-style-image: none;
  }

  /* stop the float */
  br
  {
    clear: left;
  }

  /* separate the list from subsequent markup */
  div#wrapper
  {
    margin-bottom: 1em;
	padding-bottom: 20px;
	/*min-height: 720px;*/
  }
  #content  {
    padding-bottom: 20px;
  }
  span#title {
    display: block;
	color: #c12925;
	font-size: 108%;
  }
  span#coding {
    display: block;
	font-weight: 100;
  }
  span#link {
    display: block;
	font-weight: 100;
  }
  ul#clients h5 {
    border: 1px solid #ccc;
	padding: 10px 3px;
  }