/*  
Hello, this is the main Conceptual Theme CSS file.
All the important stuff is in here.


TABLE OF CONTENTS:
------------------
 0.0 - GENERIC STYLES 
 1.0 - HEADER
 1.1 - HEADER NAVIGATION
 2.0 - SLIDER STYLING
 3.0 - PRESENTATION SECTION
 4.0 - FEATURES LIST
 5.0 - RECENT PROJECTS
 6.0 - CONTACT PAGE
 7.0 - FOOTER
 8.0 - STYLE SWITCHER
 9.0 - TOOLS
10.0 - MEDIA QUERIES


-----------------------------------------------------------------------------------*/

/************************************************************************************
0.0 GENERIC STYLES
************************************************************************************/
body {
    font:12px/24px Verdana, Arial, Tahoma, sans-serif;
	background:#2d2d2d url("../images/body-bg.jpg");
	background-repeat: no-repeat;
	background-position:center 0;
	background-attachment:fixed;
    text-align:left;
    color:#929292;
    height:100%;
    margin-top:31px;
}
#pagewrap {
	margin:0 auto;
	width:950px;
}
h2, h3 {
	margin:30px 0;
	font-family:Verdana,Arial,sans-serif;
	font-size: 18px;
	color:#fff;
}
h1, h2, h3, h4 {
	font-weight:normal;	
}
A  {
	color : #bef04a;
	text-decoration : none;
}

A:Visited  {
	color : #bef04a;
	text-decoration : none;
}

A:Active  {
	color : #bef04a;
	text-decoration : none;
}

A:Hover  {
	color : #FFF;
	text-decoration : none;
}
button,
.button {
    display:block;
    border:none;
    outline:none;
    height:35px;
    width:94px;
    text-indent:-99999px;
    background:url("../images/button-sprite.png") 0 top;
    -moz-transition: background .5s ease;
    -webkit-transition: background .5s ease;
    -ms-transition: background .5s ease;
    -o-transition: background .5s ease;
    transition: background .5s ease;
}
button:hover,
.button:hover {
    background-position:0 bottom;
}
button:active,
.button:active {
    position:relative;
	bottom:-1px;
	right:-1px;
}
.col {
    width:288px;
    margin-right:40px;
    float:left;
    padding-left:2px;
}
.colp {
    width:280px;
    margin-right:37px;
    float:left;
    padding-left:2px;
}

.col:nth-child(3n) {
    margin-right:0;
}
.colp:nth-child(3n) {
    margin-right:0;
}

.divider {
    width:100%;
    border-top:1px solid #161616;
    border-bottom:1px solid #454545;
    height:0;
}
.last {
margin-right:0px;
}


/************************************************************************************
1.0 HEADER
************************************************************************************/
#logo {height:120px;}

#logo h1 {
    text-indent:-9999px;
}
#logo h1 a {
    display:block;
    width:400px;
    height:87px;
    background:url("../images/logo.png") no-repeat;
}
#logo .logoholder {
	width:400px;
	float:left;
	height:87px;
}
.big{font-size:29px}

#logo .number{
	width:400px;
	float:right;
	height:80px;
	text-align:right;
	margin-top:24px;
	letter-spacing:-2px;
}
header form input {
    width:100%;
    border:none;
    outline:none;
    color:#666;
    font-size:11px;
    font-style:italic;
	background:#232323;
}
.obtuse {
	position:relative;
	top:-56px;
    left:694px;
	width:221px;
	padding:7px 10px;
	margin:0;
	background:#232323;
    border:7px solid #414141;
	-webkit-border-radius:7px;
	-moz-border-radius:7px;
	border-radius:7px;
}

/* creates the triangle */
.obtuse:before {
	content:"";
	position:absolute;
	bottom:-30px;
	left:30px;
	border-width:0 0 55px 30px;
	border-style:solid;
	border-color:transparent #414141;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
    -webkit-transform:rotate(17deg);
    -moz-transform:rotate(17deg);
    -o-transform:rotate(17deg);
    transform:rotate(17deg);
    z-index:-1;
}


/************************************************************************************
1.1 HEADER NAVIGATION
************************************************************************************/
nav {
	float:right;
	margin-top:10px;
	margin-bottom:40px;
}
nav ul, nav ul li {
	display:inline;
}
nav li a,
nav li a:visited {
    text-decoration:none;
    color:#929292;
    font-family:Verdana,Arial,sans-serif;
    font-size:14px;
    margin-left:30px;
    text-shadow:-1px -1px 0 #000;
}
nav li a.selected,
nav li a:hover {
    color:#fff;
}


/************************************************************************************
2.0 SLIDER STYLING
************************************************************************************/
/* The main rotator div */
#slider-wrap {
    position:relative;
    width:100%;
    height:318px;
    margin:70px 0 42px 0;
}
.rotator {
    background-color:#1c1c1c;
    width:950px;
    height:318px;
    margin:0 auto;
    position:absolute;
    font-family:'Myriad Pro',Arial,Helvetica,sans-serif;
    color:#fff;
    text-transform:uppercase;
    letter-spacing:-1px;
    border:1px solid #000;
    overflow:hidden;
    opacity:.4;
    -moz-box-shadow:0 0 1px #fff inset;
    -webkit-box-shadow:0 0 1px #fff inset;
    box-shadow:0 0 1px #fff inset;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    z-index:-2;
}
div.back-side {
    position:absolute;
    left:13px;
    top:1px;
    margin:0;
    padding-top:30px;
    width:60px;
    height:289px;
    background:rgba(255,255,255,.3);
    z-index:-3;
}
#rotmenu {
    position:absolute;
    left:25px;
    top:-17px;
    margin:0;
    padding-top:30px;
    width:249px;
    height:326px; /*356-30*/
    background:transparent url("../images/slider-nav-bg.png") 0 0;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
}
#left-top,
#left-bottom {
    position:absolute;
    width:16px;
    height:19px;
    z-index:-4;
}
#left-top {
    top:-18px;
    left:13px;
}
#left-bottom {
    top:320px;
    left:13px;
}
#rotmenu li {
    display:block;
    float:right;
    clear:both;
    width:247px;
    border-bottom:1px solid #d3d3d3;
    border-top:1px solid #ffffff;
    border-left:1px solid #ffffff;
    border-right:1px solid #c4c4c4;
    position:relative;
}
#rotmenu li:first-child { border-top:none; }
#rotmenu li:last-child { border-bottom:none; }

/* adding right arrow */
#rotmenu li.act:after {
    position:absolute;
    content:"";
    width:42px;
    height:64px;
    background:url("../images/r-arrow.png") no-repeat;
    bottom:1px;
    right:-42px;
	outline:none;
	border:none;
}

/* The link elements */
#rotmenu li a {
    display:block;
    width:247px;
    height:70px;
    float:left;
    clear:both;
    text-align:left;
    text-decoration:none;
    line-height:70px;
    margin:1px 0px 1px 0px;
    padding-left:60px;
    color:#444;
    font-size:14px;
    background:transparent url("../images/bullet.png") no-repeat 20px 50%;
    outline:none;
	border:none;
}
#rotmenu li a:hover {
    text-shadow:0 0 3px #fff;
	outline:none;
}

/* The content elements */
#rot1 { 
    position:relative;
    width:950px;
    height:318px;
    top:-4px;
    overflow:hidden;
    z-index:-1;
}
#rot1 img.bg {
    position:absolute;
    top:50%;
    right:0;
    margin-top:-139px;
    margin-right:20px;
    border:1px solid #000;
    width:648px;
    height:278px;
}
#rot1 .description {
    width:608px; /* img.bg - padding*2 */
    height:20px;
    position:absolute;
    bottom:19px;
    right:21px;
    padding:20px;
    background-color:none;
    opacity:.9;
    border-top:none;
}
#rot1 .description p {
    text-shadow:-1px 1px 1px #000;
    text-transform:none;
    letter-spacing:normal;
    line-height:20px;
    text-align:right;
    font-size:14px;
}
#rot1 .description span {
    color:#cadb2b;
    font-weight:bold;
}
a {
	outline:0;
	border:0;
}

/************************************************************************************
3.0 PRESENTATION SECTION
************************************************************************************/
#presentation {
/*    padding-bottom:20px;*/
    margin-bottom:40px;
	}
.present-info {
    float:left;
    width:580px;
	padding-left:24px;
}
#presentation .full-width {
    margin-bottom:-64px;
}
.present-info.full-width {
    width:926px;
    float:none;
}
.present-info h2 {
    margin-bottom:12px;
}
.present-info p {
    text-align:justify;
    padding-bottom:17px;
}
#presentation blockquote {
    width:280px;
    background:url("../images/quote-bg.png") no-repeat;
    padding:0 5px 0 15px;
    float:right;
    margin-left:16px;
	margin-right:20px;
    position:relative;
    top:34px;
    right:-10px;
}
#presentation blockquote p {
    width:255px;
}
#presentation blockquote h3 {
    color:#444;
    font-family:Verdana,Arial,sans-serif;
    font-size:18px;
    margin:15px 0;
}
#presentation blockquote cite {
    font-weight:bold;   
}

#presentation ul.green{
color:#cadb2b;
list-style:disc; }

#presentation img.about {
    border:8px solid #1d1d1d;
    -webkit-box-shadow:0 0 0 1px #393939;
    -moz-box-shadow:0 0 0 1px #393939;
    box-shadow:0 0 0 1px #393939;
    -webkit-border-radius:6px;
   -moz-border-radius:6px;
   border-radius:6px;
   opacity:1;
   -webkit-transition:opacity .6s ease-in-out;
   -moz-transition:opacity .6s ease-in-out;
   -ms-transition:opacity .6s ease-in-out;
   -o-transition:opacity .6s ease-in-out;
   transition:opacity .6s ease-in-out;
}



/************************************************************************************
4.0 FEATURES LIST
************************************************************************************/
#features {
    margin:45px 0 0;
    overflow:hidden;
    clear:both;
}
#features li {
    margin-bottom:35px;
}
#features .col img {
    float:left;
    margin:16px 14px 0 0;
}
#features .col p {
    margin-bottom:14px;
}


/************************************************************************************
5.0 RECENT PROJECTS
************************************************************************************/
#recent-projects {
    clear:both;
    overflow:hidden;
    margin-bottom:48px;
    padding-top:20px;
	padding-left:24px;
}
#recent-projects ul {
    margin:0;
    padding:0;
    list-style:none;
}
#recent-projects ul img {
    border:8px solid #1d1d1d;
    -webkit-box-shadow:0 0 0 1px #393939;
    -moz-box-shadow:0 0 0 1px #393939;
    box-shadow:0 0 0 1px #393939;
    -webkit-border-radius:6px;
   -moz-border-radius:6px;
   border-radius:6px;
   opacity:1;
   -webkit-transition:opacity .6s ease-in-out;
   -moz-transition:opacity .6s ease-in-out;
   -ms-transition:opacity .6s ease-in-out;
   -o-transition:opacity .6s ease-in-out;
   transition:opacity .6s ease-in-out;
}
#recent-projects img:hover {
    opacity:.7;
}
#recent-projects li {
    margin-bottom:35px;
}
#recent-projects li h4 {
    font-size:14px;
    color:#fff;
}
#recent-projects li p {
    color:#808080;
    line-height:18px;
}

/************************************************************************************
10.0 RECENT WORK
************************************************************************************/

#recent-work {
    clear:both;
    overflow:hidden;
    margin-bottom:10px;
    padding-top:20px;
	padding-left:24px;
}
#recent-work ul {
    margin:0;
    padding:0;
    list-style:none;
}
#recent-work ul img {
    border:8px solid #1d1d1d;
    -webkit-box-shadow:0 0 0 1px #393939;
    -moz-box-shadow:0 0 0 1px #393939;
    box-shadow:0 0 0 1px #393939;
    -webkit-border-radius:6px;
   -moz-border-radius:6px;
   border-radius:6px;
   opacity:1;
   -webkit-transition:opacity .6s ease-in-out;
   -moz-transition:opacity .6s ease-in-out;
   -ms-transition:opacity .6s ease-in-out;
   -o-transition:opacity .6s ease-in-out;
   transition:opacity .6s ease-in-out;
}
#recent-work ul a {
   -webkit-transition:opacity .6s ease-in-out;
   -moz-transition:opacity .6s ease-in-out;
   -ms-transition:opacity .6s ease-in-out;
   -o-transition:opacity .6s ease-in-out;
   transition:opacity .6s ease-in-out;
}
#recent-work img:hover {
    opacity:1;
}
#recent-work a:hover {
    opacity:.7;
}
#recent-work li {
    margin-bottom:35px;
}
#recent-work li h4 {
    font-size:14px;
    color:#fff;
}
#recent-work li p {
    color:#808080;
    line-height:18px;
}
#returntop{
width:250px;
text-align:right;
margin-bottom:10px;
padding-right:15px;
float:right;
}

#returns{
width:935px;
float:left;
}

#returnpage{
width:250px;
text-align:left;
margin-bottom:10px;
padding-left:27px;
float:left;
}


/************************************************************************************
6.0 CONTACT PAGE
*************************************************************************************/
/* Blockquote Box */
#contact-form blockquote {
    width:250px;
    background:url("../images/contactbox-bg.png") no-repeat;
    padding:0 5px 0 20px;
    float:right;
    position:relative;
    top:34px;
    right:0px;
	margin-bottom:15px;
}

#map {
    width:250px;
    background:url("../images/contactbox-bg.png") no-repeat;
    padding:0px;
    float:right;
    position:relative;
	top:34px;
    right:0px;
	margin-bottom:15px;
	margin-right:37px;
}



#contact-form blockquote p {
    width:255px;
    font-size:12px;
}
#contact-form blockquote h3 {
    color:#444;
    font-family:Verdana,Arial,sans-serif;
    font-size:18px;
    margin:15px 0 5px;
}

/* Contact Form */
#contact-form form {
    margin-bottom:35px;
    float:left;
    width:570px;
    padding-right:10px;
    position:relative;
    right:-15px;
    left:7px;
    top:34px;
}
#contact-form label {
	float:left; 
	clear:left;
	margin:12px 0 30px 0;
	width:95px;
	text-align:left;
	font-size:12px;
	color:#929292;
	padding-left:35px;
}
#contact-form input,
#contact-form textarea {
    font-family:sans-serif;
	font-size:12px;
	color:#f2f2f2;
	text-shadow:0px -1px 0px #334f71;
    float:right;
    clear:right;
    border:none;
    outline:none;
    overflow:auto;
    resize:none;
	width:400px;
    margin:0 0 30px 0;
	background:#232323;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	-moz-box-shadow:0px 0px 6px #202020 inset, 2px 2px 0 #373737;
	-webkit-box-shadow:0px 0px 6px #202020 inset, 2px 2px 0 #373737;
	box-shadow:0px 0px 6px #202020 inset, 2px 2px 0 #373737;
}
#contact-form input {
	height:37px;
	padding:5px 20px 0px 20px;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color:#676767;
    text-shadow:0px -1px 0px #38506b;
}
input:-moz-placeholder,
textarea:-moz-placeholder {
    color:#474747;
    text-shadow:0px -1px 0px #38506b;
}
#contact-form textarea {
	height:295px;
	padding:12px 20px 0px 20px;
}	
#contact-form input:focus,
#contact-form textarea:focus {
    background:#3c3c3c;
    outline:none;
    -moz-box-shadow:0px 0px 6px #000 inset;
	-webkit-box-shadow:0px 0px 6px #000 inset;
	box-shadow:0px 0px 6px #000 inset;
}
#contact-form input[type=submit] {
    float:right;
    border:none;
    outline:none;
    height:35px;
    width:94px;
    text-indent:-99999px;
    background:url("../images/send-sprite.png") 0 top;
    -moz-transition: background .5s ease;
    -webkit-transition: background .5s ease;
    -ms-transition: background .5s ease;
    -o-transition: background .5s ease;
    transition: background .5s ease;
}
#contact-form input[type=submit]:hover {
    background-position:0 bottom;
}
#contact-form input[type=submit]:active {
    position:relative;
	bottom:-1px;
	right:-1px;
}


/************************************************************************************
7.0 FOOTER
************************************************************************************/
footer {
    clear:both;
    background-color:#171717;
    background:rgba(0,0,0,.5);
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    overflow:hidden;
    padding:17px;
    margin-bottom:125px;
    margin-top:25px;
}
footer p {
    color:#757575;
    font-size:11px;
    float:right;
}
footer p.copy {
    float:left;
}

/************************************************************************************
8.0 STYLE SWITCHER
************************************************************************************/
#style-switcher {
    list-style:none;
    position:fixed;
    z-index:1;
    left:-25px;
    top:220px;
    width:64px;
    padding:8px 10px;
    border:3px solid #fff;
    border-left:none;
    -moz-border-radius:0 10px 10px 0;
    -webkit-border-radius:0 10px 10px 0;
    border-radius:0 10px 10px 0;
    -moz-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
    -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, .6);
    box-shadow: 0 0 7px rgba(0, 0, 0, .6);
    background:#fff url(../images/expand-icon.png) no-repeat right center;
    left:-80px;
    -moz-transition:left .5s ease-in-out;
    -webkit-transition:left .5s ease-in-out;
    -ms-transition:left .5s ease-in-out;
    -o-transition:left .5s ease-in-out;
    transition:left .5s ease-in-out;
}
#style-switcher:hover {
    left:-25px;
}
.statusMessage {
    color:#666;
    background-color:#ebedf2;
    background:-webkit-gradient( linear, left bottom, left top, color-stop(0,#dfe1e5), color-stop(1, #ebedf2) );
    background:-moz-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
    background:-o-linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
    background:linear-gradient( center bottom, #dfe1e5 0%, #ebedf2 100% );  
    border:1px solid #aaa;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;  
    border-radius:10px;
    -moz-box-shadow:0 0 1em rgba(0, 0, 0, .5);
    -webkit-box-shadow:0 0 1em rgba(0, 0, 0, .5);
    box-shadow:0 0 1em rgba(0, 0, 0, .5);
    opacity:.95;
}

/* Dimensions and position of the status messages */
.statusMessage {
    display:none;
    margin:auto;
    width:40em;
    height:2em;
    padding:1.5em;
    position:fixed;
    top:0;
    bottom:0;
    left:0;
    right:0;
}
.statusMessage p {
    text-align:center;
    margin:0;
    padding:0;
}


/************************************************************************************
9.0 TOOLS
************************************************************************************/
.ir { display: block; text-indent: -999em; overflow: hidden; background-repeat: no-repeat; text-align: left; direction: ltr; }
.hidden { display: none; visibility: hidden; }
.visuallyhidden { border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; }
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { clip: auto; height: auto; margin: 0; overflow: visible; position: static; width: auto; }
.invisible { visibility: hidden; }
.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; overflow: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }


/************************************************************************************
10.0 MEDIA QUERIES
************************************************************************************/
@media all and (orientation:portrait) {

}

@media all and (orientation:landscape) {

}

@media screen and (max-device-width: 480px) {

  /* html { -webkit-text-size-adjust:none; -ms-text-size-adjust:none; } */
}

@media print {
  * { background: transparent !important; color: black !important; text-shadow: none !important; filter:none !important;
  -ms-filter: none !important; } 
  a, a:visited { color: #444 !important; text-decoration: underline; }
  a[href]:after { content: " (" attr(href) ")"; outline:none;  }
  abbr[title]:after { content: " (" attr(title) ")";  outline:none;}
  .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after { content: "";  }  
  pre, blockquote { border: 1px solid #999; page-break-inside: avoid; }
  thead { display: table-header-group; }
  tr, img { page-break-inside: avoid; }
  @page { margin: 0.5cm; }
  p, h2, h3 { orphans: 3; widows: 3; }
  h2, h3{ page-break-after: avoid; }
}