/* -------------------------------------------------------------- 
  
  CREATIVE SUMMER UNI
  
   
-------------------------------------------------------------- */

@import 'src/reset.css';

/* -------------------------------------------------------------- 
  
  =TEXT FORMATTING COLOUR
    
-------------------------------------------------------------- */



/* -------------------------------------------------------------- 
  
  =GENERIC RULES
   
-------------------------------------------------------------- */


body { font-size: 62.5%; color: #000; background:#FFF; font-family:Georgia, "Times New Roman", Times, serif;}

p {font-size:1.2em; line-height:1.3em; padding-bottom:1.2em; color:#262626; word-spacing:-0.1em;}

a {color:#595959; text-decoration:underline}

a:hover { color:#595959;}


/* -------------------------------------------------------------- 
  
  =STRUCTURE RULES
   
-------------------------------------------------------------- */

#menu_top { position: fixed; top:0; width:100%; margin:28px 0px 0px 34px; z-index:99 !important; display:none;}


.content {position:absolute; left:34px; top:130px; padding-bottom:10px; padding-right:34px;}

.static-content {position:absolute; left:34px; top:130px; }


/* -------------------------------------------------------------- 
  
  =HOMEPAGE
   
-------------------------------------------------------------- */


#container {display: block; position: absolute; min-height: 100%; left:34px;}
#content {display: block; margin-bottom:510px; margin-top:90px;}
#introcopy {width:400px;}
#footer {position: absolute; bottom: 0; display: block; width:2400px; height:500px; background:url(../img/M.jpg) 0 0 no-repeat; }








#introcopy h3 {font-size:20px; line-height:21px;  }

h3.intro{ display:block; width:350px; height:100px; text-indent:-3333px; margin:0; padding:0;}

#words{ width:350px; height:100px; background:url(../img/intro.gif) 0 0 no-repeat; margin:0; padding:0; position:fixed; top:130px; z-index:1;}





/* -------------------------------------------------------------- 
  
  =IMAGE RULES FOR JQUERY ROLLOVERS
   
-------------------------------------------------------------- */


.image-holder {float:left; position:relative; }

.information {position:absolute; bottom:0; left:0; width:35px; height:35px; text-indent:-3333px; }

.information a {display:block; width:35px; height:35px; background:url(../img/info_corner.gif) 0 0 no-repeat; }


/*   =SHOW INFORMATION BOX RULES */


.info-copy {position:absolute; top:0; left:0; width:400px; height:398px; }

.info-copy .col-one, .info-copy .col-two {float:left; width:240px; padding-top:10px; }

.info-copy .col-one p, .info-copy .col-two p {padding:0 10px 10px 10px ; }

.info-copy .col-one p em, .info-copy .col-two p em {font-style:italic;}

.info-copy .col-one p.head, .info-copy .col-two p.head {padding-bottom:0; margin-bottom:0; }

.static-img {float:left; margin-right:10px; }

.info-copy a {padding-top:10px; }

.info-copy a:hover {color:#595959; }

/* -------------------------------------------------------------- 
  
  =NEWS
   
-------------------------------------------------------------- */


.news-copy {float:left; width:400px; height:398px; background-color:#E6E6E6; margin-right:10px;}

.news-copy .col-one, .news-copy .col-two {float:left; width:240px; }

.news-copy .col-one p, .news-copy .col-two p {padding:0 10px 10px 10px ; }

.news-copy .col-one p em, .news-copy .col-two p em {font-style:italic;}

.news-copy .col-one p.head, .news-copy .col-two p.head {padding-top:10px; padding-bottom:0; margin-bottom:0; }


/* -------------------------------------------------------------- 
  
  =CLIENTS
   
-------------------------------------------------------------- */

.clients-head {float:left; width:235px; margin-right:15px;}

.clients {float:left; position: relative; width:480px; }

.clients-m {position:absolute; right:0; bottom:-70px; width:269px; height:315px; background:url(../img/clients_M.jpg) 0 0 no-repeat; }

.cl-menu {margin: 0;padding: 0;list-style: none;}

.cl-menu li {margin: 0; padding: 0;}

.cl-menu li {font-size:1.2em; line-height:1.3em;}


/* -------------------------------------------------------------- 
  
  =ABOUT US
   
-------------------------------------------------------------- */

.about {float:left; width:235px; margin-right:15px; padding-bottom:15px;}


.about-badge {background:url(../img/M_badge.jpg) 410px 370px no-repeat; }





/* -------------------------------------------------------------- 
  
  =NEXT PROJECT DEVIDER
   
-------------------------------------------------------------- */

.next-pro {float:left; width:235px; margin-right:10px; text-align:right; padding-top:10px;}

.next-pro p em {font-style:italic; }


/* -------------------------------------------------------------- 
  
  =CONTACT
   
-------------------------------------------------------------- */


.cont {float:left; width:235px; margin-right:10px; }

.cont-b {width:235px;}

/* -------------------------------------------------------------- 
  
  =MAP
   
-------------------------------------------------------------- */

.map-top {width:735px; padding-bottom:35px; }

.map-bot {width:735px;}

.map-col {float:left; width:485px; }

.map-holder {position:relative; }

.map-info {position:absolute; bottom:0; left:0; width:35px; height:35px; text-indent:-3333px; }

.map-info a {display:block; width:36px; height:36px; background:url(../img/info_map_corner.gif) 0 0 no-repeat; }

.big-map {position:absolute; top:0; left:0; width:480px; height:500px; background:url(../img/Map_Zoomed.gif) 0 0 no-repeat; display:none;}



/* -------------------------------------------------------------- 
  
  =MAP
   
-------------------------------------------------------------- */


#moving-flash {float:left; width:485px; height:398px; background-color:#E6E6E6;}


.information3 {position:absolute; bottom:0; left:0; width:35px; height:35px; text-indent:-3333px; }

.information3 a {display:block; width:35px; height:35px; background:url(../img/info_corner.gif) 0 0 no-repeat; }


/*   =SHOW INFORMATION BOX RULES */


.info-copy3 {position:absolute; top:0; left:0; width:400px; height:398px; background:url(../img/trans_white.png);}

.info-copy3 .col-one, .info-copy .col-two {float:left; width:240px; padding-top:10px; }

.info-copy3 .col-one p, .info-copy .col-two p {padding:0 10px 10px 10px ; }

.info-copy3 .col-one p em, .info-copy .col-two p em {font-style:italic;}

.info-copy3 .col-one p.head, .info-copy .col-two p.head {padding-bottom:0; margin-bottom:0; }

.info-copy3 a {padding-top:10px; }

.info-copy3 a:hover {color:#595959; }



/* -------------------------------------------------------------- 
  
  =TWITTER
   
-------------------------------------------------------------- */


a.twitter {float: right; display: block; height:24px; background:url(../img/twitter.gif) right 0; background-repeat: no-repeat; line-height: 24px; color: #000; text-decoration: none; padding-right: 35px; font-size: 12px; margin-right: 69px; }




/* Misc classes and elements
-------------------------------------------------------------- */

a {outline:none; }

/* In case you need to add a gutter above/below an element */
.prepend-top { 
	margin-top:1.5em; 
}
.append-bottom { 
	margin-bottom:1.5em; 
}


/* Clearing floats without extra markup
   Based on How To Clear Floats Without Structural Markup by PiE
   [http://www.positioniseverything.net/easyclearing.html] */

.clearfix:after, .container:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
.clearfix, .container {display: block;}

/* Regular clearing
   apply to column that should drop below previous ones. */

.clear { clear:both; }