/* CSS Document */

body {
    background-image:url(images/bg.gif);
    background-repeat:repeat-x;
	background-attachment:fixed; 
	text-align:center;
	margin-top:-5px;
    /*overflow-x:hidden;/*disable horizontal scrolling of main browser window*/
	
}

#wrapper {
    position:relative;
	background-color:#FFF;
	width:790px;
	left:200px;/*prevent main column overlapping navi*/
	margin:5px;
	text-align:left;
}

/*OPEN RULES FOR LEFT COLUMN*/

#left-column {
    position:fixed;
	top:0px; 
	left:0px;
    float:left;
	background-color:#FFF;
	width:205px;
}

.left-column-divider-top {
    float:left;
    width:205px;
	height:30px;
	margin-top:10px;
    background-image:url(images/left-column-divider.gif);
	background-repeat:no-repeat;
}


.left-column-divider {
    float:left;
    width:205px;
	height:30px;
    background-image:url(images/left-column-divider.gif);
	background-repeat:no-repeat;
}

#left-column-logo {
    float:left;
	background-image:url(images/magic-element-logo.gif);
    background-repeat:no-repeat;
	width:205px;
	height:57px;
}

#main-navi {
    float:left;
    width:205px;
    padding-top:3px;
}

ul li {
	padding:2px;
	text-align:right;
	padding-right:12px;
}

ul li a {
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	text-decoration:none;
}

ul li a:hover {
	background-color:#FFF;
	color:#01c0dc;
}

/*open footer text*/

#footer {
    float:left;
	width:205px;
}

.subfooter {
    clear:both;
	width:205px;
}

.footertext {
   font-family:Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
   line-height:1.3em;
   color:#77787b;
   padding-left:10px;
   padding-top:4px;
   padding-right:10px;
   text-align:right;
}

.footerlink {
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:10px;
	line-height:1.4em;
	padding-bottom:8px;
}

.footerlink a {
    color: #77787b; 
	text-decoration:none;
}

.footerlink a:hover {
    color: #01c0dc;
	text-decoration:none;
	background-color:#FFF;
}
/*close footer text*/

#lower-left {
    clear:both;
	width:205px;
	height:650px;
	background-color:#FFF; 
}

#social-media {                   /*start rules for social media links*/
    clear:both;
	width:205px;
	height:30px;
	background-color:#FFF; 
}

.facebook-link {
   float:left;
   display:inline;
   margin-left:40px;
   width:32px;
   height:30px;
}

a:link.sprite2, a:visited.sprite2{
   float:left;
   background:url(images/facebook.gif) no-repeat top left;
   background-position:0px -30px;
   width:32px;
   height:30px;
}
 
a:hover.sprite2{
   background-position:0px 0px;
}

.flickr-link {
   float:left;
   display:inline;
   margin-left:50px;
   width:62px;
   height:30px;
}

a:link.sprite3, a:visited.sprite3{
   float:left;
   background:url(images/flickr.gif) no-repeat top left;
   background-position:0px -30px;
   width:62px;
   height:30px;
}
 
a:hover.sprite3{
   background-position:0px 0px;
}                                     /*end rules for social media links*/


/*CLOSE RULES FOR LEFT COLUMN*/


/*OPEN RULES FOR MAIN COLUMN*/

#main-column {
    float:left;
	background-color:#FFF;
	width:790px;
	text-align:left;
    overflow:auto;
}


.main-column-divider-top {
    float:left;
    width:774px;
	height:30px;
	margin-top:10px;
	background-color:#FFF;
    background-image:url(images/main-column-divider.gif);
	background-repeat:no-repeat;
}

.page-title-container {
    float:left;
	height:15px;
	width:500px;
	margin-left:12px;
	margin-top:17px;
	margin-bottom:6px;
}

.page-title {
    float:left;
	width:auto;
	color:#77787b;
	display:inline;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
}

.page-title-underscore {
    clear:both;
	text-align:center;
	width:750px;
	height:4px;
	margin-left:10px;
	padding-top:3px;
    border-bottom:1px solid #bbb;
	margin-bottom:10px;
}

.scroll-down-arrow {
    float:right;
	height:12px;
	width:16px;
	background-image:url(images/scroll-down-arrow.gif);
	background-repeat:no-repeat;
	margin-right:30px;
	margin-top:19px;
	margin-bottom:4px;
}


.main-column-divider {
    float:left;
    width:774px;
	height:30px;
	margin-bottom:15px;
	background-color:#FFF;
    background-image:url(images/main-column-divider.gif);
	background-repeat:no-repeat;
}


.single-content-holder {
    float:left;
	width:760px;
	height:1218px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-holder-button-heads-world-cup-2010 {
    float:left;
	width:760px;
	height:386px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-holder-button-heads-egg-heads {
    float:left;
	width:760px;
	height:196px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-next-lfw-taxis-2009 {
    float:left;
	width:760px;
	height:731px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-gallant-air-conditioning {
    float:left;
	width:760px;
	height:1087px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-next-retail {
    float:left;
	width:760px;
	height:475px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-next-next-tv {
    float:left;
	width:760px;
	height:757px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-next-editorial {
    float:left;
	width:760px;
	height:1975px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-next-transactional {
    float:left;
	width:760px;
	height:1714px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-next-london-2012 {
    float:left;
	width:760px;
	height:475px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-samsung-ac {
    float:left;
	width:760px;
	height:904px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-samsung-crm {
    float:left;
	width:760px;
	height:786px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-joy {
    float:left;
	width:760px;
	height:943px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-samsung-vent-axia {
    float:left;
	width:760px;
	height:706px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-akshobya {
    float:left;
	width:760px;
	height:919px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-nct {
    float:left;
	width:760px;
	height:640px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-nct-photos {
    float:left;
	width:760px;
	height:454px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-mitsubishi-m {
    float:left;
	width:760px;
	height:832px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-roboteers {
    float:left;
	width:760px;
	height:958px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-roboteers-2 {
    float:left;
	width:760px;
	height:774px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-scary-mary-media {
    float:left;
	width:760px;
	height:1085px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-dean-wood-cube {
    float:left;
	width:760px;
	height:644px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-retail-interior {
    float:left;
	width:760px;
	height:516px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.space-doll{
    float:left;
	width:760px;
	height:1153px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-wonderful-world {
    float:left;
	width:760px;
	height:751px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-unlikelys {
    float:left;
	width:760px;
	height:798px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-bug-bods {
    float:left;
	width:760px;
	height:820px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.single-content-tonbo {
    float:left;
	width:760px;
	height:957px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}


.content-description {
    float:left;
	width:759px;
	margin-left:7px;
	margin-bottom:15px;
}


.title {
    float:left;
	width:auto;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	margin-left:4px;
	margin-top:2px;
}

.title-full-width {
    float:left;
	width:700px;
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	margin-left:4px;
	margin-top:2px;
}


.year {
    float:right;
	width:auto;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:12px;
	font-weight:bold;
	margin-top:2px;
	margin-right:4px;
}


.title-underscore {
    clear:both;
	text-align:center;
	width:750px;
	height:4px;
	margin-left:5px;
	padding-top:3px;
    border-bottom:1px solid #bbb;
}


.specs-bold {
    clear:both;
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin-left:4px;
	padding-top:6px;
}

.specs {
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	margin-left:4px;
	padding-top:6px;
}

.content-information {
    clear:both;
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	line-height:1.4em;
	font-weight:100;
	margin-left:4px;
}

.contact-details {
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	margin-left:10px;
	padding-top:6px;
}

.contact-details-link {
	text-align:left;
	margin-left:10px;
	padding-top:6px;
}

.contact-details-link a {
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	text-decoration:none;
}

.contact-details-link a:hover {
	background-color:#FFF;
	color:#01c0dc;
	text-decoration:none;
}



.launch-website-link {
   float:left;
   text-align:left;
   width:500px;
   margin-left:10px;
   margin-bottom:9px;
}

.launch-website-link a {
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	text-decoration:none;
}

.launch-website-link a:hover {
	background-color:#FFF;
	color:#01c0dc;
	text-decoration:none;
}


/*open specific rules for index page*/

#home-left-column {
    float:left;
	background-color:#FFF;
	width:205px;
	height:1000px;
}

#home-main-column {
    float:left;
	background-color:#FFF;
	width:790px;
	text-align:left;
}

.p {
    clear:both;
	text-align:left;
	width:750px;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	line-height:1.4em;
	margin-left:4px;
	padding-top:7px;
}

.p-index{
    float:left;
	text-align:justify;
	width:362px;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	line-height:1.4em;
	margin-left:4px;
	padding-top:7px;
}
.p-index-right{
    float:left;
	text-align:justify;
	width:362px;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	line-height:1.4em;
	margin-left:15px;
	padding-top:7px;
}

.p-view-project-bracket {
    clear:both;
	text-align:left;
	width:750px;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	line-height:1.4em;
	margin-left:0px;
	padding-top:7px;
}

.home-content-description {
    float:left;
	width:759px;
	margin-left:8px;
	margin-bottom:5px;
}

.home-main-column-divider {
    float:left;
    width:774px;
	height:30px;
	margin-bottom:7px;
	background-color:#FFF;
    background-image:url(images/main-column-divider.gif);
	background-repeat:no-repeat;
}

.home-single-content-holder {
    float:left;
	width:760px;
	height:265px;
	margin-left:7px;
	text-align:center;
	background-color:#FFF;
}

.home-single-content-holder-small-left {
    float:left;
	width:256px;
	height:176px;
	text-align:center;
	background-color:#FFF;
}

.home-single-content-holder-small-center {
    float:left;
	width:257px;
	height:176px;
	text-align:center;
	background-color:#FFF;
}

.home-single-content-holder-small-right {
    float:left;
	width:257px;
	height:176px;
	text-align:center;
	background-color:#FFF;
}

.view-project-link {
   float:left;
   text-align:left;
   width:205px;
   margin-left:5px;
}

.view-project-link a {
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	text-decoration:none;
}

.view-project-link a:hover {
	background-color:#FFF;
	color:#01c0dc;
	text-decoration:none;
}

.title-underscore-short {
    clear:both;
	text-align:center;
	width:239px;
	height:4px;
	margin-left:2px;
	padding-top:3px;
    border-bottom:1px solid #bbb;
}

.home-content-description-short-left {
    float:left;
	width:235px;
	margin-left:6px;
	margin-bottom:15px;
	
}

.home-content-description-short-center {
    float:left;
	width:235px;
	margin-left:22px;
	margin-bottom:15px;
}

.home-content-description-short-right {
    float:left;
	width:235px;
	margin-left:22px;
	margin-bottom:15px;
}

/*close specific rules for index page*/


/*open specific rules for graphic and web design page*/

#nct-flash-player-container {
   float:left;
   width:452px;
   height:617px;
   margin-left:5px;
   margin-top:4px;
   border:1px solid #bbb;
}

#nct-thumbnails {
   float:left;
   width:286px;
   height:628px;
   margin-left:10px;
}



/*close specific rules for graphic and web design page*/


#contact-main-column {
    float:left;
	background-color:#FFF;
	width:790px;
	height:500px;
	text-align:center;
}


/*open specific rules for information page*/

.services-bold {
    clear:both;
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:bold;
	margin-left:4px;
	margin-top:12px;
	padding-top:6px;
}

.client-lists {
    float:left;
	display:block;
	width:175px;
	margin-top:15px;
	margin-left:5px;
}

.clients {
	text-align:left;
	color:#77787b;
	font-family:Verdana, Arial, Helvetica, sans-serif;
	font-size:11px;
	font-weight:100;
	line-height:1.4em;
	margin-left:4px;
	padding-top:0px;
}

/*close specific rules for information page*/



/*open specific styles for 'MeTime' page*/

#me-time-main-column {
    float:left;
	background-color:#FFF;
	width:790px;
	text-align:center;
}

#photo-blog {
   width:760px;
   height:580px;
   margin-top:35px;
   margin-left:7px;
   padding-top:17px;
   background-image:url(images/photo-blog-backgrond.jpg);
   background-repeat:no-repeat;
}

.photo-blog-text {
    float:left;
	width:759px;
	margin-top:1px;
	margin-left:8px;
	margin-bottom:20px;
}

#facebook-connect {
   width:760px;
   height:555px;
   margin-left:12px;
}

/*open specific styles for 'MeTime' page*/


/*CLOSE RULES FOR MAIN COLUMN*/