﻿* 
{
    margin: 0;
    padding: 0;
    outline: 0;
    border: 0;
    vertical-align: baseline;
}
table
{
    border-spacing: 0;
    border-collapse: collapse;
}
td, th
{
    padding: 0;
}
ul, ol 
{ 
    list-style: none;
}
html
{
    overflow-y: scroll;
}
body 
{
    font-family: Arial;
    font-size: 12px;
    color: #1B1B1B;
}
a 
{
    color: #005c5d;
    text-decoration: none;
}
a:hover  
{
    text-decoration: underline;
}
h1 { font-size: 19px; }
h2 { font-size: 16px; }
h3  
{
    color: #1b1b1b;
    font-size: 18px; 
    font-weight: normal; 
}

p
{
    margin: 3px 0px;
}

div#page 
{
    width: 950px;
    margin: 0px auto;
    overflow: hidden;
    padding-top: 10px;
    padding-bottom: 50px;
}
#main { min-height: 500px; }

div#column-left 
{
    float: left;
    padding-top: 21px;
    width: 170px;
}
h1.logo-holder 
{
    height: 61px;
}

h1.logo-holder a { display: block; }
div#content 
{
    float: right;
    width: 770px;
}

ul#options  
{
    color: #7e7f7f; 
    height: 21px;
    text-align: right;
    font-size: 11px;
}
ul#options li 
{
    display: inline;
}
ul#options a
{
    color: #7e7f7f;
    font-size: 11px;
}
#options .dotted  
{
    background: url(../img/iconset-1.png) left -71px no-repeat;
    padding-left: 7px; 
    margin-left: 3px;
}
ul#navigation 
{
    background: url(../img/mypipeno-menu.png) left top no-repeat;
    height: 27px;
    margin-bottom: 20px;
    padding: 14px 18px 0px;
    overflow: hidden;
}
ul#navigation li 
{
    float: left;
    margin-right: 15px;
}
ul#navigation a 
{
    display: block;
    height: 15px;
}

ul#navigation img.hover { display: none; }
ul#navigation a:hover img.default, ul#navigation a.active img.default { display: none; }
ul#navigation a:hover img.hover, ul#navigation a.active img.hover { display: inline; }

div.details-status { margin-bottom: 10px; }
div.details-status div.top 
{
    background: url(../img/bkg-box-blue.png) left top no-repeat;
    padding-top: 6px;
}
div.details-status div.bottom
{
    background: url(../img/bkg-box-blue.png) -357px bottom no-repeat;
    padding-bottom: 6px;
}
div.details-status div.content
{
    background: url(../img/bkg-box-blue.png) -179px top repeat-y;
    overflow: hidden;
    padding: 5px 20px;
}
div.details-status p { margin: 0px; }
div.details-status a.back-to
{
    display: block;
    color: #1b1b1b;
}
div.details-status a.back-to:hover { text-decoration: none; }
div.details-status a.back-to span { display: block; } 
div.details-status a.back-to span.row1 
{
    background: url(../img/iconset-1.png) left -104px no-repeat;
    padding-left: 10px;
}
div.details-status a.back-to span.row2 { font-weight: bold; }

div.settings { margin-bottom: 10px; }
div.settings div.top
{
    background: url(../img/bkg-box-grey.png) left top no-repeat;
    padding-top: 6px;
}
div.settings div.bottom
{
    background: url(../img/bkg-box-grey.png) -360px bottom no-repeat;
    padding-bottom: 6px;
}
div.settings div.content 
{
    background: url(../img/bkg-box-grey.png) -180px top repeat-y;
    min-height: 80px;
    padding: 0px 13px;
}
div.settings h2 { margin-bottom: 5px; }
div.settings a { color: #1b1b1b; }
div.settings a:hover,div.settings a.active { color: #005c5d; text-decoration: none; }

ul.infos { padding-left: 10px; }
ul.infos li { margin-bottom: 3px; }

.error-alert 
{
    color: #d55f5f;
    font-weight: bold;
}

/************************ FORM ELEMENTS ****************************/
form
{
    margin-top: 15px;
}
form label 
{
    display: block;
    margin-bottom: 3px;
}
form span.require { color: #ff0000; }

form input[type="text"], 
form input[type="password"]
{
    background: transparent;
    border: 0px none;
    line-height: 18px;
    height: 17px;
    padding: 7px 0px;
    width: 100%;
}
div.bold input[type="text"] { font-weight: bold; } 

form .spacer { margin-bottom: 10px; }
form fieldset  
{
    border-bottom: 1px solid #e1e1e1; 
    margin-bottom: 10px;
    min-height: 380px; 
}
.text.focus { background-position: left top; }
.text.error { background-position: left -62px; } 

div.formfield 
{
    overflow: visible;
    position: relative;
    margin-bottom: 10px;
}
div.input { width: 360px; margin-bottom: 10px; }
div.formfield div.input
{
    margin-bottom: 0px;
}
div.input div
{
    background-image: url(../img/form-textfield.png);
    height: 31px; 
}
div.input div.left  { background-position: left -93px; background-repeat: no-repeat; padding-left: 6px; }
div.input div.right { background-position: right -155px; background-repeat: no-repeat; padding-right: 6px; }
div.input div.content { background-position: left -124px; background-repeat: repeat-x; padding-right: 6px; }

div.focus div.left  { background-position: left top; padding-left: 6px; }
div.focus div.right { background-position: right -62px; padding-right: 6px; }
div.focus div.content { background-position: left -31px; background-repeat: repeat-x; padding-right: 6px; }

div.error div.left  { background-position: left -186px; padding-left: 6px; }
div.error div.right { background-position: right -248px; padding-right: 6px; }
div.error div.content { background-position: left -217px; background-repeat: repeat-x; padding-right: 6px; }

div.textarea { margin-bottom: 10px; }
div.textarea div.top div,
div.textarea div.bottom div { background-image: url(../img/form-textarea-1.png); background-repeat: no-repeat; }
div.textarea div.top div.left { background-position: left top; padding-left: 6px; }
div.textarea div.top div.right { background-position: right -12px; padding-right: 6px; }
div.textarea div.top div.middle
{
    background-position: left -24px;
    background-repeat: repeat-x;
    height: 6px;
} 
div.textarea div.content div.left  
{
    background: url(../img/form-textarea-2.png) left top repeat-y;
    padding-left: 6px; 
}
div.textarea div.content div.right  
{
    background: url(../img/form-textarea-3.png) right top repeat-y;
    padding-right: 6px; 
}
div.textarea div.content div.middle
{
    background: url(../img/form-textarea-fill.png) left top repeat;
    padding: 4px;
}
div.textarea div.bottom div.left { background-position: left -6px; padding-left: 6px; }
div.textarea div.bottom div.right { background-position: right -18px; padding-right: 6px; }
div.textarea div.bottom div.middle  
{
    background-position: left -30px;
    background-repeat: repeat-x;
    height: 6px;
}

div.textarea textarea { background: none; font-family: Arial; font-size: 12px; }
div#quote { width: 292px; }
div#quote textarea { width: 272px; height: 60px; }
div#about-me { width: 386px; }
div#about-me textarea { width: 366px; height: 90px; }

span.rsp
{
    display: block;
    height: 16px;
    left: 368px;
    position: absolute;
    top: 24px;
    width: 16px;
}
span.rsp.valid 
{
    background: url(../img/buttons-16x16.png) -176px top no-repeat;
}
span.rsp.exclamation
{
    background: url(../img/buttons-16x16.png) -192px top no-repeat;
    padding-left: 22px;
    width: auto;
}

div.tooltip-error  
{
    position: absolute;
    left: 370px;
    top: 8px;
    width: 480px;

}
div.tooltip-error div { background-image: url(../img/tooltip-error.png); height: 51px; }
div.tooltip-error div.left 
{
    background-position: left top;
    background-repeat: no-repeat;
    padding-left: 16px;    
}
div.tooltip-error div.right 
{
    background-position: right -102px;
    background-repeat: no-repeat;
    padding-right: 16px;    
}
div.tooltip-error div.content
{
    background-position: right -51px;
    line-height: 17px;
    height: 41px;
    padding: 10px 0px 0px 5px;
}

div.checkbox { margin: 10px 0px; }
div.checkbox a.box
{
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    margin-top: 1px;
    background: url('../img/form-boxes.png') -13px top no-repeat;
}
div.checkbox.checked a { background-position: -13px -13px; }
div.checkbox.disabled { color: #dddddd; }
div.checkbox.disabled a { background-position: -13px -26px; }
div.checkbox.checked.disabled a { background-position: -13px -39px; }

ul.radio li { margin: 10px 0px; }
ul.radio a
{
    display: block;
    float: left;
    width: 13px;
    height: 13px;
    margin-right: 5px;
    margin-top: 1px;
    background: url('../img/form-boxes.png') no-repeat;
}
ul.radio .selected a { background-position: 0 -13px; }
ul.radio .disabled { color: #dddddd; }
ul.radio .disabled a { background-position: 0 -26px; }
ul.radio .selected.disabled a { background-position: 0 -39px; }


div.pipeno-combobox-decorator-left 
{
    background: #fff url(../img/form-combobox-corners.png) no-repeat left top; 
    padding-left: 5px;
}
div.pipeno-combobox-decorator-right
{
    background: #fff url(../img/form-combobox-corners.png) no-repeat right -31px; 
    padding-right: 5px;
}
div.pipeno-combobox
{
    position: relative;
    height: 31px;
    padding-left: 8px;
    border: 0;    
    line-height: 31px;
    cursor: pointer;
    background: #fff url(../img/form-combobox-fill.png) no-repeat center right; 
}
div.pipeno-combobox ul
{
    display: none;
    position: absolute;
    z-index: 101;
    left: 0px;
    top: 31px;
    width: 100%;
    height: 150px;
    border: 1px solid #dcdcdc;
    border-top: none;
    overflow: auto;
    background: #fff;
}
div.pipeno-combobox ul li
{
    display: block;
    height: 30px;
    overflow: hidden;
    padding-left: 8px;
    line-height: 30px;
    cursor: pointer;
}
div.pipeno-combobox ul li:hover
{
    color: #ffffff;
    background-color: #5f5f5f;
}

/*******************************************************************/

.button, .button span  
{
    background-image: url(../img/form-button.png); 
    height: 35px; 
    line-height: 35px; 
    cursor: pointer;
}
.button
{
    background-position: left top;
    background-repeat: no-repeat;
    display: inline-block;
    font-size: 15px;
    font-weight: bold;
    color: #1b1b1b;
    width: 87px;
    text-align: center;
    padding-left: 6px;
}
.button:hover { text-decoration: none; }
.button .right  
{
    background-position: right -70px;
    background-repeat: no-repeat;
    padding-right: 6px;
    display: block;
}
.button .content
{ 
    background-position: left -35px;
    display: block;
}



/************************ GENERAL ELEMENTS *************************/
a.delete-btn 
{
    background: url(../img/icons.png) left top no-repeat;
    display: block;
    height: 18px;
    width: 18px;
    text-indent: -2000px;
}

span.icon 
{
    background-image: url(../img/buttons-16x16.png);
    background-repeat: no-repeat;
    display: block;
    height: 16px;
    width: 16px;
    float: left;
    margin-right: 5px;
}
span.aol { background-position: left top; }
span.skype { background-position: -16px top; }
span.gtalk { background-position: -32px top; }
span.yahoo { background-position: -48px top; }
span.fb { background-position: -64px top; }
span.myspace { background-position: -80px top; }
span.twitter { background-position: -96px top; }
span.wordpress { background-position: -112px top; }
span.blogger { background-position: -128px top; }
span.flickr { background-position: -144px top; }
span.inlink { background-position: -160px top; }
/*******************************************************************/

div.action-tooltip-form 
{
    top: 14px;
    left: -20px;
    position: relative;
    display: none;
    max-width: 150px;    
}
div.action-tooltip-form > div.content
{    
    padding: 5px;
    border: 1px solid #DEDEC3;
    background-color: #FAF7CD;
    min-height: 10px;
    font-size: 10px;
}
div.action-tooltip-form > div.tip
{
    position: absolute;
    left: 20px;
    top: -8px;
    width: 11px;
    height: 17px;
    background: url(../img/tooltip-small-bottom-tip.png) no-repeat;
}


/************************************ GENERAL FACE **********************************/
ul.general-options 
{
    text-align: right;
    margin-bottom: 5px;
}
ul.general-options li
{
    display: inline;
    color: #7E7F7F;
    font-size: 11px; 
}
ul.general-options li.dotted {
    background: url(../img/iconset-1.png) left -71px no-repeat;
    padding-left: 7px; 
    margin-left: 3px;
}
ul.general-options li a  
{
    color: #7E7F7F;
    font-size: 11px; 
}

ul#top-bar  
{
    background: url(../img/top-bar.png) left top no-repeat; 
    height: 41px;
    margin-bottom: 10px;
    overflow: hidden;
}
ul#top-bar li
{
    float: left;
    line-height: 20px;
    margin-right: 15px;
    margin-top: 13px;
}
ul#top-bar li.logo { margin-top: 0px; }
ul#top-bar li.logo a  
{
    display: block;
    height: 41px;
    text-indent: -2000px;
    width: 343px; 
}
ul#top-bar img { vertical-align: top; } 
ul#top-bar img.hover { display: none; }
ul#top-bar a:hover img.default { display: none; }
ul#top-bar a:hover img.hover  
{
    display: inline; 
    margin-top: -2px;
}

div.sidebar 
{
    float: left;
    margin-bottom: 10px;
    width: 290px;
}
div.sidebar h1.title
{
    background: url(../img/bkg-sidebar-title.png) left top no-repeat;
    line-height: 64px;
    height: 64px;
    padding: 0px 20px;
}
div.sidebar ul { padding-left: 10px; }
div.sidebar li 
{
    list-style-position: outside;
    list-style-type: disc;
    line-height: 24px;
    margin-left: 23px;
}
div.sidebar.support h1.title { margin-bottom: 10px; }
div.sidebar.support li.subtitle, div.sidebar.support li.how-to-write  
{
    list-style-type: none; 
    overflow: hidden;
}
div.sidebar.support li.subtitle { margin-left: 10px; }

div.sidebar.support a { color: #1b1b1b; }
div.sidebar.support, div.sidebar.support a { color: #0f5051; }
div.sidebar.support li.how-to-write 
{
    color: #1b1b1b;
    margin-bottom: 5px;
    margin-left: 0px;
    width: 270px;
}
div.sidebar li.how-to-write div.left 
{
    background: url(../img/form-textfield.png) left top no-repeat;
    padding-left: 6px;
}
div.sidebar li.how-to-write div.right
{
    background: url(../img/form-textfield.png) right -62px no-repeat;
    padding-right: 6px;
}
div.sidebar li.how-to-write div.content
{
    background: url(../img/form-textfield.png) left -31px repeat-x;
    padding: 0px 2px 0px 5px;
    height: 31px;
}
div.sidebar.support li.how-to-write span  
{
    float: left; 
    display: block;
    line-height: 31px;
}
div.sidebar.support li.how-to-write a { float: right; }
div.sidebar.support li.how-to-write img  
{
    margin-top: 8px;
    vertical-align: middle; 
}


.main-column 
{
    float: right;
    width: 650px;
}
.main-column.features-list h1
{
    background: url(../img/bkg-blue-title.png) left top no-repeat;
    line-height: 64px;
    height: 64px;
    padding: 0px 20px;
    margin-bottom: 10px;
}
.main-column.features-list li { margin-bottom: 10px; }
.main-column div.description div.top
{
    background: url(../img/bkg-grey-box.png) left top no-repeat;    
    padding-top: 5px;
}
.main-column div.description div.bottom
{
    background: url(../img/bkg-grey-box.png) -1320px bottom no-repeat;    
    padding-bottom: 5px;
}
.main-column div.description div.content
{
    background: url(../img/bkg-grey-box.png) -660px bottom repeat-y;
    padding: 0px 20px 10px;
    overflow: hidden;
}
.main-column div.description div.content h2  
{
    margin-top: 10px;
    line-height: 24px; 
}
.main-column div.description div.content p
{
    line-height: 19px;
    margin: 0px;
}
.main-column div.description div.content ul 
{
    padding-left: 10px;
    list-style-position: inside;
    list-style-type: disc;
}

.main-column.support-list
{
    padding-top: 71px;
}
.main-column.support-list li { margin-bottom: 10px; }
.main-column.support-list li a.title 
{
    color: #0f5051;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
}
.main-column.support-list li p
{
    line-height: 19px;
}


div#presentation-video { margin-bottom: 10px; }

div.presentation-bar 
{
    background: url("../img/pipeno-header-background.png") left top;
    height: 64px;
    overflow: hidden;
    margin-bottom: 10px;
}
div.presentation-bar div.text
{
    float: left;
    padding: 15px 0px 0px 20px;
}
div.presentation-bar div.text h1 { margin-bottom: 7px; }
div.presentation-bar a.button-launch { float: right; }
div.presentation-bar ul  
{
    overflow: hidden; 
    margin-left: 3px;
}
div.presentation-bar ul li  
{
    float: left; 
    margin-right: 10px;
}
div.presentation-bar ul a  
{
    background: url(../img/dots.png) left -7px no-repeat;
    display: block;
    height: 7px;
    width: 7px;
}
div.presentation-bar ul a:hover,  
div.presentation-bar ul a.active 
{ 
    background-position: left top;
}


div.tips-and-tricks
{
    background: url(../img/bkg-tips-and-tricks.png) left top no-repeat;
    height: 222px;
    overflow: hidden;
    padding: 16px 20px 0px;
    margin-bottom: 10px;
}
div.tips-and-tricks div.col1 
{
    float: left;
    width: 430px;
}
div.tips-and-tricks div.col2
{
    float: right;
    width: 430px;
}
div.tips-and-tricks h1  
{
    color: #242424; 
    margin-bottom: 5px;
}
div.tips-and-tricks p { color: #1b1b1b; }
div.tips-and-tricks a  
{
    color: #040404; 
    font-size: 11px;
}
div.tips-and-tricks p.read-more { margin-bottom: 10px; }

div#footer 
{
    border-top: 1px solid #dddddd;
    padding: 15px 0px 0px 120px;
    overflow: hidden;
}
div#footer ul  
{
    float: left; 
    margin-right: 15px;
    width: 180px;
}
div#footer li { line-height: 18px; }
div#footer li.title  
{
    color: #1b1b1b; 
    
}
div#footer a 
{
    color: #7b7b7b;
}


/************************************************************************************/


.hide-info  
{
    background: url(../img/iconset-1.png) right -89px no-repeat; 
    padding-right: 10px;
}

div.reg-header { overflow: hidden; }
div.reg-header #logo-holder 
{
    float: left;
}
div.reg-header #options { margin-top: 10px; }

.float-area { overflow: hidden; }
.display-inline { display: inline; }
.margin-bottom-10 { margin-bottom: 10px !important; }

h1.blue-theme 
{
    background: url(../img/pipeno-header-background.png) left top no-repeat;
    line-height: 64px;
    height: 64px;
    padding: 0px 20px;
    font-weight: normal;
    font-size: 18px;
}

div#main.single { padding: 10px 20px; }
form fieldset.no-min { min-height: 0px; }
form.register .input { width: 360px; }
.button.register { width: 203px; }
div.captcha div.input { width: 62px; }
.expl { color: #7B7B7B; font-size: 10px; margin-bottom: 0px; }

ul.gender { overflow: hidden; margin-bottom: 10px; }
ul.gender li { float: left; margin: 0px 20px 0px 0px; }

ul.used-on li a
{
    background: url(../img/iconset-1.png) left -55px no-repeat;  
    color: #1B1B1B;
    padding-left: 10px;
}
ul.used-on li a:hover 
{
    background-position: left -43px;
    color: #005C5D;
    text-decoration: none;
}


span.pipeno-domain 
{
    font-weight: bold;
    float: left;
}