/****************************************

       __             ___             
      /\ \__         /\_ \            
  ____\ \ ,_\  __  __\//\ \      __   
 /',__\\ \ \/ /\ \/\ \ \ \ \   /'__`\ 
/\__, `\\ \ \_\ \ \_\ \ \_\ \_/\  __/ 
\/\____/ \ \__\\/`____ \/\____\ \____\
 \/___/   \/__/ `/___/> \/____/\/____/
                   /\___/             
                   \/_*/
               
                   
                   
@import url("resets.css");

/*@font-face { font-family: "Titillium"; src: url(fonts/Titillium001.otf); }
@font-face { font-family: "Titillium"; src: url(fonts/Titillium002.otf); }
@font-face { font-family: "Titillium"; src: url(fonts/Titillium003.otf); }
@font-face { font-family: "Titillium"; src: url(fonts/Titillium004.otf); }
@font-face { font-family: "Titillium"; src: url(fonts/Titillium.otf); }*/
@font-face { font-family: "Titillium"; src: url(fonts/TitilliumDisplay.otf); }

/* Titillium Open Source Font  http://typedia.com/explore/typeface/titillium  */


body {
background-color: #0e0f11;
font-family:"Lucida Grande", Tahoma, Arial, sans-serif;
font-weight: normal;
font-size: 14px;
/* background-image: url("/images/template/wow.jpg"); */
}


h1 {
font-family:"Titillium", Titillium, Arial, sans-serif;
}

h2, h3, h4, h5, h6 {
font-family: "Lucida Grande", Arial, Verdana, sans-serif;
font-weight: bold;
}

h1 { font-size: 1.8em; }
h2 { font-size: 1.0em; }
h3 { font-size: 1.2em; }
h4 { font-size: 1.0em; }

a { text-decoration: none; border: none; color: #3678ff;}

p { margin: 0 0 20px 0; }
img { border: none; }




/**********************

  G L O B A L

**********************/

.page_wrapper { width: 940px; margin: 0 auto 0 auto;}

.container { padding: 10px; background: #FFF; margin-bottom: 20px;}

.clear { clear: both; }

.fixed { position: fixed; }

.one {
	width:75px;
}
.two {
	width:150px;
}
.three {
	width:225px;
}
.four {
	width:300px;
}
.five {
	width:375px;
}
.six {
	width:450px;
}
.seven {
	width:525px;
}
.eight {
	width:600px;
}
.nine {
	width:675px;
}
.ten {
	width:750px;
}
.eleven {
	width:825px;
}

#header {
width: 100%;
margin-bottom: 40px;
padding: 20px 0 20px 0;
position: fixed; 
background-color: #222;
z-index: 100;
}


#logo {
float: left;
width: 173px;

color: #FFF;
text-decoration: none;
font-size: 10px;
line-height: 14px;
}

#logo p {
margin: 20px 0 0 0;
}

#menu {
float: right;
margin: 15px 0 0 0;
width: 580px;
}

#menu ul li {
float: left;
margin: 0 20px 0 0;
width: 100px;

color: #FFF;
text-decoration: none;
font-size: 12px;
line-height:14px;
}

#menu ul li:last-child {
margin: 0;
}

#header #nav_container {
height: 50px;
overflow: hidden;
}


#menu ul li a {
color: #CCC;
text-decoration: none;
font-size: 12px;
/* padding: 5px 15px 5px 15px; */
margin: 0px 0 10px 0;
display: block;
text-align: left;
padding: 0 0 5px 0;
border-bottom: 1px solid #333; 
}

#menu li.master ul {
	margin-top:15px;
}

#menu ul li ul {
opacity: .5;
}

#menu ul li:hover ul {
opacity: 1;
}

#menu ul li:hover a {
border-bottom: 1px solid #FFF;

}

#menu ul li:hover ul li a {
border: none;
}

#menu ul li ul li a{
font-family: "Verdana", Arial, Sans-serif;
font-size: 10px;
color: #FFF;

margin: 0px 0 5px 0;

background: none;
padding: 2px;
border: none;
}

#menu ul li ul li p {
font-family: "Verdana", Arial, Sans-serif;
font-size: 10px;
color: #FFF;
line-height: 13px;
}

#menu ul li ul li a:hover {
background: none;
color:#44d682;
}

#menu ul li a:hover {
color: #FFF;
border-color: #FFF;
}

#menu ul li a.no_border {
border: none;
}

#menu_close {
width: 940px;
height: 20px;
display: none;

font-size: 10px;
color: #CCC;
margin: 0px 0 0 0;

text-align: right;
}

#menu_close p{
cursor: pointer;
}

#menu h1.header {
	font-family:'Lucida Grande', Verdana, Arial; font-weight:normal; color:rgb(204, 204, 204); display: inline; font-size: 12px;
}

address {
	margin-top:20px;
}

address a {
font-style: normal;
}

#header a {
color: #999;
}

#footer {
	margin: 40px 0 40px 0;
	padding: 20px 0 0 0;
	color: #FFF;
	font-size:10px;
	border-top:1px solid #333;
}
#footer.portfolio {
	width:980px; margin-left:auto; margin-right:auto;
}



/**********************

  F R O N T  P A G E

**********************/



#stage {
width: 960px;
margin: 0 0 40px 0;
}

#stage h3 {
font-size: 4em;
font-family: "TitilliumDisplay";
text-transform: uppercase;
color: #FFF;
}

#stage h3 em {
color: #666;
}

#front_boxes_container {
padding: 120px 0 0 0;
width: 960px;
}

#front_boxes_container ul li {
float: left;
width: 220px;
height: 220px;
margin: 0 20px 20px 0;
background-color: #fefff0;
overflow: hidden;
opacity:0;
}

#front_boxes_container a h2 {
font-size: 1.6em;
text-transform: capitalize;
color: #222;
text-decoration: none;
border: none;
}

#front_boxes_container a:hover h2 {
color: #000;
text-decoration: none;
}


#front_boxes_container #four_square {
background: #000;
padding: 0;
width: 440px;
height: 440px;
}

a li .box_top p{
color: #000;
}



li#nobg p {
color: #FFF;
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: .8em;
line-height: 1.5em;
}

.box_top {
height: 150px;
padding: 10px;
}

.box_top img{
margin: 0 0 10px 0;
}

.box_top p{
font-family: "Lucida Grande", Verdana, sans-serif;
font-size: .8em;
}

.box_top a p {
color: #000;
}


.box_bottom {
width: 100px;
height: 20px;
padding: 5px 5px 5px 10px;
background-color: #fdffde;
float: left;

opacity: 1;

font-family: "Verdana", Verdana, sans-serif;
font-size: 10px;
text-transform: uppercase;

display: none;
position: absolute;

color: #000;
}

/*#front_boxes_container a:hover .box_bottom {
display: block;
}*/



/**********************

 W O R K  P A G E S

**********************/



#work_detail_container {
width: 940px;
padding: 120px 0 0 0;
background-color: #FFF;
}

#work_detail_container h1 {
margin: 0 0 20px 0;
font-size: 4em;
}

#work_detail_container img {
margin: 0 0 0px 0;
}

#work_detail_container small {
font-size: .8em;
}

#work_detail_container p {
font-size: .8em;
line-height: 1.75em;
}

.entry_body {
width: auto;
background-color: #FFF;
}


#work_text {
margin: 0 0 20px 0;
width: 940px;
background-color: #FFF;
}

#work_text_head {
float: left;
margin: 0 20px 0 0;
}

#work_text_head p {
	margin-bottom:0px;
}

#work_text_body {
float: right;
width: 580px;
}

#work_text_body p {
	margin-bottom:12px;
}

.work_image {
width: 940px;
}

.work_caption_left {
float: left;
clear: both;
width: 310px;
border-top: 1px solid #CCC;
padding: 20px 0 0 0;
margin: 10px 0 0 0;
}

.work_caption_center {
float: left;
clear: both;
width: 310px;
margin: 10px 0 0 310px;
border-top: 1px solid #CCC;
padding: 20px 0 0 0;
}

.work_caption_right {
float: left;
clear: both;
width: 310px;
margin: 10px 0 0 620px;
border-top: 1px solid #CCC;
padding: 20px 0 0 0;
}


.work_caption_double {
float: left;
clear: both;
width: 620px;
margin: 10px 0 0 0px;
border-top: 1px solid #CCC;
padding: 20px 0 0 0;
}

h4 {
font-family: "Lucida Grande", Arial, Verdana, sans-serif;
font-weight: bold;
margin: 0 0 10px 0;
}






/**********************

  B L O G  P A G E S

**********************/



.blog_detail_container {
width: 680px;
background-color: #FFF;
float: right;
padding: 20px;
margin: 0 0 30px 0;
}

.blog_detail_container h2 {
font-size: 2em;
}

.blog_detail_container p {
font-size: .8em;
color: #232323;
}

.blog_detail_container small {
font-size: .6em;
}

.blog_detail_container small a {
color: #666;
}

.blog_head {
margin: 0 0 20px 0;
clear: both;
}

.image_left {
float: left;
margin: 0 20px 20px 0;
}



/**********************

 A B O U T   P A G E S

**********************/


.about_container {
width: 320px;
height: 320px;
margin: 0 0 0 0;
background-color: #FFF;
float: left;
overflow: hidden;
}

.about_text_container h2 {
font-size: 1.5em;
}

.about_text_container {
padding: 10px;
font-size:.8em;
}



/************************************************

 P O R T F O L I O    -    A R T I C L E

************************************************/

div#article .floater {
	float:left; margin-right:20px; margin-top:15px; margin-bottom:25px;
}
div#article .last {
	margin-right:0px;
}
div#article .spacer {
	height:20px; min-height:20px; clear:both;
}

div#article .caption {
	border-top: 1px solid #CCC;
	padding: 20px 0 0 0;
	margin: 10px 0 0 0;
}
div#article .caption h4 {
	margin-top:0px; padding-top:0px;
}
div.browser_frame {
	width:620px; background-image:url('/images/browser_frame_620.jpg'); height:500px; padding-left:17px; padding-top:37px; background-repeat:no-repeat;
}
div.browser_frame iframe {
	width:586px; height:440px; overflow-x: hidden;
}

div.browser_frame.tall {
	background-image:url('/images/browser_frame_tall_620.jpg'); height:560px;
}
div.browser_frame.tall iframe {
	width:586px; height:498px; overflow-x: hidden;
}


li.dimmer {
	opacity:.3 !important;
}


.scrollme {
width: 100px;
height: 100px;
float: left;
background-color: #CCC;
margin-right: -110px;
}

#mit_editor {
	border:4px solid #CCC; width:920px;
}