/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* common styles
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

body
{
text-align: center;
margin: 0px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
background: #E5E5E5 url(images/bg.gif);
}

a
{
color: #0000ff;
}

p
{
margin: 0px;
}

.p-sl
{
margin: -5px 0px 5px 10px;
}

h1
{
text-align:center;
font-family: "Trebuchet MS", Verdana, Arial;
font-size: x-large;
color: #000066;
margin: 5px;
}

h2
{
font-family: "Trebuchet MS", Verdana, Arial;
font-size: x-large;
color: #3366FF;
margin: 10px 0px 0px 0px;
clear: both;
}

.h2-sl
{
margin: 0px 0px 0px 10px;
}

.h2-input
{
font-family: "Trebuchet MS", Verdana, Arial;
font-size: x-large;
font-weight: bold;
color: #3366FF;
margin: 10px 0px 0px -10px;
width: 100%;
}

a.h2link:link, a.h2link:visited, a.h2link:active
{
color: #3366FF;
text-decoration: none;
}

a.h2link:hover
{
color: #3366FF;
text-decoration: underline;
}

h3
{
font-family: "Trebuchet MS", Verdana, Arial;
font-size: medium;
color: #000066;
margin: 10px 0px 0px 0px;
clear: both;
}

h3.edit
{
margin: 0px;
}

ul
{
margin: 0px;
padding-left: 20px;
list-style-image: url(images/bullet.gif);
list-style-type: circle
}

li
{
margin-bottom: 4px;
}

ul.inline
{
margin: 0px;
padding: 0px;
}

ul.inline li
{
display: inline;
}

img
{
border: 0px;
}

textarea
{
width: 98%;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}

select
{
margin: 2px 0px 2px 0px;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: small;
}

.textinput
{
width: 98%;
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: small;
}

div.button
{
width: 50%;
margin: 20px auto 30px auto;
clear: both;
}

input.button
{
width: 100%;
background-color: #3366FF;
color: #FFFFFF;
font-weight: bold;
}

.label
{
font-weight:bold;
color: #000066;
}

.hlight
{
background-color: #FFFF99;
}

.hlight-pad
{
background-color: #FFFF99;
padding: 3px;
}

.hlight-pad-part
{
width: 50%;
background-color: #FFFF99;
padding: 3px;
}

.blank-part
{
width: 50%;
padding: 3px;
}

.guidance
{
width: 40%;
clear: both;
float: right;
margin-left: 10px;
margin-right: 10px;
background-color: #EBF6FD;
padding: 3px;
}

.guidance-full
{
width: 510px;
background: #FFFF99 url(images/guidance-bottom-curves.gif) no-repeat bottom left;
margin: 50px 20px -20px 40px;
padding: 0px 0px 35px 0px;
}

.guidance-full p
{
padding-right: 15px;
padding-bottom: 10px;
padding-left: 15px;
}

.guidance-first
{
font-family: "Trebuchet MS", Verdana, Arial;
font-size: medium;
font-weight: bold;
color: #000066;
background: url(images/guidance-top-curves.gif) no-repeat top left;
padding-top: 10px;
}

.no-bg-image
{
background-image: none;
}

.savelink, .editlink
{
width: 50px;
padding:4px 0px 4px 14px;
position: relative;
bottom: 15px;
left: 86%;
background: url(images/edit-tab.gif) no-repeat bottom left;
}

.editlink
{
padding-left: 17px;
}

.savelink a
{
color: #FF0000;
}

input.savebtn {
padding: 0px;
vertical-align: baseline;
border: 0;
height: 22px;
width: 60px;
background: url(images/edit-tab.gif) no-repeat bottom left;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
text-decoration: underline;
color: #FF0000;
position: relative;
bottom: 15px;
left: 86%;
cursor: hand;
}

.delete-checkbox
{
float:right;
margin: 2px;
}

#add-delete
{
clear: both;
margin-top: 40px;
margin-bottom: 25px;
}

.active
{
font-weight: bold;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* layout 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */


#page,#header,#headercontent,#navigation,#content,#panelleft,#panelright,#footer
{
overflow:hidden;
}

#header
{
min-width:970px;
background-color: #ffffff;
}

#page,#headercontent,#navcontent
{
width:930px;
padding-left: 20px;
padding-right: 20px;
margin-left: auto;
margin-right: auto;
text-align:left;
}

#page
{
background-color: #ffffff;
border-right: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
border-left: 1px solid #aaaaaa;
}

#logo
{
float:left;
margin-right: 115px;
}

#search
{
margin-top: 25px;	
}

#toprightnav
{
float:right;
margin-top: 24px;
margin-right:10px;
}

#navigation
{
min-width:960px;
padding: 4px 5px 9px 5px;
background: #3366FF url(images/nav-fade.gif) repeat-x top;
border-bottom: 1px solid #000066;
}

#navcontent
{
text-align: left;
color: #000066;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
margin-top: 5px;
}

#navcontent a
{
color: #FFFFFF;
font-weight: bold;
padding: 0px 5px 0px 5px;
}

#panelleft,#panelright
{
width:230px;
background: #EBF6FD url(images/panel-top-curves.gif) no-repeat top;
padding-bottom: 10px;
}

#panelleft
{
float:left;
margin-right: 15px;
}

#panelright
{
float:right;
margin-left: 15px;
}

#panelright p,#panelleft p
{
padding: 5px 10px 5px 10px;
}

#panelright hr, panelleft hr
{
border: none 0;
border-bottom: 1px dashed #aaaaaa;
height: 1px;
}

#content
{
padding: 5px 30px 5px 30px;
}

.thin
{
width: 65%;
margin-left: auto;
margin-right: auto;
}

#content.left /* used by content div when a side panel on page too, this fixes float issue in chrome*/
{
float: left;
}

#footer
{
clear:both;
border-top: 1px dashed #aaaaaa;
margin-top: 40px;
margin-bottom: 20px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
padding-top: 15px;
}

#bookmarks
{
float: right;
}

#photo
{
text-align: center;
margin: 10px 10px 5px 10px;
}

#photo img
{
border: 1px solid #aaaaaa;
}

#photo-text
{
text-align: center;
margin: 0px 2px 5px 2px;
}

#pagenav
{
border-bottom: 1px dashed #aaaaaa;
margin: 0px 0px 20px 0px;
padding: 5px 0px 10px 0px;
}

#pagenavbottom
{
border-top: 1px dashed #aaaaaa;
margin-top: 20px;
padding: 10px 0px 5px 0px;
}

#pagenav p
{
margin-top: 4px;
margin-bottom: 4px;
}

#pagenavpanel
{
float: right;
width: 180px;
text-align: center;
border-left: 1px dashed #aaaaaa;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* search page
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.search-suggest
{
font-style: italic;
margin-top: 5px;
margin-bottom: 5px;
}

.search-result
{
margin: 5px 0px 25px 0px;
}

.search-result-sub
{
padding-top: 5px;
}

.search-result-sub, .search-result-sub a
{
color: #555555;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* editable boxes - resources, contacts, groups etc 
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.box, div.box-edit
{
clear: left;
padding: 10px;
margin-top: 15px;
}

div.box-edit
{
border: 1px solid #aaaaaa;
}

.box-thumb
{
padding-right: 10px;
padding-left: 10px;
float: left;
}

.box-thumb-img
{
border: 1px solid #aaaaaa;
}

p.box, img.box
{
margin: 10px 0px 0px 0px;
}

/* hierarchy views	*/

.box-hier
{
margin-left: 40px;
clear: both;
background: url(images/bluepx.gif) repeat-y top left;
padding: 10px 0px 10px 1px;
}

.box-thumb-hier
{
padding-right: 10px;
padding-left: 10px;
float: left;
background: url(images/blueangle.gif) no-repeat top left;
}

div.box-edit-hier
{
margin-left: 40px;
clear: both;
background: url(images/bluepx.gif) repeat-y top left;
padding: 10px 0px 0px 10px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* skills log page
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

.skillrow
{
clear: left;
float: left;
margin: 0px 0px 0px 40px;
border-left: 1px solid #aaaaaa;
}

.skill, .skillselected, .skillselectedro
{
float: left;
width: 100px;
height: 18px;
text-align: center;
border-right: 1px solid #aaaaaa;
padding: 2px 0px 2px 0px;
}

.skill
{
background-color: #FFFF99;
}

.skillselected
{
background-color: #FFFF4D;
}

.skillselectedro
{
background: #FFFF4D url(images/tick-blue.gif) no-repeat center center;
}

.skillkeyrow
{
clear: left;
float: left;
margin: 5px 0px 0px 40px;
border-left: 1px solid #aaaaaa;
}

.skillkey
{
float: left;
width: 100px;
background-color: #FFFF99;
text-align: center;
border-right: 1px solid #aaaaaa;
border-bottom: 1px solid #aaaaaa;
}

#title-keyskill-row /*  the checkbox asking if a key skill */
{
margin-left: -10px;
}

select.skilllink
{
margin: 0px 2px 0px 2px;
width: 40%;
float:left;
}

div.skilllink
{
width: 14%;
margin-top: 15px;
text-align: center;
float:left;
}

div.edit-dates
{
margin: 5px 0px 0px 20px;
}

select.edit-dates, input.edit-dates
{
vertical-align: middle;
}

div.res-links
{
margin-top: 5px;
}

div.res-images
{
width: 42%;
float: left;
border-top: 1px solid #aaaaaa;
padding-top: 5px;
margin-top: 15px;
margin-right: 2%;
}

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

.skill-icon
{
margin-top: 5px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* home page
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

h1.home
{
width: 380px;
text-align: left;
margin: 5px;
}

h2.home, label.home
{
font-family: "Trebuchet MS", Verdana, Arial;
font-size: x-large;
font-weight: bold;
color: #3366FF;
margin: 5px 5px 5px 0px;
}

#about
{
float: left;
width: 850px;
margin: 30px 30px 20px 30px;
padding: 10px;
background: #FFFF99 url(images/home-about-curves-full.gif) no-repeat top;
}

#about ul
{
float: left;
width: 420px;
margin-top: 10px;
margin-bottom: 10px;
}

#about li
{
padding-right: 25px;
}

#about a
{
color: #000000;
text-decoration: none;
}

li.current
{
background: #ffffff;
}

#img_container
{
float: right;
width: 400px;
margin: 10px 10px 10px 0px;
display: inline; /*  ie6 double margin bug fix */
}

#what-can-others, #examples
{
clear: left;
float: left;
width: 400px;
margin: 0px 0px 30px 30px;
padding: 5px 10px 0px 10px;
}

#what-can-you, #popular
{
float: right;
width: 400px;
margin: 0px 30px 25px 0px;
padding: 5px 10px 10px 10px;
}

#what-can-you
{
background: #EBF6FD url(images/home-what-can-you-curves.gif) no-repeat top;
}


/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* account management
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

div.privacy
{
background-color: #FFFF99;
text-align: right;
padding: 3px 10px 3px 10px;
margin-top: 5px;
}

div.privacy p
{
width: 50%;
float: left;
text-align: left;
font-style: italic;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
/* misc
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

#feedback
{
width: 25px;
height: 100px;
display: block;
position:fixed;
left: 0px;
top: 135px;
background: url(images/feedback.gif) no-repeat top left;
}