blob: db179b82ea773b452e24c93b048d5596ae1e044f [file] [log] [blame]
@import "common.less";
// Images locations
@image_form_submit_bg: "@{images_gsoc_location}/form-submit-bg.png";
@image_form_submit_bg_blue: "@{images_gsoc_location}/form-submit-bg-blue.png";
@image_header_bg: "@{images_gsoc_location}/header-bg.png";
@image_home_block_1_bg_center: "@{images_gsoc_location}/home-block-1-bg-center.gif";
@image_home_block_1_list_1: "@{images_gsoc_location}/home-block-1-list-1.png";
@image_home_block_1_list_2: "@{images_gsoc_location}/home-block-1-list-2.png";
@image_home_block_1_list_3: "@{images_gsoc_location}/home-block-1-list-3.png";
@image_home_block_students: "@{images_gsoc_location}/home-block-students-bg.gif";
@image_social_icons: "@{images_gsoc_location}/social-icons.png";
@darkblue: #00538b;
@orange: #d5620e;
@lightblue: #238bd2;
@lightbluebg: #6eb5e5;
@grey: #f6f6f6;
.imagereplace {
display: block;
font-size: 0;
line-height: 0;
text-indent: -9999em;
}
/*////////////////
Structure
////////////////*/
#page-header {
/*logo and globe*/
background: #fff url(@image_header_bg) bottom left repeat-x;
height: 181px;
width: 100%;
.grid_12 {
height: 158px;
#gci {
height:15px;
padding: 5px 20px 5px 0;
text-align:right;
a {
color: @lightblue;
font-size:12px;
font-weight:normal;
text-decoration:none;
}
}
}
h1,
p {
color: @lightblue;
font-size: 35px;
font-weight: bold;
line-height: 1em;
margin-left: 10px;
a {
color: @lightblue;
text-decoration: none;
}
}
}
#main {
/*main content container*/
.grid_9 {
background: @grey;
margin-left: 0;
}
.content {
overflow: hidden;
padding: 19px;
}
.block {
/*every block*/
background: #fff;
margin-bottom: 20px;
h4 {
/*block title*/
background: @lightbluebg;
color: #fff;
font-size: 15px;
line-height: 30px;
margin: 0;
padding: 0 0 0 7px;
text-transform: uppercase;
}
.block-content {
/*block content*/
overflow: hidden;
padding: 12px;
h5 {
color: @darkblue;
font-size: 20px;
font-weight: bold;
line-height: 1.1em;
margin: 0 0 8px 0;
}
p {
color: #000;
font-size: 12px;
line-height: 1.5em;
}
}
.readmore {
/*read more link in block*/
background: #dedede;
font-size: 13px;
font-weight: bold;
line-height: 25px;
padding: 3px 0 3px 9px;
a {
color: @orange;
text-decoration: none;
}
}
.org-home-readmore {
.readmore;
font-size: 13px;
padding: 3px 10px 3px 9px;
text-align: right;
}
div.block-title {
/*block title*/
background: #6eb5e5;
color: #fff;
font-size: 15px;
font-weight: bold;
line-height: 30px;
margin: 0;
padding: 0 0 0 7px;
text-transform: uppercase;
}
}
.home-block-1 {
/*how summer of code works*/
overflow: hidden;
width: 100%;
h2 {
color: @lightblue;
font-size: 27px;
font-weight: bold;
line-height: 1.7em;
margin: 0 0 0 12px;
}
h3 {
color: @lightblue;
font-size: 21px;
font-weight: normal;
margin: 0 0 0 12px;
}
ol {
/*numbered list*/
background: url(@image_home_block_1_bg_center) center center no-repeat;
float: left;
height: 218px;
list-style-type: none;
margin: 0 15px 0 0;
width: 429px;
li {
background-position: 13px center;
background-repeat: no-repeat;
color: @lightblue;
height: 72px;
font-size: 23px;
font-weight: bold;
padding: 0 0 0 136px;
strong {
display: block;
padding: 17px 10px 0 0;
}
span {
font-size: 13px;
}
}
li {
&.first {
background-image: url(@image_home_block_1_list_1);
}
&.second {
background-image: url(@image_home_block_1_list_2);
strong {
padding-top: 22px;
}
}
&.third {
background-image:url(@image_home_block_1_list_3);
}
}
}
.description p {
color: @orange;
font-size: 14px;
font-weight: bold;
margin: 10px 0 0 0;
padding-right: 10px;
}
}
.content_column_1 {
/*homepage left column*/
float: left;
width: 429px;
.block-students {
/*students apply now block*/
background: url(@image_home_block_students) 0 0 repeat-y;
color: #004371;
padding-bottom: 5px;
text-align: center;
h3 {
*background: url(@image_home_block_students) 0 0 no-repeat;
font-size: 35px;
font-weight: bold;
line-height: 1.9em;
margin: 0;
text-transform: lowercase;
}
p {
font-size: 14px;
font-weight: bold;
line-height: 1.5em;
margin: 0;
a {
color: #004371;
text-decoration: none;
}
&.action {
font-size: 20px;
margin-bottom: 5px;
a {
background: #e57e30;
color: #fff;
padding: 3px 7px;
}
span {
padding: 0 8px;
}
}
&.small {
color: #000;
font-size: 11px;
font-weight: normal;
margin-bottom: 5px;
}
}
}
.block-featured-project {
/*featured project block*/
.block-content {
padding-bottom: 0;
}
}
#block-participants-content {
text-align: center;
}
.block-participants {
/*participating orgs block*/
img {
margin: 0 10px 0 0;
max-height: 65px;
max-width: 65px;
vertical-align: middle;
}
}
.block-mentors {
/*mentors apply now block*/
background: url(@image_home_block_students) 0 0 no-repeat;
color: #004371;
text-align: center;
padding-bottom: 15px;
h3 {
*background: url(@image_home_block_students) 0 0 no-repeat;
font-size: 35px;
font-weight: bold;
line-height: 1.9em;
margin: 0;
text-transform: lowercase;
}
p {
font-size: 14px;
font-weight: bold;
line-height: 1.5em;
margin: 0;
a {
color: #004371;
text-decoration: none;
}
}
p {
&.action {
font-size: 20px;
margin-bottom: 5px;
a {
background: #e57e30;
color: #fff;
padding: 3px 7px;
}
span {
padding: 0 8px;
}
}
&.small {
color: #000;
font-size: 11px;
font-weight: normal;
margin-bottom: 5px;
}
}
}
.block-orgs {
/*orgs apply now block*/
background: url(@image_home_block_students) 0 0 no-repeat;
color: #004371;
text-align: center;
padding-bottom: 15px;
h3 {
*background: url(@image_home_block_students) 0 0 no-repeat;
font-size: 33px;
font-weight: bold;
line-height: 1.9em;
margin: 0;
text-transform: lowercase;
}
p {
font-size: 14px;
font-weight: bold;
line-height: 1.5em;
margin: 0;
a {
color: #004371;
text-decoration: none;
}
}
p {
&.action {
font-size: 20px;
margin-bottom: 5px;
a {
background: #e57e30;
color: #fff;
padding: 3px 7px;
}
span {
padding: 0 8px;
}
}
&.small {
color: #000;
font-size: 11px;
font-weight: normal;
margin-bottom: 5px;
}
}
}
}
.content_column_2 {
/*homepage right column*/
float: right;
width: 213px;
.block-project-timeline {
.block-content {
padding: 12px 0 0 0;
.block-project-timeline-countdown {
margin-top: 10px;
text-align: center;
.deadline {
color: #3ba3dc;
display: block;
line-height: 1.2em;
}
.countdown {
color: #D5620E;
display: block;
font-size: 16px;
margin: 10px 0 15px 0;
}
}
}
}
.block-connect {
/*social network block*/
.social {
background-image: url(@image_social_icons);
background-position: 0 0;
background-repeat: no-repeat;
height: 31px;
float: left;
.imagereplace;
}
.fb {
margin-right: 13px;
width: 22px;
}
.tw {
background-position: -36px 0;
margin-right: 14px;
width: 27px;
}
.bl {
background-position: -77px 0;
margin-right: 11px;
width: 26px;
}
.em {
background-position: -114px 0;
margin-right: 11px;
width: 28px;
}
.irc {
background-position: -153px 0;
width: 29px;
}
.gp {
background-position: -193px 0;
width: 29px;
}
}
.block-blog-feed {
/*recent blog posts block*/
.block-content {
padding-bottom: 2px;
}
.blog-item {
margin-bottom: 10px;
span {
display: block;
font-weight: bold;
}
.date {
color: #999;
font-size: 10px;
line-height: 1.1em;
text-transform: uppercase;
}
.title {
font-size: 13px;
line-height: 1.2em;
a {
text-decoration: none;
}
}
}
}
}
.block-text {
p {
margin: 0;
a {
color: @lightblue;
font-weight: bold;
}
}
}
.action-link {
background: #EFAC4C;
padding: 3px 7px;
a {
color: white;
text-decoration: none;
&:link {
color: white;
text-decoration: none;
}
}
}
.action-button {
font-size: 21px;
font-weight: normal;
line-height: 1.3em;
margin: 0 0 1em 0;
.text {
clear: left;
color: #238BD2;
float: left;
margin-right: 10px;
padding-right: 10px;
text-align: right;
width: 250px;
}
.button-mixin (@button-background: url(@image_form_submit_bg) repeat scroll 0 0 transparent, @button-color: white) {
background: @button-background;
color: @button-color;
padding: 3px;
text-decoration: none;
text-align: center;
width: 90px;
}
.button {
.button-mixin;
cursor: pointer;
&.disabled {
.button-mixin(url(@image_form_submit_bg_blue) repeat scroll 0 0 transparent, @grey);
cursor: default;
}
}
}
#organization-name {
padding-left: 10px;
h2 {
line-height: 1em;
padding-top: 10px;
}
}
.org-page-link {
margin: 5px 0 0 12px;
}
.project-long {
/* Specifically applied to proposals detailed description. The rest is separate. */
pre {
background: none;
color: #000;
font: ~"12px/1.5em" Arial,'Helvetica Neue',Helvetica,sans-serif;
margin: 0;
code {
color: #000;
display: inline;
font: ~"12px/1.5em" Arial,'Helvetica Neue',Helvetica,sans-serif;
margin: 0;
padding: 0;
}
}
strong {
font-weight: bold;
}
em {
font-style: italic;
}
q {
border-left: 2px solid #CCCCCC;
font-style: normal;
margin-bottom: 10px;
margin-left: 2em;
padding-left: 1em;
}
blockquote {
margin-bottom: 10px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #000;
margin-bottom: 10px;
margin-top: 10px;
}
h1 {
font-size: 20px;
line-height: 1.5em;
}
h2 {
font-size: 18px;
line-height: 1.5em;
}
h3 {
font-size: 16px;
line-height: 1.5em;
}
h4 {
font-size: 14px;
line-height: 1.5em;
}
h5 {
font-size: 13px;
line-height: 1.5em;
}
h6 {
font-size: 12px;
line-height: 1.5em;
}
}
#description-section-redirect-message a {
background: @orange;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 3px 7px;
text-decoration: none;
}
}
/*////////////////
Footer
////////////////*/
#footer {
/*footer container*/
.grid_3 {
margin-right: 0;
}
.grid_9 {
font-size: 14px;
font-weight: bold;
margin-left: 0;
padding: 20px 0 25px 0;
text-align: center;
text-transform: uppercase;
}
.footer-meta {
/*powered by/empowered by*/
color: #4496ce;
a {
color: #4496ce;
text-decoration: none;
}
.powered {
padding-right: 15px;
}
img {
vertical-align: bottom;
}
.version {
font-size: 10px;
}
}
.footer-menu {
/*menu in footer*/
float: left;
margin: 0 0 12px 0;
overflow: hidden;
position: relative;
width: 100%;
ul {
clear: left;
float: left;
left: 50%;
list-style: none;
margin: 0;
padding: 0;
position: relative;
text-align: center;
li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0 20px 0 0;
position: relative;
right: 50%;
a {
display: block;
text-decoration: none;
}
&.last {
padding-right: 0px;
}
}
}
.social {
/*social network links in footer*/
padding: 3px 0 0 0;
a {
background-image: url(@image_social_icons);
background-position: 0 -34px;
background-repeat: no-repeat;
height: 14px;
.imagereplace;
}
.gp {
background-position: -100px -34px;
width: 22px;
}
.fb {
width: 16px;
}
.tw {
background-position: -16px -34px;
width: 20px;
}
.bl {
background-position: -36px -34px;
width: 20px;
}
.em {
background-position: -56px -34px;
width: 24px;
}
.irc {
background-position: -80px -34px;
margin-right: 20px;
width: 22px;
}
}
}
}
/*////////////////
Projects pages
////////////////*/
h2#project-page-student-name {
font-size: 21px;
font-weight: normal;
line-height: 1.3em;
margin: 0 0 10px 0;
}
.project-edit-link {
/* Edit link styling on proposal review page*/
font-size: 12px;
margin: 0 0 15px 0;
}
.project-long {
padding: 15px 15px 0 15px;
p {
line-height: 1.6em;
margin: 0 0 10px 0;
}
}
.project-short {
background: #fff;
border: 1px solid #ebebeb;
padding: 15px;
p {
line-height: 1.6em;
margin: 0;
&.project-possible-mentor {
margin: 0 0 10px 0;
}
}
}
.score {
display: block;
overflow: hidden;
padding: 0 0 0 18px;
.score-cumulative {
margin-left: 50px;
.score-cumulative-edit {
font-weight: bold;
line-height: 1em;
margin: 5px 0 0 0;
}
}
.score-average,
.score-cumulative {
float: left;
em {
color: #989898;
font-size: 11px;
font-weight: bold;
}
}
.score-add {
float: left;
margin-left: 50px;
}
.stars img {
vertical-align: text-bottom;
}
}
.project-meta {
color: #238bd2;
display: block;
font-size: 11px;
line-height: 1em;
margin: 15px 0 10px 0;
overflow: hidden;
a {
color: #238bd2;
font-weight: bold;
padding: 0 3px;
text-decoration: none;
text-transform: uppercase;
}
.comment-link {
float: left;
padding-left: 18px;
width: 410px;
}
.subscribe-link {
float: right;
padding-right: 10px;
text-align: right;
width: 200px;
}
}
/*////////////////
Comments
////////////////*/
.project-comment-container {
background: #e1edf5;
margin: 20px auto 30px auto;
padding: 20px 0;
width: 570px;
.project-comment-box {
background: #cde5f5;
display: block;
margin: 0 auto 16px auto;
overflow: hidden;
padding: 0;
width: 524px;
h3 {
color: #799EB8;
font-size: 12px;
font-weight: bold;
margin: 0 0 10px 0;
padding: 10px 0 0 10px;
text-transform: uppercase;
}
.project-comment-single {
background: #f0f7fc;
display: block;
margin: 0 0 15px 0;
overflow: hidden;
padding: 15px;
.project-comment-score {
color: #4d4d4d;
font-style: italic;
margin: 0 0 3px 0;
}
.project-comment-meta {
margin: 0 0 3px 0;
strong {
color: #4d4d4d;
font-style: italic;
padding-right: 5px;
}
a {
color: #208ad3;
text-decoration: none;
}
span {
color: #919191;
font-style: italic;
padding-left: 4px;
}
}
p {
line-height: 1.6em;
margin: 0 0 8px 0;
&.comment-reply-link {
display: block;
float: right;
font-size: 11px;
line-height: 1em;
margin: 0;
a {
display: block;
color: #208ad3;
text-decoration: none;
text-transform: uppercase;
padding: 5px 7px 5px 7px;
}
&.active a {
background: #cde5f5;
}
}
}
}
.project-comment-single-reply {
clear: both;
display: block;
overflow: hidden;
padding: 15px 0 0 0;
}
.comment-reply {
background: #cde5f5;
clear: both;
display: block;
padding: 10px 12px;
}
}
.project-comment-private-container {
background: #dddddd;
h3 {
color: #666;
}
.project-comment-single {
background: #f5f5f5;
}
}
}
p.reply-logged-in {
color: #666;
font-style: italic;
font-weight: bold;
margin: 0 0 3px 0;
a {
font-style: normal;
font-weight: normal;
}
}
/*////////////////
Requests
////////////////*/
.request-message {
p {
line-height: 1.6em;
margin: 0 0 10px 0;
}
}
.request-summary {
background: #fff;
border: 1px solid #ebebeb;
padding: 15px;
p {
line-height: 1.6em;
margin: 0;
}
}
.request-response {
padding: 20px 0 0 0;
}
/*////////////////
User Login
////////////////*/
#user-login {
margin: 0 0 10px 0;
text-align: right;
p {
color: #989898;
font-style: italic;
margin: 0;
}
a {
font-style: normal;
font-weight: normal;
}
}
#sort {
margin-bottom: 7px;
text-align: right;
vertical-align: bottom;
.selector {
/* make this class explicitly blank*/
}
select {
min-width: 0;
}
span {
text-align: left;
width: 85px;
}
}