﻿/*
    CONNECT THEME
*/

/*  MEDIA OVERRIDE
This stylesheet can be used to override existing media styles used in the selected/configured theme that is used
to change the layout of page elements for different viewport sizes used in different devices such as tablets and mobiles.
Add styles to this stylesheet file if you want to change the look and feel of page elements in different viewport sizes.
A responsive css strategy has been used in the join@home application. This means that there is one base template file that is
modified by the css. The layout relies upon an underlying liquid grid (Bootstrap Twitter CSS Framework) that uses % values on all containers & em values on all text./*

NOTE:
**********DO NOT**********
change other css files in the themes directory, as the changes will not be persisted when a new version of the software is installed.
**********DO NOT**********
add styles that effect the grid layout (span or container classes) and positioning of page elements.
ONLY change:
    text (family, size(em), color),
    border(width,colour)
    image backgrounds(reference styles from custom.css)
    
    if required.
*/

/*  VIEWPORT SIZES
-------------------------------------------------------------------------------*/


/* If the viewport width is => (MORE than 1200 pixels wide)  */
@media (min-width: 1200px) {

  /*Add custom media queries:*/
	
}

/* If the viewport is (MORE => than 768 pixels wide) and (LESS <= than 979 pixels wide) */
@media (min-width: 768px) and (max-width: 979px) {

  /*Add custom media queries:*/
  
}

/* If the viewport width is <= 767 pixels ...  (LESS THEN 767 pixels wide)  */
@media (max-width: 767px) {

  /*Add custom media queries:*/
	
}

/* If the viewport width is <= 480 pixels ...  (LESS THEN 480 pixels wide) */
  @media (max-width: 480px) {

    /*Add custom media queries:*/
	
}