/**
 * CSS for antom.co.uk
 * @author: Andy Thomas (email@antom.co.uk)
 * @date:   19/05/2010
 */


/** RESET **/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
border:0;
outline:0;
background:transparent;
}
	
ol,
ul{
list-style: none;
}

blockquote,
q {
quotes: none;
}

:focus {
outline: 0;
}

table {
border-collapse: collapse;
border-spacing: 0;
}

textarea {
resize:none;
}

abbr,
acronym {
cursor:help;
}

/** CLASSES **/

.ampersand {
font-family:'Palatino Linotype',Palatino,Georgia,Utopia,serif;
font-style:italic;
}

/** HEADER **/
#hdr p {
background:url(/img/sprites.png) -408px -359px no-repeat;
height:286px;
left:408px;
position:absolute;
top:34px;
width:219px
}

#hdr p a {
bottom:0;
display:block;
height:83px;
overflow:hidden;
position:absolute;
text-indent:-9999em;
width:218px;
z-index:999;
}

#hdr ul {
left:20px;
position:absolute;
top:0px;
z-index:999;
}

#hdr ul li {
float:left;
margin:0 4px 0 0;
}

#hdr ul li a {
-moz-border-radius:4px 4px 0 0;
background:url(/img/tab-edge.png) 0 0 no-repeat;
background-color:#d1d3d4;
border-radius:4px 4px 0 0;
color:#fff;
display:block;
padding:2px 4px;
text-align:center;
width:7em;
}

#hdr ul li.selected a {
background-color:#565b72;
color:#fff;
font-weight:700;
}

#hdr ul li a:focus,
#hdr ul li a:hover {
background-color:#b2b3b4;
color:#fff;
text-decoration:none;
}

#hdr ul li.selected a:focus,
#hdr ul li.selected a:hover {
background-color:#494d61;
}

#hdr ul li a em {
font-style:normal;
}

#go-back {
bottom:0px;
position:absolute;
}

/** FORMS **/

form dl dt {
display:block;
clear:left;
float:left;
width:33%;
}

fieldset legend {
display:none;
}

form dl label {
display:block;
padding:.4em 0;
}

form dl dd {
background-color:#fff;
border:.1em solid #ccc;
display:block;
float:left;
margin-bottom:.5em;
overflow-x:hidden;
width:66%;
}

dl input,
dl textarea {
background-color:#fff!important;
border:0;
font-family:verdana,sans-serif;
font-size:1em;
margin:auto;
padding:.3em;
width:23.1em;
}

dl textarea {
margin:.3em auto;
overflow-x:hidden;
overflow-y:scroll;
padding:0 .3em;
}

dl select {
border-width:.1em;
border-style:solid;
background-color:#fff!important;
font-family:verdana,sans-serif;
font-size:1em;
margin:auto;
padding:0 0 0 .1em;
width:100%;
}

dl select option {
padding:2px 0;
}

span.mandatory_symbol {
color:#c00;
}

p.error em {
background-color:#f00;
color:#fff;
font-weight:700;
font-style:normal;
padding:4px;
width:auto;
}

p.error {
background:url(/img/sprites.png) 0 -403px no-repeat;
float:right;
margin:3px 0 0 235px!important;
padding:0 0 0 6px;
position:absolute;
}

.page form p {
margin:.5em 0 .5em auto;
text-align:right;
}

.input-submit {
-moz-border-radius:4px;
border:1px solid #999;
border-radius:4px;
background-color:#ccc;
color:#666;
padding:1px 5px;
}

#roman-numerals-form,
#contact-form {
clear:left;
margin:0 10px;
width:360px;
}

/** MAIN **/

body {
background-color:#f6f6f6;
color:#565b72;
font-family:verdana,sans-serif;
font-size:62.5%;
}

a {
color:#999;
text-decoration:none;
}

a:focus,
a:hover {
color:#565b72;
text-decoration:underline;
}

#wrapper {
height:368px;
margin:-176px auto 160px auto;
min-height:359px;
min-width:654px;
position:absolute;
top:50%;
width:100%;
}

#antom {
background:url(/img/sprites.png) 0 0 no-repeat;
display:block;
height:359px;
margin:0 auto;
min-width:654px;
position:relative;
width:654px;
}

.page {
height:308px;
margin:17px 9px 10px;
overflow:hidden;
padding:10px;
position:absolute;
width:612px;
}

/** SANDBAGS **/

span.sandbag {
display:block;
clear:right;
float:right;
}

.sbA {
height:52px;
width:184px;
}

.sbB {
height:72px;
width:190px;
}

.sbC {
height:15px;
width:184px;
}

.sbD {
height:30px;
width:174px;
}

.sbE {
height:12px;
width:152px;
}

.sbF {
height:10px;
width:174px;
}

.sbG {
height:14px;
width:194px;
}

.sbH {
height:10px;
width:204px;
}

.sbI {
height:20px;
width:220px;
}

.sbJ {
height:22px;
width:230px;
}

.sbK {
height:38px;
width:240px;
}

.sbL {
height:14px;
width:98px;
}

/** PAGE ELEMENTS **/
.page p {
margin:1em 0;
}


.quote-mark {
font-family:'Palatino Linotype',Palatino,Georgia,Utopia,serif;
font-size:1.5em;
font-style:normal;
line-height:.25em;
}
/** ICONS **/

a.linkedin,
#contact-list li a,
#cv-list li a,
#cv-ref-list li a,
#network-list li a,
#skill-list li {
background-image:url(/img/sprites.png);
background-repeat:no-repeat;
padding:2px 0 2px 20px;
}

#skill-list li {
padding:0 0 0 20px;
}

#contact-list li,
#cv-list li,
#cv-ref-list li,
#network-list li,
#skill-list li {
height:16px;
line-height:16px;
margin:1em 0;
}

#contact-list li a:focus,
#contact-list li a:hover,
#cv-list li a:focus,
#cv-list li a:hover,
#cv-ref-list li a:focus,
#cv-ref-list li a:hover,
#network-list li a:focus,
#network-list li a:hover {
text-decoration:none;
}

a.blog,
li.blog a {
background-position:-654px -16px;
}

a.blog:focus,
a.blog:hover,
li.blog a:focus,
li.blog a:hover {
background-position:-654px 0px;
}

a.delicious,
li.delicious a {
background-position:-654px -48px;
}

a.delicious:focus,
a.delicious:hover,
li.delicious a:focus,
li.delicious a:hover {
background-position:-654px -32px;
}

a.facebook,
li.facebook a {
background-position:-654px -80px;
}

a.facebook:focus,
a.facebook:hover,
li.facebook a:focus,
li.facebook a:hover {
background-position:-654px -64px;
}

a.friendfeed,
li.friendfeed a {
background-position:-654px -112px;
}

a.friendfeed:focus,
a.friendfeed:hover,
li.friendfeed a:focus,
li.friendfeed a:hover {
background-position:-654px -96px;
}

a.last-fm,
li.last-fm a {
background-position:-654px -144px;
}

a.last-fm:focus,
a.last-fm:hover,
li.last-fm a:focus,
li.last-fm a:hover {
background-position:-654px -128px;
}

a.linkedin,
li.linkedin a {
background-position:-654px -176px;
}

a.linkedin:focus,
a.linkedin:hover,
li.linkedin a:focus,
li.linkedin a:hover {
background-position:-654px -160px;
}

a.pip-io,
li.pip-io a {
background-position:-654px -208px;
}

a.pip-io:focus,
a.pip-io:hover,
li.pip-io a:focus,
li.pip-io a:hover {
background-position:-654px -192px;
}

a.spotify,
li.spotify a {
background-position:-654px -240px;
}

a.spotify:focus,
a.spotify:hover,
li.spotify a:focus,
li.spotify a:hover {
background-position:-654px -224px;
}

a.stumbleupon,
li.stumbleupon a {
background-position:-654px -272px;
}

a.stumbleupon:focus,
a.stumbleupon:hover,
li.stumbleupon a:focus,
li.stumbleupon a:hover {
background-position:-654px -256px;
}

a.twitter,
li.twitter a {
background-position:-654px -304px;
}

a.twitter:focus,
a.twitter:hover,
li.twitter a:focus,
li.twitter a:hover {
background-position:-654px -288px;
}

a.vcard,
li.vcard a {
background-position:-654px -336px;
}

a.vcard:focus,
a.vcard:hover,
li.vcard a:focus,
li.vcard a:hover {
background-position:-654px -320px;
}

a.skype,
li.skype a {
background-position:-654px -368px;
}

a.skype:focus,
a.skype:hover,
li.skype a:focus,
li.skype a:hover {
background-position:-654px -352px;
}

a.email,
li.email a {
background-position:-654px -400px;
}

a.email:focus,
a.email:hover,
li.email a:focus,
li.email a:hover {
background-position:-654px -384px;
}

a.mobno,
li.mobno a {
background-position:-655px -432px;
}

a.mobno:focus,
a.mobno:hover,
li.mobno a:focus,
li.mobno a:hover {
background-position:-655px -416px;
}

a.doc,
li.doc a {
background-position:-654px -464px;
}

a.doc:focus,
a.doc:hover,
li.doc a:focus,
li.doc a:hover {
background-position:-654px -448px;
}

a.pdf,
li.pdf a {
background-position:-654px -496px;
}

a.pdf:focus,
a.pdf:hover,
li.pdf a:focus,
li.pdf a:hover {
background-position:-654px -480px;
}

a.odt,
li.odt a {
background-position:-654px -528px;
}

a.odt:focus,
a.odt:hover,
li.odt a:focus,
li.odt a:hover {
background-position:-654px -512px;
}

#skill-list li {
background-position:-654px -544px;
}

/** LISTS **/

#skill-list {
margin:2em;
}

#skill-list li {
position:relative;
width:140px;
}

#skill-list li.adobe {
margin-top:-10.4em;
}

#skill-list li.adobe,
#skill-list li.flash,
#skill-list li.wordpress,
#skill-list li.facebook {
margin-left:20em;
}

#network-list {
margin:4.2em 4.5em;
width:340px;
}

#network-list li {
position:relative;
margin:2.5em 0;
width:150px;
}

#network-list li.linkedin {
margin-top:-20.5em;
}

#network-list li.linkedin,
#network-list li.pip-io,
#network-list li.spotify,
#network-list li.stumbleupon,
#network-list li.twitter {
margin-left:21em;
}

#sandbox-list {
list-style:disc outside;
margin:1em 2em;
}

#sandbox-list li {
margin:.5em 0;
}

#contact-list {
margin:1.5em 5.5em 2em;
width:340px;
}

#contact-list li a em {
display:none;
}

#contact-list li {
position:relative;
width:150px;
}

#contact-list li.email {
margin-top:-5.2em;
}

#contact-list li.email,
#contact-list li.mobno,
#contact-list li.gwave {
margin-left:20em;
}

#cv-list,
#cv-ref-list {
margin:1.5em 0 2em;
}

/** FOOTER **/

#ftr {
bottom:-1em;
color:#ccc;
font-size:1em;
font-weight:400;
height:1.2em;
margin:0 auto;
padding:0 .5em 0 0;
position:absolute;
right:.5em;
text-align:right;
text-transform:lowercase;
white-space:nowrap;
width:auto;
}

#ftr li {
display:inline;
margin:0 -.3em 0 0;
padding:0 .5em;
}

#ftr li:first-child {
border-left:0;
}

#ftr a {
color:#ccc;
display:inline-block;
height:1.2em;
}

#ftr a:focus,
#ftr a:hover {
text-decoration:none;
border-bottom:.1em solid #999;
}

#copyright {
color:#999;
display:block;
font-weight:700;
left:-4.2em;
position:absolute;
top:-3.5em;
}

#copyright a {
color:#999;
}

#copyright a:focus,
#copyright a:hover {
text-decoration:none;
border-bottom:.1em solid #999;
}

#valid-css {
border-left:.1em solid #ccc;
}

/** ERROR PAGES **/
#error h1 {
color:#a4a8bf;
font-size:180px;
line-height:290px;
position:absolute;
}

#error p {
color:#a4a8bf;
position:absolute;
text-align:center;
top:70%;
width:400px;
}

/** TWITTER **/
#twitter {
height:91px;
left:50%;
margin:0 0 0 -318px;
position:absolute;
top:-70px;
width:632px;
}

#twitter blockquote {
-moz-border-radius:10px;
background:#fff;
border:1px solid #ccc;
border-radius:10px;
float:right;
height:40px;
margin:0 30px 0 0;
padding:4px 8px;
position:relative;
width:160px;
/**/display:none;/**/
}

#twitter blockquote em {
bottom:4px;
display:block;
font-size:.8em;
position:absolute;
right:8px;
}

#twitter blockquote span {
background:url(/img/sprites.png) 0px -387px no-repeat;
bottom:-18px;
display:block;
height:19px;
position:absolute;
right:12px;
width:25px;
}

#twitter a.bird {
background:url(/img/sprites.png) 0px -359px no-repeat;
bottom:0px;
display:block;
height:29px;
overflow:hidden;
position:absolute;
right:0px;
text-indent:-9999em;
width:37px;
}