/*
-------------------------------------------------------
Client: COUNTERPART communication + design
Developed by: Rainhouse Media - rainhousemedia.com
---------------------------------------------------- */

* {
  padding: 0;
  margin: 0;
}

body {
  text-align: center;
  color: #666;
  font: 11px/18px "Lucida Grande", arial, verdana, sans-serif;
  background-image: url("/images/bg_main.gif");
  background-repeat: repeat-y;
  background-position: top center;
  background-color: #000;
	}

  body#home {background-image: url("/images/bg_main-home.gif");}

  body#enlarge {background-image: none;}

  h1.none {display: none;}

  ul.nav-hidden	{display: none;}
  	
  ul.nav-hidden li	{list-style: none;}
  
  ul.nav-hidden ul li a	{text-indent: -9999px;text-decoration: none;}

#wrap {
    width: 750px;
	margin-left: auto;
	margin-right: auto;
    border-top: #000 solid 10px;
    text-align: left;
    }

#nav {
  height: 60px;
  width: 750px;
  float: left;
  background: #fff url("/images/bg_nav-inside.gif") bottom right no-repeat;
  }

#content {
  float: left;
  width: 750px;
  }

#leftcol {
  width: 250px;
  float: left;
  }

#midcol {
  width: 250px;
  float: left;
  }

  #intro {
  background: #fff url("/images/bg_intro.gif") top left no-repeat;
  float: left;
  height: 200px;
  width: 250px;
  }

  #intro a {
      display: block;
      float: right;
      width: 25px;
      height: 25px;
      margin: 145px 8px 0 0;
      }
	
	#intro span {
		display: none;
		}

#rightcol {
  width: 500px;
  float: left;
  }

  body#home #rightcol {width: 250px;}

#text {
  background: #fff url("/images/bg_text.gif") top left no-repeat;
  padding: 50px 30px 40px 30px;
  width: 440px;
  float: left;
  }

  body#work-bg #text {
  background: #fff url("/images/bg_work.gif") top left no-repeat;
  padding: 115px 30px 40px 30px;  
  }

  body#admin #text {
  background: #fff url("/images/bg_admin.gif") top left no-repeat;
  padding-top: 100px;
  }

  /* Box Model Hack - http://tantek.com/CSS/Examples/boxmodelhack.html */
  div#text { 
    width: 500px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 440px;
    } 

  html>body #text {
    width: 440px;
    }

#logo, #side_color {
  height: 350px;
  width: 250px;
  float: left;
  }

  #logo a.home {
		display: block;
		width: 250px;
		height: 100px;
		}
	
	#logo a.home span {
		display: none;
		}

body.random-1 #logo {background: #fff url("/images/logo_tall-1.gif") top left no-repeat;}
body.random-2 #logo {background: #fff url("/images/logo_tall-2.gif") top left no-repeat;}
body.random-3 #logo {background: #fff url("/images/logo_tall-3.gif") top left no-repeat;}

body.random-1 #side_color {background: #fff url("/images/side_color-1.gif") top left no-repeat;}
body.random-2 #side_color {background: #fff url("/images/side_color-2.gif") top left no-repeat;}
body.random-3 #side_color {background: #fff url("/images/side_color-3.gif") top left no-repeat;}

/*
-----------------------------------------------
HEADERS
----------------------------------------------- */

h1 {
  width: 420px;
  height: 25px;
  text-indent: -9999px;
}

#about {background: #fff url("/images/title_about.gif") top left no-repeat;}
#services {background: #fff url("/images/title_services.gif") top left no-repeat;}
#portfolio {background: #fff url("/images/title_portfolio.gif") top left no-repeat; width: 200px !important;}
#experience {background: #fff url("/images/title_experience.gif") top left no-repeat;}
#contact {background: #fff url("/images/title_contact.gif") top left no-repeat;}
#login {background: #fff url("/images/title_login.gif") top left no-repeat;}
#admin-h1 {background: #fff url("/images/title_admin.gif") top left no-repeat;}
#evaluation-form {background: #fff url("/images/title_evaluation-form.gif") top left no-repeat;}
#legal {background: #fff url("/images/title_legal.gif") top left no-repeat;}

h2 {
  height: 15px;
  margin: 15px 0 5px 0;
  text-indent: -9999px;
}

#downloads {background: transparent url("/images/subtitle_downloads.gif") top left no-repeat; width: 180px;}
#ratings {background: transparent url("/images/subtitle_ratings.gif") top left no-repeat; width: 180px;}
#news {background: transparent url("/images/subtitle_news.gif") top left no-repeat; width: 180px;}
#different {background: transparent url("/images/subtitle_different.gif") top left no-repeat; width: 420px;}
#ratings-clients {background: transparent url("/images/subtitle_ratings-clients.gif") top left no-repeat; width: 420px;}
#ratings-peers {background: transparent url("/images/subtitle_ratings-peers.gif") top left no-repeat; width: 420px;}
#apart {background: transparent url("/images/subtitle_apart.gif") top left no-repeat; width: 420px;}
#positioning {background: transparent url("/images/subtitle_positioning.gif") top left no-repeat; width: 420px;}
#planning {background: transparent url("/images/subtitle_planning.gif") top left no-repeat; width: 420px;}
#creative {background: transparent url("/images/subtitle_creative.gif") top left no-repeat; width: 420px;}
#clients {background: transparent url("/images/subtitle_clients.gif") top left no-repeat; width: 420px;}
#contact-form {background: transparent url("/images/subtitle_contact-form.gif") top left no-repeat; width: 420px;}
#manage-news {background: transparent url("/images/subtitle_manage-news.gif") top left no-repeat; width: 420px;}
#creativity {background: transparent url("/images/subtitle_creativity.gif") top left no-repeat; width: 175px;margin: 0;}
#timeliness {background: transparent url("/images/subtitle_timeliness.gif") top left no-repeat; width: 175px; height: 30px !important; margin: 0;}
#cost {background: transparent url("/images/subtitle_cost.gif") top left no-repeat; width: 175px;margin: 0;}
#invitation {background: transparent url("/images/subtitle_invitation.gif") top left no-repeat; width: 420px;}


h3 {
  color: #666633;
  font-size: 11px;
  font-weight: bold;
  }

/*
-----------------------------------------------
LINKS
----------------------------------------------- */

a.body {
  color: #43857c; 
  text-decoration: none;
  border-bottom: #ddd solid 1px;
  }

a.body:hover {
  color: #993300;
  text-decoration: none;
  border-bottom: #ddd solid 1px;
  }

a.item {
  color: #993300; 
  text-decoration: none;
  }

a.item:hover {
  color: #43857c;
  text-decoration: none;
  }

/*
-----------------------------------------------
UNORDERED LISTS
----------------------------------------------- */

ul.subcol {
	position: relative;
	}
	
ul.subcol li {
	padding: 0 0 0 13px;
  margin: 0 0 8px 0;
  list-style: none;
  background: transparent url("/images/bullet.gif") no-repeat 0px 5px;
	}

ul.content	{
	position: relative;
	}
	
ul.content li	{
	padding: 0 0 0 13px;
  margin: 0 0 4px 0;
  list-style: none;
  background: transparent url("/images/bullet_content.gif") no-repeat 0px 6px;
	}

ul.subnav	{
	position: relative;
  margin: 125px 25px 0 25px;
  font-size: 10px;
	}
	
ul.subnav li	{
	padding: 0 0 0 18px;
  margin: 0 0 5px 0;
  list-style: none;
  background: transparent url("/images/bullet_subnav.gif") no-repeat 0px 1px;
	}

  ul.subnav li a	{
	text-decoration: none;
  color: #fff;
  padding: 0 0 1px 0;
  border-bottom: #666 solid 1px;
	}

  ul.subnav li a:hover	{
	text-decoration: none;
  border-bottom: #fff solid 1px;
	}

ul.worknav	{
    position: relative;
    width: 150px;
    margin: 125px 25px 0 0;
    font-size: 10px;
    display: inline;
    float: right;
	}
	
ul.worknav li	{
    padding: 0;
    margin: 0 8px 8px 0;
    list-style: none;
    background: none;
    display: inline;
    float: left;
	}

    ul.worknav li a {
    text-decoration: none;
    border: #fff solid 1px;
    width: 15px;
    height: 15px;    
    float: left;
    }

    ul.worknav li a.down {
    border: #ff9933 solid 1px;
    }

    ul.worknav li a.down:hover {
    border: #ff9933 solid 1px;
    background: none;
    }

    ul.worknav li a:hover {
    text-decoration: none;
    background: #ff9933;
    }

ul.projectnav	{
    position: relative;
    margin: 4px 0 0 0;
    display: inline;
    float: left;
	}

ul.projectnav li	{
    padding: 0 4px 0 0;
    list-style: none;
    background: none;
    display: inline;
    float: left;
	}

    ul.projectnav li a {
    text-decoration: none;
    float: left;
    color: #fff;
    background: #ccc;
    width: 10px;
    height: 10px;
    }

    ul.projectnav li a:hover {
    text-decoration: none;
    background: #ff9933;
    }

    ul.projectnav li a.active {
    text-decoration: none;
    background: #999 url("/images/bg_project-active.gif") no-repeat;
    }

/*
-----------------------------------------------
INDIVIDUAL CLASSES
----------------------------------------------- */

.subcol-left, .subcol-right {
  float: left;
  width: 180px;
  font-size: 10px;
  line-height: 14px;
  background: #f6f6f6;
  padding: 0px 10px 10px 10px;
  margin: 10px 20px 0 0;
  }

  /* Box Model Hack - http://tantek.com/CSS/Examples/boxmodelhack.html */
  div.subcol-left, div.subcol-right { 
    width: 200px;
    voice-family: "\"}\""; 
    voice-family:inherit;
    width: 180px;
    } 

  html>body .subcol-left, html>body .subcol-right {
    width: 180px;
    }

.subcol-right {
  margin: 10px 0 0 0;
  }

p {
  margin: 0 0 5px 0;
  }

.ratings {
  color: #f07e09;
  font-size: 20px;
  }

.hidden {
	display: none;
	visibility: hidden;
}

.clear {
  clear: both;
}

.floatleft {
    float: left;
    }

.error {
    color: #cc0000 !important;
    font-weight: bold;
    }

#workthumbnails {
    margin: 5px 0 0 0;
    padding: 0;
    float: left;
    width: 215px;
    border-top: #ddd solid 1px;
	}

/*
-----------------------------------------------
TABLES
----------------------------------------------- */

.table {
  text-align: left;
  color: #666;
  font: 11px/18px "Lucida Grande", verdana, helvetica, arial, sans-serif;
  }

.tdhead-line {
  border-bottom: #999 solid 1px;
  padding: 5px 0 0 15px;
  }

.td {
  padding: 5px 0 5px 15px;
  vertical-align: top;
  }

.tr {
  background: transparent;
  }

.tr:hover {
  background: #f6f6f6;
  color: #333;
  }

.td-worktitle {
    vertical-align: top;
    padding: 0 25px 0 0;
    font: 10px/14px "Lucida Grande", verdana, helvetica, arial, sans-serif;
    }

.td-workimage {
    vertical-align: top;
    }

/*
-----------------------------------------------
FORMS
----------------------------------------------- */

input {
  background-color: #fff;
  border: #43857c solid;
  border-width: 1px;
  font-family: "Lucida Grande", verdana, helvetica, arial, sans-serif;
  font-size: 11px;
  padding: 2px;
  }

select {
  background-color: #fff;
  border: #43857c solid;
  border-width: 1px;
  font-family: "Lucida Grande", verdana, helvetica, arial, sans-serif;
  font-size: 11px;
  padding: 2px;
  }

textarea {
  background-color: #fff;
  border: #43857c solid;
  border-width: 1px;
  font-family: "Lucida Grande", verdana, helvetica, arial, sans-serif;
  font-size: 11px;
  padding: 2px;
  }

input:focus, textarea:focus {
  border: #8f3900 solid;
  border-width: 1px;
  }

.submit {	
  background-color: #43857c;
  border: #fff solid 1px;
  font-size: 11px;
  padding: 2px;
	color: #fff;
  cursor: pointer;
	}

.submit:hover {
	background-color: #8f3900;
	}

/*
-------------------------------------------------------
IMAGES
---------------------------------------------------- */

img {
  border: 0;
  }

/*-------------------------------------------------
FOR NON-JAVASCRIPT USERS
-------------------------------------------------*/

#workimage {
    visibility: visible;
	z-index: 10;
	position: relative;
    margin: 0;
    padding: 0;
	}