/* web-design.css for Yammer.co.uk ---------------------------------------- */

* {
margin: 0;
padding: 0;
}

html { background: black; }

body {
color: #333333;
font-size: 87.5%;
line-height: 1.43em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

#page {
margin: 0 auto;
max-width: 1200px;
min-width: 495px;
}

/* Redefine basic markup styles ------------------------------------------- */

h1, h2, h3 { font-family: Arial, Helvetica, sans-serif; text-align: left; }

h1 {
margin-bottom: 0.95em;
padding-top: 0.95em;
padding-left: 0.67em;
font-size: 1.5em;
}

h2 {
margin: 1.11em 0;
padding-left: 0.78em;
font-size: 1.29em;
}

img {
border: none;
vertical-align: bottom;
}


/* Header ---------------------------------------------------------------- */

#header {
position: relative;
background-color: #090989;
height: 100px;
color: #ccccff;
}

#header p {
position: absolute;
top: 50%;
right: 0;
margin: -1.7em 1.17em 0 0;
font-weight: bold;
font-size: 1.29em;
line-height: 1.7em;
font-family: Arial, Helvetica, sans-serif;
text-align: right;
}
#header em {
color: white;
font-style: normal;
font-size: 1.33em;
}
#header img {
float: left;
display: block;
}


/* CONTENT ------------------------------------------------------------ */

#content {
clear: both;
float: left;
border-top: 1px solid #333333;
background: white url(images/bg_content_top-2.gif) repeat-x left top;
/*background: white url(images/rules.gif) repeat;*/
width: 100%;
color: #333333;
}

#bulk {
float: left;
width: 69%;
}

div.col {
float: left;
text-align: center;
}

#main {
float: right;
width: 55.27%;
}

#tease {
float: left;
width: 44.71%;
padding-top: 2.86em;
}

div.col p {
margin: 0 1em 1.43em;
text-align: left;
}


#example {
margin: 0.08em 1em 1.46em;
font-style: italic;
font-size: 0.93em;
line-height: 1.54;
text-align: center;
}
#example img {
margin-bottom: 0;
padding: 4px 0;
width: 100%;
max-width: 270px;
}


#promo {
margin: 0 1.63em;
padding: 4px 0;
font-size: 86%;
text-align: center;
}
#promo img {
width: 100%;
max-width: 180px;
}


div.col form p {
margin-bottom: 0;
padding: 0;
}


div.col a { color: #333333; }


div.col img { margin: 0 0 0.5em; }


div.col ul {
margin: 0 1em 1.43em;
list-style-type: none;
text-align: left;
}

div.col li {
margin: 0;
background: url(images/bullet.gif) no-repeat 0.1em 0.5em;
padding-left: 1em;
}


div.col dl {
margin: 0 1.5em 1.43em;
text-align: left;
}

div.col dt { font-weight: normal; }

div.col dd {
margin-left: 0.8em;
margin-bottom: 1.43em;
font-weight: bold;
}


div.col address { font-style: normal; }



/* TEASER BOX ----------------------------------- */

div.box {
margin: 0.77em 1.3em;
background: url(images/panel-bottom-left.gif) no-repeat left bottom;
font-size: 0.93em;
position: relative;
}

div.box1 {
background: url(images/panel-bottom-right.gif) no-repeat right bottom;
padding-bottom: 1.3em;
}

div.box2 { background: url(images/panel-top-left.gif) no-repeat left top; }

div.box h2 {
margin: 0;
background: url(images/panel-top-right.gif) no-repeat right top;
padding: 1.25em 1.22em 0.625em;
font-size: 1.23em;
}

div.box p {
margin: 0.08em 0 0.69em;
padding: 0 1.7em 0 1.5em;
text-align: justify;
}

div.box a:hover {
color: black;
text-decoration: none;
}

div.box ul {
margin: 0;
padding: 0 1.5em 0.5em;
line-height: 2.31;
}

div.box ul li {
padding: 0;
background: none;
}

div.box ul a {
border: 1px solid #ccccff;
padding: 0.31em 0.92em;
color: #333333;
font-weight: bold;
}

div.box ul a:hover {
border-color: #999999;
background-color: #cccccc;
}

#b-letsgo a#a-letsgo, #b-casa a#a-casa, #b-johnb a#a-johnb, #b-d59 a#a-d59, #b-bousy a#a-bousy, #b-cbousf a#a-cbousf, #b-sbs a#a-sbs { border: 1px solid #999999; }



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

#nav {
float: right;
background: #333333 url(images/bg_nav_whole-3.gif) no-repeat left bottom;
padding-bottom: 1em;
color: #ccccff;
width: 30.6%;
}

#nav .liner {
background: url(images/bg_content_top-corner-4.gif) no-repeat left top;
}

#nav h2 {
margin-left: 25px;
padding-left: 0.77em;
color: #ccccff;
}

#nav p {
margin: 0 1.61em 1.54em 25px;
padding-left: 1.08em;
font-size: 0.93em;
line-height: 1.54;
}

#nav a {
color: #ccccff;
text-decoration: underline;
}

#nav a:hover { color: #e8e8ff; }

#utilities {
padding: 0 1.5em 0 25px;
list-style-type: none;
line-height: 2.86;
font-weight: bold;
text-align: right;
}

#utilities li {
margin: 0 0 0 0.25em;
display: inline;
}


#services {
margin-left: 25px;
margin-bottom: 2.86em;
padding: 0 1em;
list-style-type: none;
}

#services li { margin: 0 0 1.43em; }

#services a {
background: #ccccff url(images/button-gradient.gif) repeat-x left top;
padding: 0.29em 0.93em;
color: #333333;
font-weight: bold;
text-decoration: none;
border-right: 2px solid #181818;
}

#services a:hover {
background: #dbdbff url(images/button-gradient-hi.gif) repeat-x left top;
color: #333333;
}

#nav blockquote p {
margin-bottom: 0;
padding-right: 0.5em;
font-style: italic;
/*overflow: visible;
zoom: 1;*/
}
#nav blockquote p.author {
font-weight: bold;
text-align: right;
padding-bottom: 3.08em;
}

#nav #site-info {
color: #999999 !important;
padding-top: 1.54em;
padding-bottom: 1.54em;
}

#home a.home, #present a.present, #afford a.afford, #seo a.seo {
color: #4747B3 !important;
}



/* Footer ---------------------------------------------------------------- */

#footer {
clear: both;
background: #666666 url(images/bg_content_btm-2.gif) repeat-x left top;
height: 22px;
}



/* Forms ---------------------------------------------------------------- */

label { display: block; }

input.field, textarea.field {
margin-bottom: 1.29em;
border: 1px solid #cccccc;
width: 90%;
height: 1.43em;
font-size: 1em;
line-height: 1.43em;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

textarea.field { height: 7em; }

input.btn {
border-width: 1px;
border-style: solid;
border-color: #2020F0 #060660 #060660 #2020F0;
background-color: #090989;
color: #ccccff;
font-weight: bold;
font-size: 1em;
cursor: pointer;
}


/* Scroller ------------------------------------------------------------ */

#pscroller1{
height: 10.78em;
}

.someclass{ /*class to apply to your scroller(s) if desired*/
}




/* Printer layout ------------------------------------------------------ */

@media print {
#bulk { width: 100%; }
#nav { display: none; }
}