/* css */

div.clr {clear: both;}

div.clr10 {clear: both; height: 10px;}

div.clr20 {clear: both; height: 20px;}

div.clr30 {clear: both; height: 30px;}

strong {font-weight: bold;}

sup {position: relative; top: 2px; font-size: 75%; }

.orange {color: #f90;}

.green {color: #9c3;}

.left-img {float: left; padding: 20px 0px 0 0;}


body {background: url('../i/bg.png') repeat-x fixed; text-align: center; margin: 0 auto; padding: 0; line-height: 1.2em; font-family: "trebuchet MS", Tahoma,"Lucida Grande",Verdana,Arial,Helvetica,sans-serif; color: #333;}

#wrap {position: relative; top: 50px; width: 926px; margin: 0 auto;}

#top {background: url('../i/logo.png') no-repeat; width: 926px; height: 92px; margin-top: 6px;}

#top #logo {width: 200px; height: 92px; float: left; cursor: pointer;}

#top #nav {width: 726px; height: 92px; float: left;}

#top #nav #language {height: 20px; padding: 5px 20px 0px 0;}

#top #nav #language a {color: #f90; text-decoration: none;}

#top #nav #language a:hover {color: #ccc; text-decoration: underline;}

#top #nav ul {padding: 36px 20px 14px 0;}

#top #nav ul li {display: inline; margin: 0 -3px 0 0;}

#top #nav ul li:hover {}

#top #nav ul li a {color: #333; text-decoration: none; padding: 0 0 0 30px; border-bottom: 4px solid #666;}

#top #nav ul li a:hover, #top #nav .selected {border-bottom: 4px solid #f90;}

#top #nav, h3  {text-align: right; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-transform: uppercase; font-weight: bold;}

#mid {background: url('../i/central-section.png') no-repeat; width: 926px; height: 321px; margin-top: 6px;}

#mid img.frog {float: left; margin: 53px 0 0 1px;}

#mid img.slogan {float: left; margin: 60px 0 0 -110px;}

#bottom {width: 926px; height: 205px; margin-top: 6px;}

#bottom .box {float: left; background: url('../i/box-hp.png') no-repeat; width: 283px; height: 185px; padding: 10px;}

h3 {text-align: right; border-bottom: 4px solid #f90; width: 100%;}

#bottom .box p {text-align: left; font-size: .8em; padding: .8em 0 0 0;}

#bottom .box ul {font-size: .8em; padding: .8em 0 .8em 0;}

#bottom .box ul li {text-align: left; list-style-type: disc; margin-left: 20px;}

#bottom .central {margin: 0 8px;}

#bottom a {color: #f90; text-decoration: none;}

.read-more {background: url(../i/gray-arrow.png) no-repeat; padding: 0 0 0 20px; line-height: 20px; height: 25px; display: block;}

.read-more:hover {background: url(../i/orange-arrow.png) no-repeat 2px 0; color: #f90;}

.hp {position: relative; top: -7px;}

#bottom .box-wrap {height: 145px;}



#footer {color: #690; font-size: 12px; margin-top: 6px;}

/* sub page css  */

#content {width: 926px; margin-top: 6px;}

.cnt-box-top {background: url('../i/cnt-box-top.png') no-repeat; width: 926px; height: 8px;}

.cnt-box {background: url('../i/cnt-box-bg.png') repeat-y; width: 926px; text-align: center; padding-bottom: 20px;}

#pg-category {text-align: left; padding: 0px 10px 0 10px; position: relative; top: 20px; z-index: 0;}

#pg-category h1 {font-family: Arial,Verdana,Helvetica,sans-serif; text-transform: uppercase; font-size: 70px; font-weight: bold; color: #f9f9f9;}


.cnt-box a {color: #f90; text-decoration: none;}

.cnt-box h3 a {color: #333;}

.cnt-box a:hover {color: #9c3;}

.cnt-box-bottom {background: url('../i/cnt-box-bottom.png') no-repeat; width: 926px; height: 8px;}

/* portfolio */

.pf-piece {width: 96%; min-height: 206px; border: 1px dotted #fff; border-top: 1px dotted #ccc; border-bottom: 0; background-color: #fff; padding: 30px 10px 30px 10px; margin: 0 auto; position: relative; top: 40px; cursor: pointer;}

.pf-piece div.desc, .pf-piece div.role  {width: 266px; height: 206px; float: left; margin: 0 5px; text-align: left;} 

.pf-piece div.screen-shot {width: 286px; height: 206px; float: left; margin: 0 5px;}

.pf-piece div.desc, .pf-piece div.role {padding: 0 10px 0 10px;}

.pf-piece div p, #column2 p {text-align: left; font-size: .9em; padding-top: 10px;}

.pf-piece div.screen-shot img {border: 4px double #ccc;}

.pf-piece div.screen-shot img:hover {border: 4px double #333;}

.pf-piece:hover {background-color: #f7f7f7; border: 1px dotted #ccc; border-bottom: 0;}

.first-piece {border-top: 1px solid #fff;}

.visit {height: 40px; background: url('../portfolio/i/visit.png') no-repeat 5px 8px; padding: 2px 0 3px 40px; margin-top: 10px; cursor: pointer;}

.visit:hover {color: #f90;}

.desc a:hover {color: #f90; color: #9c3;}

/* services */

#column1, #column2, #column3 {float: left; text-align: left; position: relative; z-index: 10;}

#column1, #column3 {width: 24%; position: relative; top: 10px;}

#column2 {width: 50%; position: relative; top: 10px;}

#column1 ul, #column3 ul {padding: 0 0 0 20px; line-height: 1.8em;}

#column1 ul a, #column3 ul a {background: url(../i/gray-arrow.png) no-repeat; padding: 0 0 0 20px; font-size: .9em;}

#column1 ul a:hover, #column3 ul a:hover {background: url(../i/orange-arrow.png) no-repeat 2px 0; color: #f90;}

#column2 p {padding: 10px 0 30px 20px;}

#column2 h3 {border-bottom: 4px solid #d3d3d3; text-align: left; clear: both;}

/* about */

#about #column2 p {padding: 10px 0 0px 0px;}

.about-img {text-align: center;}

/* connect */

#connect #column2 p {clear: both; padding: 10px 0 0 0; text-align: center; position: relative; left: -60px;}

#connect #column2 p label {font-weight: bold; color: #690; width: 170px; float: left; text-align: right; padding-right: 10px;}

#connect #column2 p input {border: 1px solid #690; width: 250px; float: left;}

#connect #column2 p textarea {border: 1px solid #690; float: left; width: 250px; height: 100px; overflow: auto;}

#connect #column2 p span {color: #f90; font-weight: normal;}

#connect #column2 p input.submit-btn:hover {background: url('../i/submit-on.png') no-repeat;}

#connect #column2 p input.submit-btn {border:0; width: 143px; height: 21px; margin-left: 53px; background: url('../i/submit-off.png') no-repeat; text-indent: -9000px; /* the rest of the rule is fix for IE not indenting submit buttons */ font-size: 0px; display: block; line-height: 0px;}

#connect #column2 .thnk-msg p {text-align: left; position: relative; left: 10px;}

#captcha-container img {float: left;}

#captcha {border: 1px solid #690; margin-right: 10px;}

#column1 div.office-info, #column3 div.email-info {padding: 0 0 0 20px; line-height: 1.8em; font-size: .8em;}

#column1 div.office-info h3, #column3 div.email-info h3 {text-align: left; margin: 10px 0 10px 0;}

#connect #column2 p.code-error {padding-left: 70px;}