Merge branch 'feature-newstyles' into release-0.13
[snf-cloudcms] / cloudcms / static / cloudcms / css / forms.css
index 2ac23e5..6b34891 100644 (file)
@@ -1,17 +1,17 @@
 /* generic form styles */
 input, textarea, .form-widget                          { background-color: #ffffff; color: #000;border-color: #000000; }
-#forms .input, #forms input                            { font-family: 'Didact Gothic', Verdana, sans-serif; font-size: 14px; font-weight: normal; line-height: 22px; letter-spacing: 1px;   border: 1px solid #808080; height: 21px; display: inline-block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; z-index: 2; }
+#forms .input, #forms input                            { font-family: 'Didact Gothic', Verdana, sans-serif; font-size: 14px; font-weight: normal; line-height: 22px; letter-spacing: 1px;   border: 1px solid #9e9e9e; height: 21px; display: inline-block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; z-index: 2; }
 #forms .input:focus, 
 #forms input:focus                                                     { position: relative; border: 1px solid #000; z-index: 100; }
 #forms .input:focus label,
 #forms input:focus label                                       { z-index: 300; }
 form.withlabels label                                          { width: 224px; display: block; float: left; padding-top: 0.8em; }
 form.withlabels input[type=text], 
-form.withlabels input[type=password]           { width: 270px; }
+form.withlabels input[type=password]           { width: 228px; }
 form.withlabels input[type=text].long, 
 form.withlabels input[type=password].long, 
 form.withlabels textarea.long                          { width: 224px; }
-form.withlabels textarea                                       { width:270px; }
+form.withlabels textarea                                       { width:228px; }
 .login-section a.button                                        { margin-bottom: 12px; }
 .login-section a.button:last-child                     { margin-bottom: none;}
 .login-section a.button.withicon                       { background-repeat: no-repeat; background-position: 15px 50%; padding-left: 40px; }
@@ -21,7 +21,7 @@ form h2 span                                                          { padding-bottom: 3px; }
 form .form-row                                                                 { min-height: 30px; position: relative;}
 form .form-row.submit                                          { margin: 22px 0 ;}
 form .form-row .extra-link                                     { color: #808080; text-decoration: none; border: none; margin-top:15px; line-height:98%; display:inline-block; padding-top:15px;   float: right; position:absolute; right:0; top:0; }
-form .form-row .extra-link:hover                       { border-bottom:1px solid #808080;}
+form .form-row .extra-link:hover                       { border-bottom:1px solid #9e9e9e;}
 form .form-row label                                           { font-size: 1.077em; }
 form.innerlabels label                                                 { position: absolute; bottom: 11px; left: 1.5em; color: #808080 ; }
 form.innerlabels p                                                     { margin:0; position: relative;}
@@ -33,8 +33,8 @@ form.innerlabels a:hover                                      { }
 form textarea,
 form input.text,
 form input[type="text"],
-form input[type="password"]                            { color:#808080; font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px;border: 1px solid #808080; height: 21px; display: inline-block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; z-index: 2; width:300px; }
-form select                                                                    { font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px;  border: 1px solid #808080; display:block;  margin-bottom: -1px; padding: 0.8em;  padding-left: 1.5em;  z-index: 2;  width:301px; }
+form input[type="password"]                            { color:#808080; font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px;border: 1px solid #9e9e9e; height: 21px; display: inline-block; margin-bottom: -1px; padding: 0.8em; padding-left: 1.5em; padding-right: 4em;z-index: 2; width:258px; }
+form select                                                                    { font-family: 'Didact Gothic', Verdana, sans-serif; font-weight: normal; line-height: 22px; letter-spacing: 1px;  border: 1px solid #9e9e9e; display:block;  margin-bottom: -1px; padding: 0.8em;  padding-left: 1.5em;  z-index: 2;  width:301px; }
 form textarea:focus,
 form input.text:focus,
 form input[type="text"]:focus,
@@ -66,19 +66,20 @@ form .with-errors select                                    { color: #9d261d;}
 form .with-errors label                                        { color: #e4776f; }
 .form-error                                                            { color:red;   font-size: 0.8em; padding: 5px 5px; }
 .form-errors.all .form-error                           { position: relative; border-radius: 0; margin-bottom: 1.3em; padding: 0.5em; }
-div.form-stacked                                                       { margin-bottom: 4em; }
+div.form-stacked                                                       { margin-bottom: 2em; padding-bottom:1em; }
 .checkbox-widget.checked                                       { background-color: #FF0000; background-image: url("../images/checkbox.png"); background-position: 50% 50%; }
 .content a.checkbox-widget                                     { border: 1px solid #808080; cursor: pointer; display: block; float: left; height: 25px; margin:5px 20px 0 0 ; width: 25px; }
 form.withlabels .checkbox-widget                       { margin-top:12px; }
 form.innerlabels .checkbox-widget +  label     { position:static; line-height:36px; color:#808080; }
 form.innerlabels .checkbox-widget +  label + a { border-bottom:1px solid #F89A1C; font-size: 1.1em; }
-form span.info                                                         { position:absolute;z-index:7; top:10px;  }
+form span.info                                                         { position:absolute;z-index:7; bottom:32px;  }
 form.innerlabels span.info                                     { left: 290px; }
 form.withlabels span.info                                      { left:485px;  }
 form span.info em                                                      { display:block; overflow:hidden;  position:absolute; left:0; text-indent:-100px; top:0; height:21px; width:21px; background:url(../images/symbols.png) no-repeat -4px -31px;cursor:pointer; }
 form span.info:hover em                                        { background-position:-4px -3px; }
 form span.info span                                            { position:absolute; left:29px; top:-2px; width:120px; padding-left:30px; background:url(../images/black-line.jpg ) no-repeat left 8px; min-height:50px; display:none; font-size:0.846em;}
 form span.info:hover span                                      { display:block; }
+form span.extra-img:hover +span.info span      { display:block; }
 form .with-errors span.info                                    { display:none;}
 form p                                                                         { margin-bottom:0;position:relative;}
 form input[readonly=true]                                      { /*background-color: #ddd;*/ color: #5e5e5e; }
@@ -108,23 +109,23 @@ form .with-hidden                                                 { display:none; }
 
 
 /* custom captcha */
-#okeanos_recaptcha                                                             { width:329px; border:1px solid #808080; margin:0 0 20px; position:relative; }
+#okeanos_recaptcha                                                             { width:329px; border:1px solid #9e9e9e; margin:0 0 20px; position:relative; }
 #okeanos_recaptcha #recaptcha_image                            { padding:15px 0; }
 #okeanos_recaptcha label.recaptcha_only_if_image,
 #okeanos_recaptcha label.recaptcha_only_if_audio{ position:absolute; top:auto; bottom:11px; }
 #okeanos_recaptcha a.recaptcha_audio_cant_hear_link { margin-left:20px;  }
-#okeanos_recaptcha #recaptcha_response_field   { width:220px; float:left; margin-left:-1px;  }
+#okeanos_recaptcha #recaptcha_response_field   { width:170px; float:left; margin-left:-1px;  }
 #okeanos_recaptcha .img                                                        { width:23px; float:left; height:23px; overflow:hidden; margin:8px; }
 #okeanos_recaptcha .img a                                              { display:block; width:100%; height:100%; background:url(../images/refresh_lg.png) no-repeat top left; text-indent:-100px }
 #okeanos_recaptcha .img-refresh        a                               { background:url(../images/refresh_lg.png); }
 #okeanos_recaptcha .img-refresh a:hover                        { background:url(../images/refresh_g.png); }
 #okeanos_recaptcha .img-audio  a                               { background:url(../images/sound_lg.png); }
 #okeanos_recaptcha .img-audio a:hover                  { background:url(../images/sound_g.png); }
-#okeanos_recaptcha .actions-wrap                               { border-top:1px solid #808080 }
+#okeanos_recaptcha .actions-wrap                               { border-top:1px solid #9e9e9e; }
 
 input.submit:focus,
 input[type="submit"]:focus,
-.content a.submit:focus                                                        { box-shadow: 0 0 0 1px #FFFFFF inset; border:1px solid #F89A1C; outline:0 none; }                                              
+.content a.submit:focus                                                        { box-shadow: 0 0 0 1px #FFFFFF inset; border:1px solid #F89A1C; outline:0 none;  line-height:20px;}                                            
 .content a.submit:hover                                                        { border-color:#3582AC; }
 
 p+ form                                                                                        { margin:2em 0; }
@@ -193,10 +194,28 @@ form.link-like.alone input[type="submit"]         { padding:0; }
     form textarea, 
        form input.text, 
        form input[type="text"], 
-       form input[type="password"]                                     { width:90%; }
+       form input[type="password"]                                     { width:75%; }
        .form-row .dk_container                                         { width:100%; }
 }
 form.submit-inline                                                             { position:relative }
 form.submit-inline .form-row.submit                            { position:absolute; left:578px; top:0; margin:0; }
 form.submit-inline .form-row input                             { margin:0 20px 0 0 ; }
 form.signup .back                                                              { float:right; margin:15px 70px 0 0 ; height:43px; line-height:43px }
+
+
+/* styles for complex profile form */
+form .form-following p span.extra-img                          { background:url(../images/symbols3.png) 0 -161px; z-index:8; }
+form .form-following input:hover + span.extra-img      { background-position:0 0px; }
+form .form-following p:hover span.extra-img:hover      { background-position:0 -54px; cursor:pointer; }
+form .form-following.open p span.extra-img                             { background-position: -33px -161px; }
+form .form-following.open input:hover + span.extra-img                 { background-position: -33px 0px; }
+form .form-following.open p:hover span.extra-img:hover { background-position: -33px -54px; cursor:pointer; }
+
+form .refresh p span.extra-img                                         { background:url(../images/symbols3.png) 54px -161px; z-index:8; }
+form .refresh input:hover +  span.extra-img                            { background-position:54px 0px; }
+form .refresh p:hover span.extra-img:hover                     { background-position:54px -54px; cursor:pointer; }
+form .refresh.open p span.extra-img                                    { background-position: -33px -161px; }
+form .refresh.open input:hover + span.extra-img                        { background-position: -33px 0px; }
+form .refresh.open p:hover span.extra-img:hover                { background-position: -33px -54px; cursor:pointer; }
+.hidden-form-rows                                                                      { display:none; }
+.signup .form-row.with-checkbox                                                { margin-top:1em; }