/*	CSS Document for: The Number 27
	Designed by : The Number 27 - Web Design
	Designer name : Matt.

/*	Colors used on site :

background : #f4f4f4
content background :


*/

/*------------------------------
			GLOBAL
-------------------------------*/

body {
	background: #f9f9f9 url(../images/bodybg.jpg) repeat-x;
	font-family: "Trebuchet MS";
	font-size: 62.5%;
    font-weight: lighter;
}
html>body {
    margin-top: 8px;
}
img {
	border: none;
}

.clear {
	clear:both;
}

a:active
{
  outline: none;
}

a:focus
{
  outline: none;
}



/*------------------------------
			LAYOUT
-------------------------------*/
#container {
    width: 1100px;
	margin: 0 auto;
    position: relative;
    padding: 0;
}

#header {
    position: relative;
    width: 1100px;
    height: 121px;
    background: url(../images/colourbar.jpg) no-repeat;
    border-bottom: 1px solid #ccc;
}

#logo {
    position: absolute;
    top: 21px;
    left: 0;
    width: 320px;
    height: 100px;
}

#camsquote {
    position: absolute;
    top: 20px;
    left: 728px;
    width: 370px;
    height: 50px;
}

#navcontainer {
    position: absolute;
    top: 85px;
    left: 354px;
    width: 746px;
    height: 30px;
}

#nav {
    position: relative;
    margin: 0;
    padding: 0;
}

#content {
    position: absolute;
    top: 122px;
    left: 0px;
    width: 900px;
    height: 400px;
}
#webserv {
    float: left;
    width: 450px;
}
#webserv ul li {
    font-size: 1.4em;
}
#addserv {
    float: left;
    width: 450px;
}
#addserv ul li {
    font-size: 1.4em;
}
#netserv {
    clear: both;
}
#netserv ul li {
    font-size: 1.4em;
}

#sidebar {
    position: absolute;
    top: 163px;
    left: 900px;
    width: 200px;
    height: 320px;
    border-left: 1px solid #ccc;
}

#facebook {
    position: absolute;
    top: 10px;
    left: 570px;
    width: 200px;
    height: 62px;
}

#footer {
    position: absolute;
    top: 522px;
    left: 0;
    width: 1100px;
    height: 121px;
    border-top: 1px solid #ccc;
}
#footercontent {
    position: relative;
}
#twitter {
    position: absolute;
    top: 7px;
    left: 110px;
    width: 620px;
    height: 40px;
}
#facebook {
    position: absolute;
    top: 50px;
    left: 110px;
    width: 620px;
    height: 40px;
}


#footernav {
    position: absolute;
    top: 5px;
    left: 924px;
    width: 176px;
    height: 30px;
    margin: 0;
    padding: 0;
}
#footerbar {
    position: absolute;
    top: 100px;
    left: 0;
}


#picgallery {
    width: 600px;
    height: 444px;
    margin-top: 5px;
}

#portgallery {
    width: 885px;
    height: 345px;
    margin-top: 10px;
}
#contactform {
    width: 885px;
    height: 290px;
}


/*------------------------------
			NAVIGATION
-------------------------------*/

#nav li {
	display: inline;
	font-size: 23px;
	list-style: none;
    zoom: 1;
}
.home {
    position: absolute;
    top: 0;
    left: 0;
}
.contact {
    position: absolute;
    top: 0;
    left: 80px;
}
.portfolio {
    position: absolute;
    top: 0;
    left: 182px;
}
.services {
    position: absolute;
    top: 0;
    left: 294px;
}
.musings {
    position: absolute;
    top: 0;
    left: 402px;
}
.gallery {
    position: absolute;
    top: 0;
    left: 505px;
}
.links {
    position: absolute;
    top: 0;
    left: 603px;
}
.music {
    position: absolute;
    top: 0;
    left: 678px;
}
#footernav .terms {
    position: absolute;
    top: 0;
    left: 0;
}
#footernav .contact {
    position: absolute;
    top: 0;
    left: 84px;
}


#nav a:link, #nav a:visited {
	color: #666;
	text-decoration: none;
}

#footernav li {
    display: inline;
	font-size: 23px;
	list-style: none;
    zoom: 1;
}
#footernav a:link, #footernav a:visited {
	color: #666;
	text-decoration: none;
}
#nav .home a:hover {
    color: #ff0000;
}
#nav .contact a:hover {
    color: #00ff00;
}
#nav .portfolio a:hover {
    color: #0000ff;
}
#nav .services a:hover {
    color: #ffcc00;
}
#nav .musings a:hover {
    color: #33ccff;
}
#nav .gallery a:hover {
    color: #cc00ff;
}
#nav .links a:hover {
    color: #ff6600;
}
#nav .music a:hover {
    color: #ff66ff;
}
#footernav .terms a:hover {
    color: #ff0000;
}
#footernav .contact a:hover {
    color: #00ff00;
}

/*------------------------------
			TEXT
-------------------------------*/

#content p {
   color: #666;
   font-size: 1.6em;
   margin: 5px 10px 5px 0;
}
#sidebar p {
   color: #666;
   font-size: 1.4em;
   margin: 0 10px 10px 10px;
}
#lyr1 p{
    font-size: 1.4em;
}
#facebook p {
    color: #666;
    font-size: 1.4em;
    margin: 0;
    margin-top: 2px;
}


body#home-page #content strong {
    color: #ff0000;
}
body#services-page #content strong {
    color: #ffcc00;
}
body#musings-page #content strong {
    color: #33ccff;
}
body#gallery-page #content strong {
    color: #cc00ff;
}
body#links-page #content strong {
    color: #ff6600;
}


.copywrite {
   position: absolute;
   top: 74px;
   left: 764px;
   color: #666;
   font-size: 1.4em;
}
.copywrite a {
  color: #666;
  text-decoration: none;
}
.copywrite a:hover {
    color: #ff0000;
}
.quote {
    position: absolute;
    top: 5px;
    left: 39px;
    text-align: right;
    color: #999;
    font-size: 1.5em;
}


#commentbox p {
    font-size: 1.4em;
}


/*------------------------------
			HEADINGS
-------------------------------*/

h2 {
    color: #666;
    font-size: 2em;
    font-weight: lighter;
    margin: 5px 0 5px 0;
    padding: 0;
}
#sidebar h2 {
    margin: 0 0 5px 10px;
    padding: 0;
}

h3 {
    color: #999;
    font-size: 1.2em;
    font-weight: lighter;
    margin: 30px 0 0 0;
    padding: 0;
}
/*------------------------------
			LINKS
-------------------------------*/


#twitter a:link, #twitter a:visited {
	color: #33ccff;
    text-decoration: none;
    font-size: 1.1em;
}
#twitter a:hover {
	color: #33ccff;
    text-decoration: underline;
    font-size: 1.1em;
}

#news a:link, #news a:visited {
	color: #ff0000;
    text-decoration: none;
}
#news a:hover {
	color: #ff0000;
    text-decoration: underline;
}

#facebook a:link, #facebook a:visited {
	color: #3b5997;
    text-decoration: none;
}
#facebook a:hover {
	color: #3b5997;
    text-decoration: underline;
}

body#gallery-page #content h2 a {
    margin-right: 10px;
}
/*------------------------------
        CONTENT LINKS
-------------------------------*/
body#home-page #content a:link, body#home-page #content a:visited {
	color: #ff0000;
	text-decoration: none;
}
body#home-page #content a:hover {
	color: #ff0000;
    text-decoration: underline;
}

body#contact-page #content a:link, body#contact-page #content a:visited {
	color: #00ff00;
	text-decoration: none;
}
body#contact-page #content a:hover {
	color: #00ff00;
    text-decoration: underline;
}

body#portfolio-page #content a:link, body#portfolio-page #content a:visited {
	color: #0000ff;
	text-decoration: none;
}
body#portfolio-page #content a:hover {
	color: #0000ff;
    text-decoration: underline;
}

body#services-page #content a:link, body#services-page #content a:visited {
	color: #ffcc00;
	text-decoration: none;
}
body#services-page #content a:hover {
	color: #ffcc00;
    text-decoration: underline;
}

body#musings-page #content a:link, body#musings-page #content a:visited {
	color: #33ccff;
	text-decoration: none;
}
body#musings-page #content a:hover {
	color: #33ccff;
    text-decoration: underline;
}

body#gallery-page #content a:link, body#gallery-page #content a:visited {
	color: #cc00ff;
	text-decoration: none;
}
body#gallery-page #content a:hover {
	color: #cc00ff;
    text-decoration: underline;
}

body#links-page #content a:link, body#links-page #content a:visited {
	color: #ff6600;
	text-decoration: none;
}
body#links-page #content a:hover {
	color: #ff6600;
    text-decoration: underline;
}

body#music-page #content a:link, body#music-page #content a:visited {
	color: #ff66ff;
	text-decoration: none;
}
body#music-page #content a:hover {
	color: #ff66ff;
    text-decoration: underline;
}

body#terms-page #content a:link, body#terms-page #content a:visited {
	color: #ff0000;
	text-decoration: none;
}
body#terms-page #content a:hover {
	color: #ff0000;
    text-decoration: underline;
}


body#home-page #sidebar a:link, body#home-page #sidebar a:visited {
	color: #ff0000;
	text-decoration: none;
}
body#home-page #sidebar a:hover {
	color: #ff0000;
    text-decoration: underline;
}

body#contact-page #sidebar a:link, body#contact-page #sidebar a:visited {
	color: #00ff00;
	text-decoration: none;
}
body#contact-page #sidebar a:hover {
	color: #00ff00;
    text-decoration: underline;
}

body#portfolio-page #sidebar a:link, body#portfolio-page #sidebar a:visited {
	color: #0000ff;
	text-decoration: none;
}
body#portfolio-page #sidebar a:hover {
	color: #0000ff;
    text-decoration: underline;
}

body#services-page #sidebar a:link, body#services-page #sidebar a:visited {
	color: #ffcc00;
	text-decoration: none;
}
body#services-page #sidebar a:hover {
	color: #ffcc00;
    text-decoration: underline;
}

body#musings-page #sidebar a:link, body#musings-page #sidebar a:visited {
	color: #33ccff;
	text-decoration: none;
}
body#musings-page #sidebar a:hover {
	color: #33ccff;
    text-decoration: underline;
}

body#gallery-page #sidebar a:link, body#gallery-page #sidebar a:visited {
	color: #cc00ff;
	text-decoration: none;
}
body#gallery-page #sidebar a:hover {
	color: #cc00ff;
    text-decoration: underline;
}

body#links-page #sidebar a:link, body#links-page #sidebar a:visited {
	color: #ff6600;
	text-decoration: none;
}
body#links-page #sidebar a:hover {
	color: #ff6600;
    text-decoration: underline;
}

body#music-page #sidebar a:link, body#music-page #sidebar a:visited {
	color: #ff66ff;
	text-decoration: none;
}
body#music-page #sidebar a:hover {
	color: #ff66ff;
    text-decoration: underline;
}

body#terms-page #sidebar a:link, body#terms-page #sidebar a:visited {
	color: #ff0000;
	text-decoration: none;
}
body#terms-page #sidebar a:hover {
	color: #ff0000;
    text-decoration: underline;
}
/*------------------------------
			LISTS
-------------------------------*/
#content ul {
    margin: 2px;
    margin-left: 0;
    padding: 0;
}
#content li {
    list-style: none;
    color: #666;
    font-size: 1.6em;
}
#lyr1 li {
    font-size: 1.4em;
}


#twitter_div ul {
    font-size: 1.4em;
    color: #666;
    list-style: none;
    padding: 0;
    margin: 0;
    margin-bottom: 10px;
}
#twitter_div ul li {
    margin-bottom: 5px;
}


#content .facts li {
    list-style: decimal;
    margin-left: 27px;
}

/*------------------------------
      NAVIGATION LISTS
-------------------------------*/

.home strong {
    color: #ff0000;
}
.contact strong {
    color: #00ff00;
}
.portfolio strong {
    color: #0000ff;
}
.services strong {
    color: #ffcc00;
}
.musings strong {
    color: #33ccff;
}
.gallery strong {
    color: #cc00ff;
}
.links strong {
    color: #ff6600;
}
.music strong {
    color: #ff66ff;
}
.terms strong {
    color: #ff0000;
}

body#home-page ul li.home a {
    color: #ff0000;
}
body#contact-page ul li.contact a {
    color: #00ff00;
}
body#portfolio-page ul li.portfolio a {
    color: #0000ff;
}
body#services-page ul li.services a {
    color: #ffcc00;
}
body#musings-page ul li.musings a {
    color: #33ccff;
}
body#gallery-page ul li.gallery a {
    color: #cc00ff;
}
body#links-page ul li.links a {
    color: #ff6600;
}
body#music-page ul li.music a {
    color: #ff66ff;
}
body#terms-page ul li.terms a {
    color: #ff0000;
}

/*------------------------------
			IMAGES
--------------------------------*/
.twittericon {
    position: absolute;
    top: 10px;
    left: 0;
}

.facebookicon {
    position: absolute;
    top: 55px;
    left: 0;
}


/*--------------------------------
       SCROLLBAR
---------------------------------*/
 div#scrollbar {
    display:block; /* initially display:none; to hide from incapable */
    }

#wn	{
    position: relative;
    width: 850px;
    height: 250px;
    margin-top: 5px;
    overflow: hidden;
	}

#scrollbar {
  position: relative;
  width: 24px;
  height: 260px;
  font-size: 1px;  /* so no gap or misplacement due to image vertical alignment */
  }
#track {
  position: absolute;
  left: 2px;
  top: 28px;
  width: 18px;
  height: 202px;
}
#dragBar {
  position: absolute;
  left: 0px;
  width: 14px;
  height: 24px;
  margin-top: 10px;
  margin-left: 1px;
}
#up {
  position: absolute;
  left: 0px;
  top: 0;
  }
#down {
  position: absolute;
  left: 0px;
  bottom: 0;
  }

body#services-page #track {
    border: 1px solid #ffcc00;
}
body#services-page #dragBar {
    background: url(../images/servicesdragbar.jpg) no-repeat;
}
body#musings-page #track {
    border: 1px solid #33ccff;
}
body#musings-page #dragBar {
    background: url(../images/musingsdragbar.jpg) no-repeat;
}
body#links-page #track {
    border: 1px solid #ff6600;
}
body#links-page #dragBar {
    background: url(../images/linksdragbar.jpg) no-repeat;
}
body#music-page #track {
    border: 1px solid #ff66ff;
}
body#music-page #dragBar {
    background: url(../images/musicdragbar.jpg) no-repeat;
}
body#terms-page #track {
    border: 1px solid #ff0000;
}
body#terms-page #dragBar {
    background: url(../images/termsdragbar.jpg) no-repeat;
}

/* for safari, to prevent selection problem  */
div#scrollbar, div#track, div#dragBar, div#up, div#down {
    -moz-user-select: none;
    -khtml-user-select: none;
}


/* so no gap or misplacement due to image vertical alignment
font-size:1px in scrollbar has same effect (less likely to be removed, resulting in support issues) */
div#scrollbar img {
    display:block;
    }


/*------------------------------
			FORMS
-------------------------------*/

form .contactform {
    margin: 0;
	padding: 0;
}

fieldset {
    float: left;
    border: none;
    padding: 0;
    margin: 0 30px 10px 0;
}

label {
	display:  block;
	color: #666;
	width: 200px;
    padding-top: 10px;
    margin: 0;
}

input {
	width:  230px;
	background: none;
	border: 1px solid #ccc;
	font-size: 1em;
	color: #666;
}

textarea {
	width:  502px;
    height: 180px;
	background: none;
	border: 1px solid #ccc;
    font-family: "Trebuchet MS";
	font-size: 1em;
	color: #666;
}

input.btn {
    background: url(../images/submit.jpg) no-repeat;
	width: 126px;
    height: 34px;
	font-size: 1.2em;
    color: #888;
    font-weight: lighter;
    border: none;
    margin-top: 10px;
    padding: 0;
}

fieldset p {
   padding-left: 25px;
   padding: 0;
   margin: 0;
}
.veriword {
    margin-top: 30px;
}


/*--------------------------------
       FORM SUBSCRIBER
---------------------------------*/

.subscribe label {
    width: 185px;
}
.subscribe input {
    width: 185px;
}
.subscribe input.btn {
    background: url(../images/subscribe.jpg) no-repeat;
	width: 100px;
    height: 27px;
	font-size: 1em;
    color: #777;
    font-weight: lighter;
    border: none;
    margin-top: 5px;
    padding: 0;
}



/*--------------------------------
       TABLES
---------------------------------*/
.response {
   color: #666;
   font-size: 1.6em;
   margin: 10px 25px 0 0;
}