/*----------------------------------------------------------------
BONDYBONDY.COM
Main CSS doc for screen styles
----------------------------------------------------------------*/

/*Body styles - Defines the default styling for text - font, size and colour.
(Size defined as 62.5% - because almost all browsers use 16 pixels as their 
default text size therefore this makes my default 1 em = 10 pixels making for
easier calculations.)
Centralises the layout (min-width style is part of the horizontal centering
fix and corrects a bug in old Mozilla versions - see Wrapper div notes below).
----------------------------------------------*/
  body {
    text-align: center;
	min-width: 1020px;
    font-family: georgia, "Times New Roman", Times, serif;
	font-size: 62.5%;
	line-height: 2em;
	background: #34323C url(../graphics/bg-tile_strip.gif) top center repeat-y;
	}

/*Wrapper div is necessary for the horizontal centering fix.
Width of layout is set at 1000 pixels
----------------------------------------------*/
  .wrapper {
    margin: 0 auto;
	text-align: left;
	width: 1020px;
	}
	
/*Empty div for clearing floated content
----------------------------------------------*/
  .spacer{
    clear: both;
    }
		
/*--------------------------------------------------------------
INDEX PAGE
----------------------------------------------------------------*/
  body#index{
	background: #34323C url(../graphics/bg-tile_dark.gif);
    }
  
  #index div{
    margin-top: 130px;
	text-align: center;
	}
	
  #index p{
	margin-top: 30px;
	font-size: 1.5em;
	padding: 5px;
	background: #EBB2D1 url(../graphics/bg-tile_pink.gif);
	}
	
  #index a:link{
    color: #34323C;
	}
  
  #index a:visited{
    color: #34323C;
	}

  #index a:hover{
    color: #FFF;
	}
	
  #index a:active{
    color: #63636E;
	}
	
/*--------------------------------------------------------------
----------------------------------------------------------------
----------------------------------------------------------------
HEADER (this contains the 'Masthead' and 'Main navigation')
----------------------------------------------------------------
----------------------------------------------------------------
----------------------------------------------------------------*/
  #header{
    background: url(../graphics/menu-bar.gif) 0 30px no-repeat;
	margin-bottom: 20px;
	padding: 1px;
	}
	
	
/*--------------------------------------------------------------
MASTHEAD IMAGE
----------------------------------------------------------------*/
  #header h1{
    background: url(../graphics/header-logo.gif) top left no-repeat;
    height: 190px;
	width: 457px;
	text-indent:-9999px;
	float: left;
	margin-top: 13px;
	}
	
/*--------------------------------------------------------------
MAIN NAVIGATION
----------------------------------------------------------------*/
  #header ul{
    float: left;
	margin: 56px 0 0 23px;
	}
	
  #header ul li{
	float: left;
	margin-right: 26px;
	}
	
  #header li a{
    display:block;
	height: 17px;
	text-indent: -9999px;
	}
	
  #header a.home-link{
    background: url(../graphics/menu-home.gif) 0 0 no-repeat;
	width: 46px;
	}
	
  #home #header a.home-link{
    background: url(../graphics/menu-on-home.gif) 0 0 no-repeat;
	}
	
  #header a.work-link{
    background: url(../graphics/menu-work.gif) 0 0 no-repeat;
	width: 46px;
	}
	
  #work-list #header a.work-link, #work #header a.work-link{
    background: url(../graphics/menu-on-work.gif) 0 0 no-repeat;
	}
	
  #header a.contact-link{
    background: url(../graphics/menu-contact.gif) 0 0 no-repeat;
	width: 66px;
	}
	
  #contact #header a.contact-link{
    background: url(../graphics/menu-on-contact.gif) 0 0 no-repeat;
	}
	
  #header a.links-link{
    background: url(../graphics/menu-links.gif) 0 0 no-repeat;
	width: 43px;
	}
	
  #links #header a.links-link{
    background: url(../graphics/menu-on-links.gif) 0 0 no-repeat;
	width: 43px;
	}
		
  #header a.home-link:hover, #home #header a.home-link:hover{
    background-position: -46px 0;
    }
	
  #header a.work-link:hover, #work-list #header a.work-link:hover, #work #header a.work-link:hover{
    background-position: -46px 0;
    }
	
  #header a.contact-link:hover, #contact #header a.contact-link:hover{
    background-position: -66px 0;
    }
	
  #header a.links-link:hover, #links #header a.links-link:hover{
    background-position: -43px 0;
    }
	
/*--------------------------------------------------------------
TAGLINE
----------------------------------------------------------------*/
  #header blockquote{
	background: url(../graphics/header-tag.gif) top left no-repeat;
    height: 40px;
	width: 270px;
	text-indent:-9999px;
	float: left;
	margin: 45px 0 0 28px;
	}
	
/*--------------------------------------------------------------
----------------------------------------------------------------
----------------------------------------------------------------
MAIN CONTENT
----------------------------------------------------------------
----------------------------------------------------------------
----------------------------------------------------------------*/
  #main-content{
    font-size: 1.3em;
	color: #34323C;
	padding: 1px;
	}

/*--------------------------------------------------------------
GENERAL STYLES
----------------------------------------------------------------*/
  h2#page-title{
	display: inline;
	float: left;
	background: #EBB2D1 url(../graphics/bg-tile_pink.gif);
	padding: 3px 5px;
	margin-left: 10px;
	font-size: 0.9em;
  	}
  
  #main-content p{
    margin-bottom: 5px;
	line-height: 2em;
    }
  
  #column1 a, #column2 a, #footer a{
    text-decoration: none;
	outline:none;
	padding-bottom: 1px;
    border-bottom: 1px dotted;
	}
	
  #main-content a:link{
    color: #34323C;
	}
  
  #main-content a:visited{
    color: #63636E;
	}

  #main-content a:hover{
    color: #34323C;
	background-color: #EBB2D1;
	border-bottom: none;
	}
	
  #main-content a:active{
    color: #63636E;
	}
	
/*----------------------------------------------
------------------------------------------------
COLUMN 1 - HOME PAGE AND WORK PAGES
------------------------------------------------
----------------------------------------------*/
  #column1{
    background-color: #FFF;
	border: 1px solid #EBB2D1;
	width: 600px;
	float: left;
	padding: 30px;
		clear: both;
	}
	
  #column1 h3{
	text-align: center;
	font-size: 1.2em;
	font-weight: normal;
	padding: 8px 0 8px 0;
	}
	
  #home #intro ul{
    display: inline;
	margin: 0 5px 5px 20px;
	}
	
  #home #intro li{
    display: inline;
	margin-right: 20px;
    }
	
  #column1 .type1{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	}
	
  #column1 .type1-gap{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	margin-bottom: 10px;
	}
  
  #column1 .type1-divider{
	background: url(../graphics/divider_pink.gif) center bottom no-repeat;
	padding-bottom: 22px;
	}
	
  #column1 h3.type2{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	}
	
  #column1 h3.type2-gap{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	margin-bottom: 10px;
	}
	
  #column1 h3.type3{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	}
	
  #column1 h3.type3-gap{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	margin-bottom: 10px;
	}
	
  #column1 h3.type4{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	}
	
  #column1 h3.type4-gap{
    background: url(../graphics/bg-tile_dark.gif);
	color: #EBB2D1;
	margin-bottom: 10px;
	}
	
/*----------------------------------------------
HOME PAGE INTRO
----------------------------------------------*/
  #intro{
    padding-bottom: 40px;
	margin-bottom: 45px;
	background: url(../graphics/divider_small.gif) center bottom no-repeat;
    }
	
/*----------------------------------------------
MAIN IMAGE
----------------------------------------------*/
  #main-image{
	text-align: center;
	padding-bottom: 5px;
	border-bottom: 1px solid #EBB2D1;
	}
	
  #image-bottom-links{
	text-align: center;
	font-size: 0.8em;
	margin-bottom: 20px;
	}
	
/*----------------------------------------------
MAIN LINK
----------------------------------------------*/
  .main-link{
    text-align: center;
	font-weight: bold;
	margin-bottom: 30px;
	}
	
/*----------------------------------------------
MAIN TEXT
----------------------------------------------*/
  .main-text{
    padding: 35px 0 10px 0;
	margin-bottom: 20px;
	background: url(../graphics/divider_small.gif) center top no-repeat;
	}
	
  .final-para{
    padding-bottom: 35px;
    background: url(../graphics/divider_small.gif) center bottom no-repeat;
    }
	
/*----------------------------------------------
EXTRA IMAGES
----------------------------------------------*/
  .extra-image-left{
    float: left;
	margin-bottom: 20px;
	}
	
  .extra-image-right{
    float: right;
	margin-bottom: 20px;
	}
	
  .extra-image-center{
    text-align: center;
	margin-bottom: 20px;
	}
	
  .extra-image-left img, .extra-image-right img, .extra-image-center img{
    padding: 5px 0 5px 0;
	border-bottom: 1px solid #EBB2D1;
	border-top: 1px solid #EBB2D1;
	}
	
  #latest-work h4{
    text-align: center;
    font-size: 0.8em;
	color: #34323C;
	padding-top: 5px;
	}
	
  .extra-image-left h4, .extra-image-right h4{ 
	width: 290px;
	}
	
/*----------------------------------------------
PAGE BOTTOM LINKS
----------------------------------------------*/
	
  #page-bottom-links{
	background: #EBB2D1 url(../graphics/bg-tile_pink.gif);
	clear: both;
	padding: 5px;
	text-align: center;
	font-size: 0.8em;
	}
	
  #page-bottom-links a{
	padding: 1px;
	}
	
  #main-content #page-bottom-links a:link{
    color: #34323C;
	}
  
  #main-content #page-bottom-links a:visited{
    color: #63636E;
	}

  #main-content #page-bottom-links a:hover{
    color: #FFF;
	background-color: #34323C;
	border-bottom: none;
	}
	
  #main-content #page-bottom-links a:active{
    color: #63636E;
	}
	
  .previous-link{
    float: left;
	margin: 0;
	}
	
  .next-link{
    float: right;
	margin: 0;
	}
	
  .top-link{
    border-right: 1px solid #34323C;
	padding-right: 10px;
	}
	
  .back-link{
    padding-left: 10px;
	}
	
  #main-content #image-bottom-links a:link.dead-link, #main-content #page-bottom-links a:link.dead-link,
  #main-content #image-bottom-links a:visited.dead-link, #main-content #page-bottom-links a:visited.dead-link,
  #main-content #image-bottom-links a:hover.dead-link, #main-content #page-bottom-links a:hover.dead-link,
  #main-content #image-bottom-links a:active.dead-link, #main-content #page-bottom-links a:active.dead-link{
    color: #CCC;
	background: none;
	border: none;
	}
    
    	
/*----------------------------------------------
------------------------------------------------
COLUMN 1 - WORK LIST PAGES
------------------------------------------------
----------------------------------------------*/
  #work-list #column1{
    width: 760px;
	padding: 30px;
	}	
	
/*----------------------------------------------
WORK LIST PAGES - WORK LIST INTRO AND DISPLAY MENU
----------------------------------------------*/
  #work-list #intro{
	background: #75A394 url(../graphics/bg-tile_pink.gif);
	color: #34323C;
	font-weight: normal;
	padding: 8px 20px 8px 20px;
	margin-bottom: 20px;
	}
	
  #work-list #intro p{
    padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #34323C;
	}
	
  #work-list #intro ul{
    display: inline;
	margin: 0 5px 5px 20px;
	}
	
  #work-list #intro li{
    display: inline;
	margin-right: 20px;
    }
	
  #work-list #intro li a:link{
    color: #34323C;
	}
  
  #work-list #intro li a:visited{
    color: #63636E;
	}

  #work-list #intro li a:hover{
    color: #FFF;
	background-color: #34323C;
	border-bottom: none;
	}
	
  #work-list #intro li a:active{
    color: #63636E;
	}
	
/*----------------------------------------------
WORK LIST PAGES - WORK LIST MENU
----------------------------------------------*/
  #work-list #work-list-menu{
    float: left;
	margin-bottom: 20px;
    }
  
  #work-list #work-list-menu li{
	float: left;
	margin: 10px 6px;
	}
	
  #work-list-menu li img{
    display: block;
    outline:none;
	}
  
  #work-list-menu li span{
    display: block;
	width: 134px;
	font-size: 0.8em;
	text-align:center;
    text-decoration: none;
    outline:none;
	padding: 3px;
	}
	
/*----------------------------------------------
Work menu list li are given a class number 1-5 (.menu1, .menu2, .menu3, .menu4, .menu5)
whichever li number appears at the start of each row is cleared otherwise problems 
occur when text is up-sized and li item titles run on to extra lines.
Whenever a new piece of work is added to the site, the new work is assigned the next li class number 
(or back to .menu1 if the previous one is .menu5) and the cleared class number below must be moved up 
one on whichever work list pages the new work appears on.
----------------------------------------------*/
	
  #work-list ul.everything .menu2{
    clear: both;
	}
	
  #work-list ul.illustration .menu3{
    clear: both;
	}
	
  #work-list ul.design .menu4{
    clear: both;
	}
  

/*----------------------------------------------
------------------------------------------------
COLUMN 1 - CONTACT PAGE
------------------------------------------------
----------------------------------------------*/
/*----------------------------------------------
CONTACT PAGE - CONTACT FORM
----------------------------------------------*/
 #contact-form form{
	padding: 20px 30px 50px 30px;
	margin-bottom: 30px;
	background: #EBB2D1 url(../graphics/bg-tile_pink.gif);
    }
	
 #contact-form form p{
	padding-bottom: 20px;
    font-size: 1.1em;
	}
		
  #contact-form .submit{
	float: right;
    border: none;
	padding: 8px;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	color: #FFF;
	font-family: georgia, "Times New Roman", Times, serif;
	font-size: 1.1em;
	font-weight: bold;
	}
		
  #contact-form label{
	padding: 13px;
	color: #FFF;
	font-size: 1.1em;
	font-weight: bold;
	float: left;
	}
  
  #contact-form fieldset{
    display: block;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	margin: 8px 0;
	}
	
  #contact-form fieldset#submit{
    background: none;
	margin: 8px 0 0 0;
	}
  
  #contact-form fieldset#hidden{
    background: none;
	margin: 0;
	border: none;
	}
	
  #contact-form .input{
    width: 350px;
	margin-left: 5px;
	border: none;
	padding: 15px;
	font-size: 1.1em;
	font-family: georgia, "Times New Roman", Times, serif;
	color: #34323C;
	float: right;
	}
	
  #contact-form .select{
    width: 295px;
	}
	
/*----------------------------------------------
CONTACT PAGE - PHONE
----------------------------------------------*/
  #contact-phone{
    padding-bottom: 35px;
	margin-bottom: 35px;
	background: url(../graphics/divider_small.gif) center bottom no-repeat;
	text-align: center;
    }
	
  #contact-phone blockquote{
    font-weight: bold;
	font-size: 1.1em;
    }
	
/*----------------------------------------------
CONTACT PAGE - ABOUT
----------------------------------------------*/
  #about p{
    margin: 20px 0 20px 0;
	}
	
/*----------------------------------------------
------------------------------------------------
LINKS PAGE
------------------------------------------------
----------------------------------------------*/
  #links #intro{
    padding: 10px 30px;
	margin-bottom: 30px;
	background: #EBB2D1 url(../graphics/bg-tile_pink.gif);
	}
	
  #links #main-content #column1 ul{
    padding-bottom: 35px;
	margin-bottom: 35px;
	background: url(../graphics/divider_small.gif) center bottom no-repeat;
	text-align: center;
    }
	
  #links #main-content #column1 li{
    margin: 15px 0;
	font-weight: bold;
	Font-size: 1.1em;
	}
	
/*----------------------------------------------
------------------------------------------------
SITEMAP PAGE
------------------------------------------------
----------------------------------------------*/
  ul#sitemap-list{
	padding-bottom: 30px;
    }
	
  #sitemap-list a{
	font-weight: bold;
	}
	
  #sitemap-list li{
    padding: 2px 0 2px 0;
    margin-left: 20px;
	}
	
/*----------------------------------------------
------------------------------------------------
ACCESSIBILITY PAGE
------------------------------------------------
----------------------------------------------*/
  #accessibility #column1 h3{
	background: #34323C url(../graphics/bg-tile_dark.gif);
	color: #FFF;
	font-size: 1.2em;
	margin-bottom: 10px;
	}

  #accessibility #column1 h4, #accessibility #column1 li{
	color: #34323C;
	font-size: 1.1em;
	font-weight: bold;
	text-align: left;
	line-height: 2em;
	}
	
  #accessibility #column1 ul{
    margin-bottom: 20px;
	}
	
  .section{
	margin-bottom: 25px;
	}

/*----------------------------------------------
------------------------------------------------
COLUMN 2
------------------------------------------------
----------------------------------------------*/
  #column2{
    float: left;
	}
	
  #main-content #column2 h2{
   	background: url(../graphics/title_recommended.gif) top left no-repeat;
    height: 56px;
	width: 242px;
	text-indent:-9999px;
	margin: 0;
	}
	
  #column2 ul li{
    background-color: #FFF;
	margin: 10px 0 10px 0;
	padding: 10px;
	width: 140px;
	border: 1px solid #EBB2D1;
	border-left: none;
	}
	
  #column2 li img{
    display: block;
    outline:none;
	}
  
  #column2 li span{
    display: block;
	font-size: 0.8em;
	text-align:center;
    text-decoration: none;
    outline:none;
	padding: 3px;
	}
	
  li a:link span.image-link1{
    color: #EBB2D1;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	}
  
  li a:visited span.image-link1{
    color: #63636E;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	}

  li a:hover span.image-link1{
    color: #34323C;
	background: #75A394 url(../graphics/bg-tile_pink.gif);
	}
	
  li a:active span.image-link1{
    color: #34323C;
	background: #FFF url(../graphics/bg-tile_light.gif);
	}
/*-------------------------------------------*/
  li a:link span.image-link2{
    color: #EBB2D1;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	}
  
  li a:visited span.image-link2{
    color: #63636E;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	}

  li a:hover span.image-link2{
    color: #34323C;
	background: #75A394 url(../graphics/bg-tile_pink.gif);
	}
	
  li a:active span.image-link2{
    color: #34323C;
	background: #FFF url(../graphics/bg-tile_light.gif);
	}
/*-------------------------------------------*/
  li a:link span.image-link3{
    color: #EBB2D1;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	}
  
  li a:visited span.image-link3{
    color: #63636E;
	background: #34323C url(../graphics/bg-tile_dark.gif);
	}

  li a:hover span.image-link3{
    color: #34323C;
	background: #75A394 url(../graphics/bg-tile_pink.gif);
	}
	
  li a:active span.image-link3{
    color: #34323C;
	background: #FFF url(../graphics/bg-tile_light.gif);
	}
	
/*--------------------------------------------------------------
----------------------------------------------------------------
----------------------------------------------------------------
FOOTER
----------------------------------------------------------------
----------------------------------------------------------------
----------------------------------------------------------------*/
  #footer-bg{
	background: #EBB2D1 url(../graphics/bg-tile_pink.gif);
	border-top: 1px solid #FFF;
	border-bottom: 1px solid #FFF;
	margin: 40px 0 20px 0;
	}
	
  #footer{
    padding: 20px 0 20px 0;
	color: #34323C;
	font-size: 1.1em;
	}
	  
  #footer a:link{
    color: #34323C;
	}
  
  #footer a:visited{
    color: #63636E;
	}

  #footer a:hover{
    color: #FFF;
	background-color: #34323C;
	border-bottom: none;
	}
	
  #footer a:active{
    color: #63636E;
	}
	
  #footer-info{
    float: left;
	}
	
 #footer-info p{
    margin-bottom: 6px;
	}
 
  #footer-info li{
    display: inline;
	padding-right: 5px;
	margin-right: 5px;
	border-right: 1px solid #34323C;
	}
	
  #footer blockquote{
	background: url(../graphics/footer-tag.gif) top center no-repeat;
    height: 38px;
	min-width: 270px;
	text-indent:-9999px;
	}
	
  #footer-menu{
    float: left;
	text-align: center;
	border-left: 1px solid #34323C;
	border-right: 1px solid #34323C;
	padding: 0 30px 0 30px;
	margin: 0 30px 0 30px;
	}
	
  #footer-menu li{
    float: left;
    font-size: 1.2em;
	font-weight: bold;
	margin-right: 25px;
	}
	
  #footer li.last-link{
    margin-right: 0;
	border-right: none;
	}
  
  	
  #footer #footer-menu ul{
    margin-top: 15px;
	}
	
  #footer-logo{
    float: left;
	}