/* Portfolio Filter Stylesheet */

/*****Reset*****/


/*****Custom Classes*****/
.clearing { clear: both; }
.last { margin-bottom: 0; }
.screenReader { left: -9999px; position: absolute; top: -9999px; }

/*****Basic Layout*****/
div#container { margin: 20px auto 0; overflow: hidden; width: 725px; background-color:#FFFFFF; }

/*** ORGIN ul#filter { float: left; font-size: 16px; list-style: none; margin-left: 10px; margin-top: 10px; width: 100%; } ***/
ul#filter {  position:relative; left:57px; top:-30px; width:650px; height:50px; overflow:hidden; font-size: 16px; list-style: none; margin:0px auto; margin-top:5px }
ul#filter li { 
	border-right: 1px solid #dedede;
	float: left;
	line-height: 16px;
	margin-right: 10px;
	padding-right: 10px;
}
ul#filter li a { 
	color:#000000;
	text-decoration:none;
	padding:5px;
}
ul#filter li:last-child { border-right: none; margin-right: 0; padding-right: 0; }

ul#filter li.current a, ul#filter a:hover { 
	color:#000000;
	text-decoration:none;
	background:#ABD378;
	padding:5px;
	-webkit-border-radius: 15px;    /* for Safari */
    -moz-border-radius: 15px;       /* for Firefox */
}
ul#filter li.current a { 
	color:#ABD378;
	text-decoration:none;
	background:#000000;
	padding:5px;
	-webkit-border-radius: 15px;    /* for Safari */
    -moz-border-radius: 15px;       /* for Firefox */
}
.triangle {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
}
.triangle-l {
	border-color: transparent #7d90a3 transparent transparent;
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: -30px;
	top: 65px;
	z-index: -1; /* displayed under bubble */
}

.triangle-r {
	border-style:solid;
	border-width:15px;
	height:0px;
	width:0px;
	position: relative;
	left: 299px;
	top: 35px;
	z-index: -1; /* displayed under bubble */
}
li.web-dev div.bubble div.triangle-l{border-color: transparent #407124 transparent transparent;}
li.web-dev div.bubble div.triangle-r{border-color: transparent transparent transparent #407124;}
li.apparel div.bubble div.triangle-l{border-color: transparent #00635A transparent transparent;}
li.apparel div.bubble div.triangle-r{border-color: transparent transparent transparent #00635A;}
li.web-design div.bubble div.triangle-l{border-color: transparent #0E6385 transparent transparent;}
li.web-design div.bubble div.triangle-r{border-color: transparent transparent transparent #0E6385;}
li.web-micro div.bubble div.triangle-l{border-color: transparent #736357 transparent transparent;}
li.web-micro div.bubble div.triangle-r{border-color: transparent transparent transparent #736357;}

.info {
	padding: 60px 25px 35px 25px;
}
.info img {
	max-width:245px;
	border:1px solid #CCCCCC;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
}
.info h2 {
	font-size: 20px;
}

.info p {
	padding-top: 10px;
	font-size: 14px;
	line-height: 22px;
}

.info p a {
	color: #c4591e;
	text-decoration: none;
}

.info p a:hover {
	text-decoration: underline;
}
.bubble {
	clear: both;
	margin: 0px auto;
	width: 270;
	border:1px solid #CCCCCC;
	background:#E6E6E6;
	color:#4D4D4D;
	-moz-border-radius: 10px;
  	-khtml-border-radius: 10px;
  	-webkit-border-radius: 10px;
	-moz-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  	-khtml-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
  	-webkit-box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
	position: relative;
	z-index: 90; /* the stack order: displayed under ribbon rectangle (100) */
}

.rectangle {
	height: 50px;
	width: 330px;
	position: relative;
	left:-15px;
	top: 30px;
	float: left;
	-moz-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-khtml-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
  	-webkit-box-shadow: 0px 0px 4px rgba(0,0,0,0.55);
	z-index: 100; /* the stack order: foreground */
}
li.web-dev div.bubble div.rectangle{background: #ABD378;}
li.apparel div.bubble div.rectangle{background: #00A99D;}
li.web-design div.bubble div.rectangle{background: #29ABE2;}
li.web-micro div.bubble div.rectangle{background: #C7B299;}

.rectangle h2 {
	font-size: 30px;
	color: #fff;
	padding-top: 10px;
	margin: 0px;
	text-shadow: 1px 1px 2px rgba(0,0,0,0.2);
	text-align: center;
}
ul#portfolio { float: left; list-style: none; margin-left: 0; width: 850px; }
ul#portfolio li { 
	float: left; 
	margin: 0 10px 10px 0; 
	padding: 15px;
	width: 300px;
}
ul#portfolio a { display: block; width: 100%; }
ul#portfolio a:hover { text-decoration: none; }