@import url(http://fonts.googleapis.com/css?family=Lato);
@charset "UTF-8";
/* CSS Document */

html, body {height:100%; margin:0;}
img {max-width:100%;  }
h1 {margin: 1.4em 0;}
.group:before, .group:after {
    content:"";
    display:table;
}
.ux h2:first-child {margin-top: 3em;}

.group:after {
    clear:both;
}
.group {
    zoom:1; /* For IE 6/7 (trigger hasLayout) */
}



body {
	font-family: Helvetica Neue, helvetica, Geneva, sans-serif;
	font-weight:300;
	font-size:100%;
	color:#000;
	line-height:1.4em;
	background: #fff url(images/hdr-bkg2.png) repeat-x;

}

h1, h2, h3 {font-family: "Lato", Tahoma, Geneva, sans-serif;}

.inner {
	max-width: 1000px;
	margin:0 auto;
	padding: 12px 4% 10px;
	xposition:relative;
}

header {
	color:#000;
	background: url(images/UX-bkg2.jpg) center center no-repeat;
	height: 200px;
	xposition:relative;
}
header .inner {	
}
header .logo {
	float:left; 
	position:relative; 
	z-index:350;
}
header .logo a {
	font-family: Lato;
	font-weight:10;
	font-size: 1.8em;
	text-decoration:none;
}
header a {color:#fff;}
header a:hover {color:#4cc;}
#top {	
	height: 50px;
	background: url(images/35blk.png) repeat;	
}
#tag {
	height: 130px;
}
#tag .tagtext{
	margin-top: 30px; 
	text-align:center;
	font-size: 1.5em;
	line-height:1.6em;
	font-style:italic;
	color:#fff;
	}

#tag table {margin:-10px auto;}
#tag table td {}
#tag a img {
	height:120px; 
	opacity:0.4; 
	padding: 0 10px;
	z-index:0; 
	position:relative;
	}
#tag a:hover img, 
#tag a img.current {
	height:120px; 
	opacity:1.0;
	}

#tag img {height:1em; padding:0 4%;display:inline-block; border: 0px solid red;}
.item {
	margin: 3em auto 4em;
	border:1px solid #acc;
	border-radius: 7px;
}

.item .imgPanel {
	margin: 2em auto 0;
	background:#E5EEEE;
	border-bottom-left-radius:6px;
	border-bottom-right-radius:6px;
}

.item .imgPanel a img {
	margin: 14px 5px 10px 15px; 
	height:140px; 
	float:left;
	-webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.64);
	-moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.64);
	box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.64);
}

.item p, .item h3 {margin: 15px;}
.portfolio a img {opacity:0.6;}
.portfolio a img:hover {opacity:1.0;}

footer {margin-top: 2rem;border-top: 2px solid #036; height:45px;}


.notetext {font-size:.7em; color:#555; line-height:1.1em;}


.main { margin:3em 8%;}
.wrapper {margin: 0 8%;}

div.left	{
	margin-bottom: 30px;
	float:left;
	padding-right:14px;
}
div.rightcol {
	margin-left: 255px;
	
}

.centercol {
	width:93%;
	margin: auto;
	margin-bottom: 30px;
}
.sidebar-R {
	width: 30%;
	margin-left:75%;

}

.homeitem {
	max-width:150px;
	padding-top: .1em;
	xxtext-align:center;
}

.itemwrapper {
	clear:both;
	margin-bottom: 3em;
	
	}
	
.itemwrapper .ux-image {
	width:60%;
	min-width:150px;
	margin: 0 3% 3em 3%;
}

.itemwrapper .ux-text {
	width:32%;
}

.ux .itemwrapper li {padding-bottom: .7em;}
.lft {float:left;}
.rht {float:right;}


.feature-item {background:#f2f2f2; margin: 4em auto; padding: 1em 3%; border-radius: 10px;}
.shadow {
	-webkit-box-shadow: rgba(50, 50, 50, 0.639216) 3px 3px 5px 0px;
	box-shadow: rgba(50, 50, 50, 0.639216) 3px 3px 5px 0px;
}
ul#menu {font-family: Lato; font-size: 1.2em;}
menu { margin-top: -4px!Important;}

@media screen and (max-width : 680px){
.home div.rightcol {width:98%; padding :0 1%;float:none; margin:0;}
.home div.left {width:230px; padding :0 1%;float:none; margin:0 auto;}

.leftcol, .siderbar-R, .hoeitem {width:98%; padding :0 1%;float:none; margin:0;}
.main {margin:3em 1%;}


.ux .left,
.ux .rht { float:none;}

.ux .ux-text,
.ux .ux-image { width:100%;}
}


@media screen and (max-width : 480px){
	.wrapper {margin: 1%;}
	.inner {}
	h1 {margin-top:0.6em;}
	ul#menu {
		z-index:202; 
		position:relative;
		}
	ul#menu li ul {width:101%!important;}
	div.left,
	div.rightcol {width:98%; padding :0 1%;float:none; margin:0;}
	#tag img {
		height:1em; 
		padding:0 1%; 
		display:inline-block; 
		border: 0px solid red;
		}
	.home #tag .tagtext {white-space:nowrap;}
	#tag .tagtext img {display:none;}
	#tag .tagtext {margin-top: 65px;} 

	#top {
		background-color:#222;	
		position:fixed;
		width:100%;
		z-index:100;
	}
	#tag table {
		margin-top: 35px; 
	}

	
	
}